本文旨在指导开发者如何在不刷新页面的情况下，通过点击按钮动态改变网页的背景颜色。我们将通过 JavaScript 实现颜色数组的随机选取，并将其应用到网页背景上，从而解决每次点击后需要刷新才能更新颜色的问题。
实现原理
核心问题在于，原代码只在页面加载时执行一次随机颜色选择，并将结果存储在 item 变量中。因此，每次点击按钮时，item 的值都不会改变，导致背景颜色保持不变。要解决这个问题，我们需要在每次点击按钮时都重新生成一个随机颜色。
具体步骤
HTML 结构：
首先，确保你的 HTML 结构包含一个用于显示颜色名称的 div 和一个触发颜色改变的 button。
CSS 样式（可选）：
可以添加一些 CSS 样式来美化按钮和显示区域。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
JavaScript 代码：
这是关键部分。我们需要将随机颜色选择的逻辑放入 onclick 事件处理函数中。
代码解释：
let arr = [...]: 定义一个包含各种颜色的数组。
document.getElementById('btn').onclick = function(e) { ... }: 为 id 为 btn 的按钮绑定一个
点击事件
处理函数。
let item = arr[Math.floor(Math.random() * arr.length)];: 在每次点击时，从颜色数组中随机选择一个颜色，并将其赋值给 item 变量。
document.body.style.background = item;: 将选中的颜色设置为 body 的背景颜色。
document.getElementById('name').innerHTML = item;: 将选中的颜色名称显示在 id 为 name 的 div 中。
e.preventDefault();: 通常情况下，e.preventDefault() 在这里是不必要的，除非你的按钮位于一个
颜色名称将在此显示
html {
height: 100%;
width: 100%;
}
#btn {
border: 3px solid green;
margin: auto;
text-align: center;
font-size: 50px;
}
#name {
border: 3px solid green;
margin: auto;
text-align: center;
font-size: 50px;
}let arr = ["black", "red", "silver", "gray", "white", "maroon", "red", "purple", "fuchsia", "green", "lime", "olive", "yellow", "navy", "blue", "teal", "aqua"];
document.getElementById('btn').onclick = function(e) {
// 每次点击都重新生成随机颜色
let item = arr[Math.floor(Math.random() * arr.length)];
document.body.style.background = item;
document.getElementById('name').innerHTML = item;
//e.preventDefault(); // 通常不需要，除非按钮在 form 中
}