首页新建2.html，编写代码，实现点击按钮改变背景颜色效果，颜色为随机产生的。

新建2.html，编写代码，实现点击按钮改变背景颜色效果，颜色为随机产生的。

时间: 2024-05-14 20:18:02 浏览: 160

以下是实现该功能的 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()` 函数随机生成一个六位十六进制数，作为颜色值。

阅读全文