闪烁的灯泡
闪烁的灯泡
闪烁的灯泡学习路线：JavaScript_BOM->Window对象->confirm()、setInterval()、setTimeout()->History、Location->闪烁的灯泡简介：这是一个用来理解JS定时器函数的，小案例，制造一个可以闪烁的灯泡。素材：off.gifon.gif 演示代码：代码语言：javascript代码运行次数：0运行复制
闪烁的灯泡
学习路线：JavaScript_BOM->Window对象->confirm()、setInterval()、setTimeout()->History、Location->闪烁的灯泡
简介：这是一个用来理解JS定时器函数的，小案例，制造一个可以闪烁的灯泡。
素材：
- off.gif
- on.gif
演示代码：
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript演示</title>
</head>
<body>
<!--
添加按钮，给按钮绑定事件
开灯的按钮
-->
<input type="button" onclick="on()" value="开灯">
<!-- 添加图片 -->
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<!--
添加按钮，给按钮绑定事件
关灯的按钮
-->
<input type="button" onclick="off()" value="关灯">
<script>
// 设置开关灯的按钮
function on(){
document.getElementById('myImage').src='../imgs/on.gif'; // 通过id获取元素 设置点击事件
}
function off(){
document.getElementById('myImage').src='../imgs/off.gif' // 通过id获取元素 设置点击事件
}
//定义一个变量，用来记录灯的状态，偶数是开灯状态，奇数是关灯状态
var flag = 0;
// 通过使用循环定时器，来达到让灯泡一闪一闪的，间隔时间为1s
setInterval(function (){
if(flag % 2 == 0){//表示是偶数，开灯状态，调用 on() 函数
on();
}else { //表示是奇数，关灯状态，调用 off() 函数
off();
}
flag ++;//改变变量的值
},1000);
</script>
</body>
</html>#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2025-07-20 01:18:16
上一篇：linux安装jdk教程
下一篇：使用redis进行限流
推荐阅读
| 留言与评论（共有 9 条评论） |
| 本站网友 温州男科 | 24分钟前 发表 |
| 来达到让灯泡一闪一闪的 | |
| 本站网友 烤鸡腿 | 15分钟前 发表 |
| 调用 off() 函数 off(); } flag ++;//改变变量的值 } | |
| 本站网友 北京时间和伦敦时间 | 18分钟前 发表 |
| 1000); </script> </body> </html>本文参与 腾讯云自媒体同步曝光计划 | |
| 本站网友 成都铁路学校 | 26分钟前 发表 |
| center;"> <!-- 添加按钮 | |
| 本站网友 发作性呼吸困难 | 11分钟前 发表 |
| 调用 off() 函数 off(); } flag ++;//改变变量的值 } | |
| 本站网友 斗鸡眼图片 | 25分钟前 发表 |
| 调用 off() 函数 off(); } flag ++;//改变变量的值 } | |
| 本站网友 走自己的路让别人说去吧 | 23分钟前 发表 |
| setInterval() | |
| 本站网友 珍菊降压片 | 7分钟前 发表 |
| 调用 on() 函数 on(); }else { //表示是奇数 | |