本文旨在解决网页背景颜色动态切换的问题，避免每次点击按钮都需要刷新页面的困扰。我们将通过 JavaScript 代码，实现点击按钮后随机改变背景颜色，并将颜色名称显示在页面上。核心在于每次点击事件发生时，都重新生成随机颜色值，确保每次都能获得新的颜色。
实现动态背景颜色切换
要实现点击按钮动态改变网页背景颜色，而无需刷新页面，关键在于每次点击事件发生时，都重新生成随机颜色值。问题在于，原始代码在页面加载时，仅生成一次随机颜色，并在后续的点击事件中重复使用该颜色，导致颜色无法改变。
以下是修改后的代码，它将随机颜色生成逻辑放入了 onclick 事件处理函数中：
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(); // 阻止默认行为，虽然在这个例子中并非必要
}代码解释：
MDWechat微信主题模块
下载
MDWechat是一款xposed插件,能够使使微信Material Design化。功能实现的功能有:1.主界面 TabLayout Material 化,支持自定义图标2.主界面 4 个页面背景修改3.全局 ActionBar 和 状态栏 颜色修改,支持主界面和聊天页面的沉浸主题(4.0新增)4.自动识别微信深色模式以调整MDwechat配色方案(3.6新增)5.主界面添加悬浮按钮(Float
立即学习“Java免费学习笔记（深入）”；
- 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 - 1之间的随机数。Math.floor()将其向下取整，得到一个有效的数组索引。然后，arr[index]` 从数组中获取对应索引的颜色值。
- document.body.style.background = item;: 将网页的背景颜色设置为随机生成的颜色。
- document.getElementById('name').innerHTML = item;: 将颜色名称显示在 ID 为 name 的元素中。
- e.preventDefault();: 阻止按钮的默认行为。在这个例子中，由于按钮没有默认行为，所以 e.preventDefault() 实际上并没有起到作用。在某些情况下，例如按钮位于表单中时，阻止默认行为可以防止表单提交。
HTML 结构：
Colour name will appear here
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;
}注意事项
- 确保 HTML 中正确引入了 JavaScript 文件 (script.js)，并且 JavaScript 代码在 HTML 元素加载完毕后执行。可以将
