JavaScript 实现动态背景颜色切换：无需刷新页面-js教程-PHP中文网

JavaScript 实现动态背景颜色切换：无需刷新页面

霞舞

发布： 2025-08-26 17:02:17

原创

782人浏览过

javascript 实现动态背景颜色切换：无需刷新页面

本文旨在解决网页背景颜色动态切换的问题，避免每次点击按钮都需要刷新页面的困扰。我们将通过 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(); // 阻止默认行为，虽然在这个例子中并非必要
}

登录后复制

代码解释：

立即学习“Java免费学习笔记（深入）”；

MDWechat微信主题模块

MDWechat是一款xposed插件,能够使使微信Material Design化。功能实现的功能有:1.主界面 TabLayout Material 化,支持自定义图标2.主界面 4 个页面背景修改3.全局 ActionBar 和状态栏颜色修改,支持主界面和聊天页面的沉浸主题(4.0新增)4.自动识别微信深色模式以调整MDwechat配色方案(3.6新增)5.主界面添加悬浮按钮(Float

查看详情

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 结构：

<div id="name">Colour name will appear here</div>
<button id="btn" type="button">Click Me for colour change in background</button>
<script src="script.js"></script>

登录后复制

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 元素加载完毕后执行。可以将 <script> 标签放在 </body> 标签之前，或者使用 DOMContentLoaded 事件监听器。
可以根据需要修改颜色数组 arr，添加或删除颜色。
如果希望使用更丰富的颜色选择，可以考虑使用 CSS 的 hsl() 或 rgb() 函数，生成随机的色相、饱和度、亮度值，或者红、绿、蓝值。