首页使用JavaScript完成以下要求的网页：1：显示文本“你好”，2：点击按钮更换文本颜色

使用JavaScript完成以下要求的网页：1：显示文本“你好”，2：点击按钮更换文本颜色

时间: 2024-02-26 22:58:08 浏览: 131

可以按照以下步骤使用JavaScript完成要求的网页： 1. 创建一个HTML文件，添加一个`<div>`元素并设置`id`属性为`message`，在其中添加文本“你好”。 ```html <!DOCTYPE html> <html> <head> <title>JavaScript 网页</title> </head> <body> <div id="message">你好</div> <button id="changeColorBtn">更换颜色</button> <script> // 在这里编写JavaScript代码 </script> </body> </html> ``` 2. 使用JavaScript获取`<div>`元素和按钮元素，并将其存储在变量中。 ```javascript var messageDiv = document.getElementById("message"); var changeColorBtn = document.getElementById("changeColorBtn"); ``` 3. 添加事件监听器，当点击按钮时更改文本颜色。 ```javascript changeColorBtn.addEventListener("click", function() { var colors = ["red", "blue", "green", "orange", "purple"]; var randomColor = colors[Math.floor(Math.random() * colors.length)]; messageDiv.style.color = randomColor; }); ``` 完整代码如下： ```html <!DOCTYPE html> <html> <head> <title>JavaScript 网页</title> </head> <body> <div id="message">你好</div> <button id="changeColorBtn">更换颜色</button> <script> var messageDiv = document.getElementById("message"); var changeColorBtn = document.getElementById("changeColorBtn"); changeColorBtn.addEventListener("click", function() { var colors = ["red", "blue", "green", "orange", "purple"]; var randomColor = colors[Math.floor(Math.random() * colors.length)]; messageDiv.style.color = randomColor; }); </script> </body> </html> ``` 这样，当单击按钮时，文本颜色将更改为随机颜色。

阅读全文