闪烁的灯泡

ゞ浴缸里的玫瑰 2024-03-31 13:05 15阅读 0赞

## 闪烁的灯泡 ##

**学习路线**：[JavaScript\_BOM][JavaScript_BOM]\->[Window对象][Window]\->[confirm()、setInterval()、setTimeout()][confirm_setInterval_setTimeout]\->[History、Location][History_Location]\->[闪烁的灯泡][Link 1]

**简介**：这是一个用来理解JS定时器函数的，小案例，制造一个可以闪烁的灯泡。

素材：

*  off.gif  
    ![在这里插入图片描述][3bff17d37d0f4e33b0f2ec0fc56ddbba.gif]
 *  on.gif  
    ![在这里插入图片描述][d6cb8ecbec4f4a779e804648cbbb73f6.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>

[JavaScript_BOM]: https://editor.csdn.net/md/?articleId=128095193
[Window]: https://blog.csdn.net/qq_51447496/article/details/128095300
[confirm_setInterval_setTimeout]: https://blog.csdn.net/qq_51447496/article/details/128103458
[History_Location]: https://blog.csdn.net/qq_51447496/article/details/128104240
[Link 1]: https://blog.csdn.net/qq_51447496/article/details/128095524
[3bff17d37d0f4e33b0f2ec0fc56ddbba.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/113c6fe547f040e4bf16438259784337.gif
[d6cb8ecbec4f4a779e804648cbbb73f6.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/413bd7f8498948268ec9296acb84433b.gif