JS之开关灯

unravel_sky

于 2022-09-09 17:06:54 发布

阅读量399

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/unravel_sky/article/details/126786384

版权

思路：先定义一个按钮,然后给按钮添加点击事件，点击按钮时修改body的背景颜色

、

<!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>

<style>
    body{
        background-color: white;
    }
    input{
        margin: 100px 700px;
        width: 80px;
        height: 50px;
        background-color: powderblue;
        border: 1px solid white;
        font-size: 16px;
    }
</style>

<body>
    <input type="button" value="关灯">

    <script>
        var inp = document.querySelector('input');
        var body = document.body
        // console.dir(inp)
        // console.dir(body)
        var flag = 1;
        inp.onclick = function(){
            if(flag == 1){
                inp.value = '开灯';
                body.style.backgroundColor = 'black';
                flag = 0;
            }else{
                inp.value = '关灯';
                body.style.backgroundColor = 'white';
                flag = 1;
            }
            
        }
    </script>
</body>
</html>