JS实现灯泡开关特效

JS实现灯泡开关特效的具体代码，供大家参考，具体内容如下

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站建设、网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的普安网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

并且显示时间，文字

首先准备两张图片：开灯ON.jpg：关灯OFF.jpg

效果图：

JS实现灯泡开关特效

下面是具体实现代码：

HTML：



 
 
 开关灯特效
 
 
 
 
 
 时间：
 
 默认关灯
 
 
 
 
 开灯
 
 
 关灯

CSS：

body {
 color: #333;
 background-color: #000;
 margin: 16px 10%;
}

p {
 color: #fff;
}

a {
 color: #FFFF00;
 text-decoration: none;
}

ul {
 padding: 0px;
}

li {
 float: left;
 padding-top: 9px;
 padding-left: 960px;
 list-style: none;
}

JS：

function showBulb(assign) {
 var aimg = assign.getAttribute("href"); //通过getAttribute获取href
 var imgBulb = document.getElementById("imgBulb"); //获取里面ID
 imgBulb.setAttribute("src", aimg); //将src路径图片修改为目标路径:var aimg
 showTime(); //时间
 var text = assign.getAttribute("title"); //通过getAttribute获取title
 var def = document.getElementById("def");
 def.firstChild.nodeValue = text; //返回当前节点的第一个子节点文本节点

}

function showTime() {
 var show = document.getElementById("show");
 var newDate = new Date();
 show.innerHTML = newDate.toLocaleString(); //根据本地时间格式把Date对象转换为字符串显示出来
}

这里我给大家准备了两张图，大家可以拿去用

JS实现灯泡开关特效

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

标题名称：JS实现灯泡开关特效
文章转载：http://dzwzjz.com/article/jcepjc.html

大橙子网站建设，新征程启航

JS实现灯泡开关特效

其他资讯