H5与C3实现开关灯交互效果-优快云博客

本文介绍如何利用H5和C3库创建一个点击切换开关灯的互动案例，通过文字触发灯光的开与关效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击开关灯文字,实现转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开关灯案例</title>
    <style>
        #light{
            width: 100px;
            height: 100px;
            margin: 200px 0 0 100px;
            background-color: yellow;
            border-radius: 50px;
        }
        #switch{
            width: 50px;
            height: 30px;
            margin-left: 125px;
            background-color: orange;
            line-height: 30px;
            text-align: center;
        }
        .post{
            width: 10px;
            height: 200px;
            background-color: slategray;
            margin-left: 145px;
        }
    </style>
    
    <script>
        window.onload = function () {
            document.getElementById("switch").onclick = function () {
               if (this.innerText == '关灯') {
                   document.body.style.backgroundColor = "black";
                   document.getElementById("light").style.backgroundColor="black";
                   this.innerText = "开灯"
               } else {
                   document.body.style.backgroundColor = "white";
                   this.innerText = "关灯"
                   document.getElementById("light").style.backgroundColor="yellow";
               }
            }
        }
    </script>
</head>
<body>
    <div id="light"></div>
    <div id="switch" >关灯</div>
    <div class="post"></div>
</body>
</html>

在这里插入图片描述