JAVASCRIPT实例:开关灯泡
JavaScript实例:开关灯泡
作者 :towaywu
2016-02-14 10:43:05.0
27 浏览
类别 :编程语言 前端编程 HTML/CSS/JAVASCRIPT
最近我们来写一些JS的实例,来辅助学习JS.这次实现的是简单的灯泡开关效果.这个实例主要是利用两张图片来完成.考虑到的知识点有点击事件和标签元素属性的操作.
首先我们默认的灯泡是一个关闭的状态
<img src="http://www.w3school.com.cn/i/eg_bulboff.gif" />
文章的图片来源w3school中文教程网.
我们先从思路来讲,然后在上代码.
点击事件应用在这个图片标签上,默认的时候我们的图片标签的灯泡是关闭状态.那这时候我们应该给与这个图片标签一个状态属性(我们例子中使用的是state属性,这个是自定义的属性)
然后就是对state属性和src属性进行操作了,要把他们的状态和图片的属性相对应,不要搞混乱了.
现在我们将代码贴上:
document.images[0].onclick = function(){
var state = this.getAttribute("state");
if(state === "on"){
this.src = "http://www.w3school.com.cn/i/eg_bulboff.gif";
this.setAttribute("state", "off");
}else{
this.src = "http://www.w3school.com.cn/i/eg_bulbon.gif";
this.setAttribute("state", "on")
}
}
代码是不是很简单.给图片点击事件,然后改变状态和对应的图片.这个例子,状态也可以使用一个全局属性来替代,但是如果应用在项目中,代码量一大就会容易混乱和修改.尽量用利于管理的方式.
效果图贴上:
本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=201 ,欢迎大家传播与分享.
标签 :javascript教程开关灯泡
android项目没有android.jar这个依赖包的解决办法
已经没有数据
towaywu
一个喜欢技术,走在创业路上的屌丝!欢迎一起交流
编程的人微信公众号: bianchengderen
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
