JavaScript中开关灯案例展示

置顶 Ednburgh-

已于 2022-07-19 18:41:32 修改

阅读量1.7k

点赞数 2

文章标签： javascript 前端 java

于 2022-06-27 13:41:07 首次发布

本文链接：https://blog.csdn.net/m0_71345904/article/details/125481957

版权

今天讲一个开关灯的案例，这里逻辑思维重点在于打标记法。

代码展示，

需求：点击关灯按钮，页面颜色变成黑色，同时按钮的关灯变成开灯，再次点击页面会变成黄色，按钮又变回关灯，可以自定义去设置；

<style>
        .hover {
            background-color: black;
        }

        body {
            background-color: yellow;
        }
        .hover1{background-color: aqua;}
        
        .hover2{background-color: red;}
        .hover3{background-color: green;}
        .hover4{background-color: orchid;}
        .hover5{background-color: blue;}

    </style>
</head>

<body >
    <button id="on-off">关灯</button>
    <button id="cut">点击跑马灯</button>
    <script>
        var Switch = document.getElementById('on-off');
        var bodys = document.body;
        var flag = false;
        Switch.onclick = function () {
            flag = !flag
            if (flag) {
                bodys.className = 'hover'
                Switch.innerHTML = '开灯'


            }else {
                bodys.className=''
                Switch.innerHTML='关灯'
                
            }
        }
</script>
</body>

在html中添加一个按钮标签（button）。

因为需求是通过点击按钮来实现页面的颜色改变，所以首先获取这两个事件源

body元素较特殊，直接用document.body就可以获取到

获取完，给按钮添加点击事件属性（onclick）

重难点是我们每次点完他需要切换效果，而不是保留上一个触发事件，所以可以用标记法，来做一个if判断，首先声明一个变量把false赋值给他，点击后让结果为非false，也就是true，

做判断，结果为真，执行点击后要实现需求，结果为假，点击下一次时要把效果为空“”null

按钮内容改变，这样基本就可以了

效果图点击qian

点击后

拓展：我在这里加了一个简单的跑马灯，就是点击一次变次色，需要用到随机数绑定到classname里面

看代码

       
var cut=document.getElementById('cut');
var flag=false;
cut.onclick=function(){
    flag=!flag
    if(flag){
        var num=Math.floor(Math.random()*5+1)
        bodys.className = 'hover'+num;

    }else{
        bodys.className=''
    }
}

就可以了

Ednburgh-

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
JavaScript中开关灯案例展示

今天讲一个开关灯的案例，这里逻辑思维重点在于打标记法。代码展示，需求：点击关灯按钮，页面颜色变成黑色，同时按钮的关灯变成开灯，再次点击页面会变成黄色，按钮又变回关灯，可以自定义去设置；在html中添加一个按钮标签（button）。因为需求是通过点击按钮来实现页面的颜色改变，所以首先获取这两个事件源body元素较特殊，直接用document.body就可以获取到获取完，给按钮添加点击事件属性（onclick）重难点是我们每次点完他需要切换效果，而不是保留上一个触发事件，所以可以用标记法，来做一个if判断
复制链接

扫一扫