主页 / 网络编程 /

JS实现灯泡开关特效

网络编程 2021-07-04 15:01www.168986.cn编程入门
这篇文章主要为大家详细介绍了JS实现灯泡开关特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

并且显示时间，文字

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

效果图

狼蚁网站SEO优化是具体实现代码

HTML

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>开关灯特效</title>
 <link href="css/bulb.css" rel="stylesheet" type="text/css" />
 <script src="js/bulb.js"></script>
 </head>
 <body>
 <div align="center">
 <p>时间</p>
 <p id="show"></p>
 <p id="def">默认关灯</p>
 </div>
 <div align="center">
 <ul>
 <li>
 <a href="img/ON.jpg" style="width: 500px;height: 500px;" title="灯亮了" onclick="showBulb(this); return false;">开灯</a>
 </li>
 <li>
 <a href="img/OFF.jpg" style="width: 500px;height: 500px;" title="灯灭了" onclick="showBulb(this); return false;">关灯</a>
 </li>
 </ul>
 <img id="imgBulb" src="img/OFF.jpg" width="500px" height="500px" />
 </div>
 </body>
</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-: 9px;
 padding-left: 960px;
 list-style: none;
}

JS

function showBulb(assign) {
 var aimg = assign.getAttribute("href"); //通过getAttribute获取href
 var imgBulb = document.getElementById("imgBulb"); //获取<img/>里面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对象转换为字符串显示出来
}

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

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

上一篇：js实现开关灯效果 下一篇：浅谈微信小程序列表埋点曝光指南

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by