本文旨在解决网页背景颜色动态切换的问题，避免每次点击按钮都需要重新加载页面的情况。通过将颜色随机选择逻辑放置于按钮点击事件处理函数内部，确保每次点击都能获取新的颜色值，从而实现背景颜色的动态更新。本文将提供详细的代码示例和解释，帮助开发者轻松实现此功能。
在网页开发中，动态改变页面元素（例如背景颜色）是常见的需求。如果希望在不重新加载页面的情况下，通过点击按钮来改变背景颜色，关键在于确保每次点击事件都能获取新的颜色值。以下是如何实现此功能的详细步骤和代码示例。
核心问题：变量作用域
原始代码的问题在于，颜色数组 arr 和随机选择的颜色 item 在脚本加载时只被赋值一次。这意味着，每次点击按钮时，document.body.style.background 始终被设置为相同的 item 值，导致背景颜色无法动态变化。
解决方案：将颜色选择逻辑放入事件处理函数
要解决这个问题，需要将颜色随机选择的逻辑移动到 onclick 事件处理函数内部。这样，每次点击按钮时，都会重新生成一个随机颜色，并将其应用于背景。
代码示例：
MDWechat是一款xposed插件,能够使使微信Material Design化。功能实现的功能有:1.主界面 TabLayout Material 化,支持自定义图标2.主界面 4 个页面背景修改3.全局 ActionBar 和 状态栏 颜色修改,支持主界面和聊天页面的沉浸主题(4.0新增)4.自动识别微信深色模式以调整MDwechat配色方案(3.6新增)5.主界面添加悬浮按钮(Float
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();
}代码解释：
- let arr = [...]: 定义一个包含多种颜色的数组。
- document.getElementById('btn').onclick = function(e) { ... }: 获取 ID 为 btn 的按钮元素，并为其绑定一个点击事件处理函数。
- *`let item = arr[Math.floor(Math.random() arr.length)];`**: 这是关键的一行。在点击事件发生时，它会：
- Math.random() * arr.length: 生成一个 0 到 arr.length 之间的随机数（不包含 arr.length）。
- Math.floor(...): 将随机数向下取整，得到一个有效的数组索引。
- arr[...]: 使用这个索引从 arr 数组中获取一个随机颜色，并将其赋值给 item 变量。
- document.body.style.background = item;: 将页面的背景颜色设置为新选择的 item 值。
- document.getElementById('name').innerHTML = item;: 将 ID 为 name 的元素的内容设置为新选择的 item 值，用于显示颜色名称。
- e.preventDefault();: 阻止默认事件行为。虽然在此示例中可能没有直接影响，但通常建议在事件处理函数中使用，以防止意外的页面刷新或其他默认行为。
HTML 结构：
Color name will appear here
确保 script.js 文件包含了上述 JavaScript 代码。
CSS 样式（可选）：
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;
}这些 CSS 样式用于美化按钮和显示颜色名称的元素，可以根据需要进行调整。
注意事项：
- 代码位置： 确保 JavaScript 代码在 HTML 结构加载完毕后执行。可以将
