以 JavaScript 改变背景

在这个主题中，我们将演示如何使用 JavaScript 更改网页的背景颜色。这是一个简单但实用的技能，可以让你的网页更加个性化。

实现步骤

1. 在 HTML 文件中添加一个按钮，用于触发背景颜色更改：

<button onclick="changeBackground()">改变背景色</button>

2. 在 JavaScript 文件中编写函数 changeBackground()，用于更改背景颜色：

function changeBackground() {
  let color = getRandomColor(); // 获取随机颜色
  document.body.style.backgroundColor = color; // 设置背景颜色
}

其中，getRandomColor() 函数用于获取一个随机颜色，示例代码如下：

function getRandomColor() {
  let letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

该函数会生成一个包含六位随机字符的颜色码。

3. 在 CSS 文件中添加样式，美化按钮的外观：

button {
  background-color: #0077FF;
  color: #FFFFFF;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

完整代码片段

function changeBackground() {
  let color = getRandomColor(); // 获取随机颜色
  document.body.style.backgroundColor = color; // 设置背景颜色
}

function getRandomColor() {
  let letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

<button onclick="changeBackground()">改变背景色</button>

button {
  background-color: #0077FF;
  color: #FFFFFF;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

以上是以 JavaScript 改变背景的实现方法，希望能对您有所帮助。