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

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

时间: 2024-05-14 11:18:02 浏览: 156

js实现点击按钮随机生成背景颜色

本文实例为大家分享了js实现点击按钮随机生成背景颜色的具体代码，供大家参考，具体内容如下通过点击按钮更换整个页面的背景颜色代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input{ width: 150px; height: 50px; b

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

阅读全文