首页点击按钮改变页面颜色

点击按钮改变页面颜色

时间: 2024-12-10 09:38:31 浏览: 22

点击按钮改变页面颜色通常是在网页开发中的一种交互设计，特别是前端JavaScript应用中常见。当你有一个按钮元素，通过JavaScript事件监听（如`onclick`），当用户点击该按钮时，可以触发一个函数，这个函数会操作文档的全局样式，比如更改`body`、`background-color`等属性，从而改变页面的颜色。以下是一个简单的HTML和JavaScript示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>动态改变颜色</title> <style id="color-style"></style> </head> <body> <button onclick="changeColor()">点击改变颜色</button> <script> function changeColor() { var color = document.getElementById('randomColor'); // 获取随机颜色 document.getElementById('color-style').innerHTML = 'body { background-color: ' + color + '; }'; // 设置新的背景色 } // 示例：生成随机颜色 function getRandomColor() { return '#' + Math.floor(Math.random()*16777215).toString(16); } </script> </body> </html> ``` 在这个例子中，每次点击按钮，都会调用`changeColor`函数，它获取一个新的随机颜色并应用到`body`的背景颜色上。

阅读全文