WebAPI中开关灯案例

最新推荐文章于 2024-11-21 02:02:38 发布

原创最新推荐文章于 2024-11-21 02:02:38 发布 · 710 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

这篇博客介绍了一个简单的HTML页面，其中包含一个按钮，通过JavaScript实现点击按钮切换背景颜色，模拟开关灯的效果。核心是定义了一个boolean变量作为开关状态，并根据变量的真伪更新按钮文字和背景色。

核心思想是定义一个boolean类型变量，通过他的true/false来控制开关灯

<!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>开关灯</title>
</head>

<body>
    <button id=btn>关灯</button>
    <script>
        var btn = document.getElementById('btn');
        console.log(btn);
        //定义一个boolean类型的变量，控制开关
        var bool = true;

        var color = "#fff";

        btn.onclick = function () {
            if (bool) {
                //bool判断为true，点击关灯
                color = "#000";
                btn.innerHTML = "开灯"
            } else {
                color = "#fff";
                //bool判断为false,点击开灯
                btn.innerHTML = "关灯"
            }
            bool = !bool
            document.body.style.backgroundColor = color;
        }
	</script>
</body>
</html>