html知识应用（1）

最新推荐文章于 2024-05-05 07:41:03 发布

计算机小白一个

最新推荐文章于 2024-05-05 07:41:03 发布

阅读量438

点赞数 7

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/2301_77523055/article/details/138227486

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="show()" >开关灯</button>
    
    <script>
        var  b=false;
        function show(){
            b=!b;
            if(b)
            {
                document.body.style.backgroundColor = 'black';
            }
            else
            {
                document.body.style.backgroundColor = 'white';
            }
        }
   
 
    </script>
</body>
</html>

这段HTML和JavaScript代码实现了一个简单的开关灯功能。下面是代码的详细解释：

HTML部分

<button onclick="show()">开关灯</button>

这里有一个按钮，按钮上的文字是“开关灯”。当这个按钮被点击时，它会触发onclick事件，并调用show()函数。

JavaScript部分

var b = false;

这里定义了一个全局变量b，并初始化为false。这个变量用于跟踪背景颜色是否为黑色。

function show() {  
    b = !b; // 切换b的值，如果b是true则变为false，如果b是false则变为true  
    if (b) {  
        document.body.style.backgroundColor = 'black'; // 如果b是true，设置背景颜色为黑色  
    } else {  
        document.body.style.backgroundColor = 'white'; // 如果b是false，设置背景颜色为白色  
    }  
}

这是show()函数的定义。

b = !b;：这行代码将b的值取反。如果b是true，它会被设置为false；如果b是false，它会被设置为true。
if (b) {...} else {...}：这是一个条件语句，根据b的值来决定背景颜色应该是黑色还是白色。
如果b是true，则执行if语句块，将网页背景颜色设置为黑色。
如果b是false，则执行else语句块，将网页背景颜色设置为白色。