使用HTML CSS和JavaScript设计背景色更改器

背景色更改器是一个项目，可以轻松地更改网页的背景色。网页上有颜色框，用户点击其中之一，则结果颜色将出现在网页的背景中。它使网页看起来更有吸引力。

文件结构：

--index.html
--style.css
--script.js

先决条件： 需要对HTML、CSS和JavaScript有基本知识。项目包含HTML、CSS和JavaScript文件。HTML文件添加了结构，接着使用CSS进行样式设置，然后使用JavaScript添加功能。

这是我们将要制作的背景切换器的预览图像。

使用HTML CSS和JavaScript设计背景色更改器

方法：

在HTML文件中，我们只需使用h1标签并创建一个用于颜色框的div。
在CSS文件中，颜色框被样式化，可以通过点击其中的颜色来更改背景颜色。
在javascript中，我们调用了一个名为bgchange的函数，其中包含一个颜色数组，当用户点击颜色时，它将应用于背景。

HTML文件： index.html 使用div标签、id属性和锚点标签来创建HTML布局。它定义了网页的结构。

CSS文件： style.css 使用CSS属性来装饰网页，使其看起来更有吸引力。根据项目的要求，给出了颜色、宽度、高度和位置属性。

JavaScript文件：script.js 使用JavaScript代码给网页提供功能。这里我们使用了带有“id”参数的箭头函数。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <title>Background changer using JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <h1>Background Changer</h1>
    <div id="colorbox"></div>
 
    <script src="script.js"></script>
</body>
 
</html>

CSS代码

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}
 
h1 {
    color: #6203e0;
    margin-bottom: 2rem;
}
 
#colorbox {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}
 
#colorbox span {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
}

Javascript代码

function bgchange(color) {
    let colorarray = ["#e58e26", "#f9b4ab", "#B1FB17", "#78e08f", "#fd79a8"];
    document.body.style.background = colorarray[color];
}
 
var colorarray = ["#e58e26", "#f9b4ab", "#B1FB17", "#78e08f", "#fd79a8"];
var colorbox = document.getElementById("colorbox");
 
colorarray.forEach(function (color, index) {
    let span = document.createElement("span");
    span.style.backgroundColor = color;
    span.addEventListener("click", function () {
        bgchange(index);
    });
    colorbox.appendChild(span);
});

输出： 在下面的GIF中，您可以看到每当用户点击颜色时，背景颜色会相应地发生变化。

使用HTML CSS和JavaScript设计背景色更改器