JS实现灯泡开关特效的具体代码,供大家参考,具体内容如下
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的普安网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
并且显示时间,文字
首先准备两张图片:开灯ON.jpg:关灯OFF.jpg
效果图:


下面是具体实现代码:
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对象转换为字符串显示出来
}这里我给大家准备了两张图,大家可以拿去用


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