开关灯回来切换js代码怎么写

实现开关灯效果的JavaScript代码，主要通过监听用户的点击事件来切换页面背景颜色和文本内容。核心步骤包括：监听点击事件、切换CSS类、更新文本内容。

下面是详细的实现步骤和解释：

一、设置HTML结构

首先，我们需要一个简单的HTML文件来放置我们的按钮和文本内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light Switch</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <button id="toggleButton">Turn Off the Light</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、添加CSS样式

接下来，我们需要添加一些基本的样式来区分开和关灯的状态。可以通过不同的背景颜色来表示。

/* styles.css */
body {
    transition: background-color 0.5s ease;
}
.light-on {
    background-color: white;
    color: black;
}
.light-off {
    background-color: black;
    color: white;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

三、编写JavaScript代码

最后，我们需要编写JavaScript代码来实现点击按钮时切换灯光状态的功能。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const toggleButton = document.getElementById('toggleButton');
    let isLightOn = true;
    toggleButton.addEventListener('click', function() {
        if (isLightOn) {
            document.body.classList.remove('light-on');
            document.body.classList.add('light-off');
            toggleButton.textContent = 'Turn On the Light';
        } else {
            document.body.classList.remove('light-off');
            document.body.classList.add('light-on');
            toggleButton.textContent = 'Turn Off the Light';
        }
        isLightOn = !isLightOn;
    });
    // Initialize with the light on
    document.body.classList.add('light-on');
});

四、详细解释代码逻辑

HTML结构：HTML文件定义了一个按钮，用户可以点击这个按钮来切换灯光状态。
CSS样式：CSS文件定义了两种状态的样式：light-on和light-off。light-on表示灯光打开，背景色为白色，文字颜色为黑色；light-off表示灯光关闭，背景色为黑色，文字颜色为白色。
JavaScript代码：
- 使用DOMContentLoaded事件确保在DOM完全加载后才执行代码。
- 获取按钮元素并初始化一个布尔变量isLightOn来跟踪灯光状态。
- 为按钮添加点击事件监听器，每次点击时切换light-on和light-off样式，并更新按钮的文本内容。
- 初始化页面时将灯光状态设置为打开（light-on）。

通过以上步骤，我们可以实现一个简单的开关灯功能。这个示例展示了如何使用JavaScript与HTML和CSS相结合来实现动态交互效果。

开关灯回来切换js代码怎么写

相关问答FAQs：