闪烁的灯泡
学习路线：JavaScript_BOM->Window对象->confirm()、setInterval()、setTimeout()->History、Location->闪烁的灯泡
简介：这是一个用来理解JS定时器函数的，小案例，制造一个可以闪烁的灯泡。
素材：
- off.gif
- on.gif
演示代码：
<!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>
