CSS样式——日夜间切换

凌尘k2024-08-092024-08-09

如何使用 HTML + CSS + JavaScript 创建一个日夜间切换的页面

网页设计中，日夜间切换功能可以极大地提升用户体验，适应不同光照条件。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 实现这一功能，并提供一个示例进行讲解。

整体效果

动态图片加载缓慢，请等待…

效果展示

🔑思路：

通过定义两套css样式，分别为日间和夜间，通过js切换。

实现步骤：
HTML 结构：创建一个包含按钮和内容的页面结构。
CSS 样式：定义日间模式和夜间模式的样式，通过类名应用不同的颜色和背景色。
JavaScript 代码：在文档加载完毕后，通过事件监听器捕捉按钮点击事件，根据当前模式的类名动态切换 body 的类。

1. 创建基本的 HTML 结构

首先，我们需要一个基本的 HTML 结构，用于展示页面内容和切换按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day and Night Mode Toggle</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>日夜间切换示例</h1>
        <p>这个页面展示了如何使用HTML、CSS和JavaScript来实现日夜间模式切换功能。</p>
        <button id="toggleButton">切换模式</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

原理： HTML 结构和按钮事件监听在 HTML 中，我们定义了一个按钮用于触发模式切换。JavaScript 监听按钮的点击事件，每次点击时，执行模式切换的逻辑。

1	<button id="toggleButton">切换模式</button>

2. 编写 CSS 样式

我们需要定义日间和夜间模式的样式。为此，我们将使用 CSS 中的类来实现样式的切换。

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    transition: background-color 0.5s, color 0.5s;
}

.container {
    text-align: center;
    padding: 50px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.day-mode {
    background-color: #ffffff;
    color: #000000;
}

.night-mode {
    background-color: #2c3e50;
    color: #ecf0f1;
}

以上代码中，我们定义了两个主要的类：day-mode 和 night-mode，分别用于日间和夜间模式的样式。

视觉效果：
通过在 CSS 中使用 transition 属性，我们可以实现平滑的过渡效果，使模式切换更为自然

1
2
3

.body {
    transition: background-color 0.5s, color 0.5s;
}

3. 使用 JavaScript 实现切换逻辑

接下来，我们需要编写 JavaScript 代码，实现点击按钮时切换模式的功能。

// script.js
document.addEventListener('DOMContentLoaded', (event) => {
    const body = document.body;
    const button = document.getElementById('toggleButton');

    button.addEventListener('click', () => {
        if (body.classList.contains('day-mode')) {
            body.classList.remove('day-mode');
            body.classList.add('night-mode');
        } else {
            body.classList.remove('night-mode');
            body.classList.add('day-mode');
        }
    });

    // 默认设置为日间模式
    body.classList.add('day-mode');
});

在 JavaScript 代码中，我们首先等待整个文档加载完毕，然后获取 <body> 元素和切换按钮。当按钮被点击时，我们检查当前的模式并进行相应的切换。
JavaScript 的核心逻辑是通过添加或移除 body 元素的 CSS 类来实现模式的切换。当用户点击按钮时，JavaScript 检查当前 body 是否包含 day-mode 类，如果包含则切换到 night-mode 类，反之亦然。

4. 完整示例代码

下面是我们完整的代码示例，包括 HTML、CSS 和 JavaScript：

HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day and Night Mode Toggle</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>日夜间切换示例</h1>
        <p>这个页面展示了如何使用HTML、CSS和JavaScript来实现日夜间模式切换功能。</p>
        <button id="toggleButton">切换模式</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 文件

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    transition: background-color 0.5s, color 0.5s;
}

.container {
    text-align: center;
    padding: 50px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.day-mode {
    background-color: #ffffff;
    color: #000000;
}

.night-mode {
    background-color: #2c3e50;
    color: #ecf0f1;
}

JavaScript 文件

// script.js
document.addEventListener('DOMContentLoaded', (event) => {
    const body = document.body;
    const button = document.getElementById('toggleButton');

    button.addEventListener('click', () => {
        if (body.classList.contains('day-mode')) {
            body.classList.remove('day-mode');
            body.classList.add('night-mode');
        } else {
            body.classList.remove('night-mode');
            body.classList.add('day-mode');
        }
    });

    // 默认设置为日间模式
    body.classList.add('day-mode');
});

5. 总结

通过以上步骤，我们成功地创建了一个可以进行日夜间切换的网页。我们使用 HTML 定义结构，CSS 设置样式，JavaScript 实现切换逻辑。可以在你的项目中应用日夜间模式切换功能。