闪烁的灯泡

极客李华

已于 2022-11-29 20:23:20 修改

阅读量242

点赞数

分类专栏： JS学习之旅文章标签： javascript 前端开发语言

于 2022-11-29 12:16:35 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/128095524

版权

JS学习之旅专栏收录该内容

55 篇文章 4 订阅

订阅专栏

闪烁的灯泡

学习路线：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>