JS小实战1-开关灯效果

开灯的效果:

JS小实战1-开关灯效果关灯的效果:

JS小实战1-开关灯效果

实现思路和功能:

1.默认页面是白色的(开灯状态),按钮显示的文字是关灯

2.点击按钮

1)获取当前开关灯状态(看body的背景颜色)

2)如果当前是开灯状态(body的背景颜色是白色),我们让body的背景颜色变为黑色(关灯状态),按钮中显示开灯

3)如果当前是关灯状态(body的背景颜色是黑色),我们让body的背景颜色变为白色(开灯状态),按钮中显示关灯

代码实现:

<head>

        <style>

                body{height: 100%; }

                  button{padding: 0 20px; line-height: 35px;}

        </style>

</head>

<body style="background-color: #fff;">

    <button id="lampBtn">关灯</button>

    <script>

        //1.想要操作谁就先获取谁,我们要获取body和按钮

        let lampBtn = document.getElementById('lampBtn');

        let body = document.body;//获取body

        //2.事件绑定,点击按钮的时候做什么事情

        lampBtn.onclick = function(){

        注意:元素.style.xxx=xxx;设置元素的行内样式,元素.style.xxx不赋值的情况下是获取元素的行内样式(记住是行内样式:不管在那设置的样式,只要不是行内上设置,都获取不到)

        //3.获取body的背景颜色

            let bg = body.style.backgroundColor;

            if(bg === 'white'){

                //为什么用===,原因:body.style.backgroundColor;打印的结果是字符串

                //当前处于开灯状态

                body.style.backgroundColor = 'black';

                lampBtn.innerText = '开灯';

            }else{

                //当前处于关灯状态

                body.style.backgroundColor = 'white';

                lampBtn.innerText = '关灯';

            }

        }

    </script>

</body>

上一篇:1.javascript 第一课,点击按钮改变便签中的内容


下一篇:[linux_fix]devsda1: clean.md