javaScript 按钮切换和定时切换图片

最新推荐文章于 2022-12-16 15:24:29 发布

「已注销」

最新推荐文章于 2022-12-16 15:24:29 发布

阅读量458

点赞数 1

分类专栏： javaScript 文章标签： javascript webview 开发语言

本文链接：https://blog.csdn.net/m0_57855884/article/details/124599547

版权

javaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

需求：1.按住按钮开关灯泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" onclick="on()" value="开灯">
    <img id="myImage" border="0" src="img/灭.png" style="height: 200px; width: 200px;">
    <input type="button" onclick="off()" value="关灯">

</body>
<script>
    function on(){
        document.getElementById('myImage').src='img/亮.png';
    }
    function off(){
        document.getElementById('myImage').src='img/灭.png';
    }

</script>
</html>

需求：2.通过定时器 setInterval 每隔2 秒切换一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" onclick="on()" value="开灯">
    <img id="myImage" border="0" src="img/灭.png" style="height: 200px; width: 200px;">
    <input type="button" onclick="off()" value="关灯">

</body>
<script>
    function on(){
        document.getElementById('myImage').src='img/亮.png';
    }
    function off(){
        document.getElementById('myImage').src='img/灭.png';
    }

    // 变量
    var x = 0;
    
    //根据一个变化数字，产生固定个数的值：2 x % 2    3 x %3
    //定时器 setInterval
    setInterval(function(){
        if(x % 2==0){
            on();
        }else{
            off();
        }

        x++;
        //两秒执行一次
    },2000);

</script>
</html>