本文介绍如何使用JavaScript实现灯泡开关切换效果，并同步显示当前时间。通过HTML定义结构，CSS控制样式，JS处理点击事件与图片路径替换，同时利用Date对象实时更新时钟显示。
JavaScript灯泡开关与时间显示实现
以下是使用JavaScript实现灯泡开关特效的具体代码，供读者参考。
该特效在切换灯泡状态的同时，还会动态显示当前的系统时间及相关文字信息。
首先，需要准备两张图片素材：一张表示开灯状态的图片命名为“ON.jpg”，另一张表示关灯状态的图片命名为“OFF.jpg”。
最终的运行效果如下图所示：
接下来是具体的实现代码部分。
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-top: 9px;
padding-left: 960px;
list-style: none;
}JavaScript逻辑部分代码如下：
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对象转换为字符串显示出来
}文中提供的两张图片素材供读者直接使用。
以上就是本文的全部内容，希望对读者有所帮助，欢迎继续支持本站。