JS实现灯泡开关特效的具体代码,供大家参考,具体内容如下
并且显示时间,文字
首先准备两张图片:开灯ON.jpg:关灯OFF.jpg
效果图:
下面是具体实现代码:
HTML:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title>开关灯特效& lt;/title>
& lt;链接的href=" https://www.yisu.com/zixun/css/bulb.css " rel="样式表" type=" text/css "/比;
& lt;脚本src=" https://www.yisu.com/zixun/js/bulb.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div=爸行摹痹诙云?
& lt; p>时间:& lt;/p>
& lt; p id="显示"祝辞& lt;/p>
& lt; p id=癲ef”在默认关灯& lt;/p>
& lt;/div>
& lt; div=爸行摹痹诙云?
& lt; ul>
& lt; li>
& lt; a href=" https://www.yisu.com/zixun/img/ON.jpg " title=暗屏亮恕痹诳? lt;/a>
& lt;/li>
& lt; li>
& lt; a href=" https://www.yisu.com/zixun/img/OFF.jpg " title=暗泼鹆恕痹诠氐? lt;/a>
& lt;/li>
& lt;/ul>
& lt; img id=" imgBulb " src=" https://www.yisu.com/zixun/img/OFF.jpg "宽度=" 500 px高度=?00 px”/祝辞
& lt;/div>
& lt;/body>
& lt;/html>
CSS:
身体{
颜色:# 333;
background - color: # 000;
保证金:16 px 10%;
}
p {
颜色:# fff;
}
一个{
颜色:# FFFF00;
文字修饰:没有;
}
ul {
填充:0 px;
}
李{
浮:左;
padding-top: 9 px;
padding-left: 960 px;
list-style:没有;
}
JS:
函数showBulb(分配){
var aimg=assign.getAttribute (“href”);//通过getAttribute获取href
var imgBulb=. getelementbyid (“imgBulb”);//获取& lt; img/祝辞里面ID
imgBulb。setAttribute (" src ", aimg);//将src路径图片修改为目标路径:var aimg
showTime ();//时间
var=assign.getAttribute文本(“标题”);//通过getAttribute获取标题
var def=. getelementbyid (“def”);
def.firstChild。nodeValue=https://www.yisu.com/zixun/text;//返回当前节点的第一个子节点文本节点
}
函数showTime () {
var显示=. getelementbyid(“秀”);
var newDate=new日期();
秀。innerHTML=newDate.toLocaleString ();//根据本地时间格式把日期对象转换为字符串显示出来
}
这里我给大家准备了两张图,大家可以拿去用
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
