点击1个按钮实现页面背景颜色变化
时间: 2024-10-13 19:07:29 浏览: 9
在网页开发中,你可以通过JavaScript或者jQuery实现点击一个按钮改变页面背景色的功能。下面是一个简单的例子,使用HTML、CSS和JavaScript:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.bg-color {
transition: background-color 0.5s; /* 添加过渡效果 */
}
</style>
</head>
<body>
<button id="colorButton">点击变色</button>
<script>
document.getElementById('colorButton').addEventListener('click', function() {
var colors = ['red', 'blue', 'green', 'yellow', 'purple']; // 颜色数组
var randomColor = colors[Math.floor(Math.random() * colors.length)]; // 随机选择一个颜色
document.body.classList.remove('bg-color'); // 先移除之前的背景颜色
document.body.style.backgroundColor = randomColor; // 设置新的随机背景色
});
</script>
</body>
</html>
```
在这个示例里,当你点击"点击变色"按钮时,会从预设的颜色数组中随机选取一种颜色作为新背景,并且因为设置了过渡效果,颜色会在0.5秒内平滑地变换。如果想要改变颜色列表或添加更多功能,只需修改JavaScript部分即可。
阅读全文