新建2.html,编写代码,实现点击按钮改变背景颜色效果,颜色为随机产生的。
时间: 2024-05-14 11:18:02 浏览: 156
js实现点击按钮随机生成背景颜色
以下是实现该功能的 HTML 和 JavaScript 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>改变背景颜色</title>
<style>
body {
background-color: #f2f2f2;
text-align: center;
padding-top: 50px;
}
button {
padding: 10px;
font-size: 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="changeColor()">点击改变背景颜色</button>
<script>
function changeColor() {
var color = getRandomColor();
document.body.style.backgroundColor = color;
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
</html>
```
代码解释:
1. HTML 部分包含一个按钮和一个 JavaScript 脚本标签。
2. JavaScript 部分定义了两个函数,`changeColor()` 和 `getRandomColor()`。
3. `changeColor()` 函数通过调用 `getRandomColor()` 函数来获取一个随机颜色,并将其设置为 body 的背景颜色。
4. `getRandomColor()` 函数随机生成一个六位十六进制数,作为颜色值。
阅读全文