首页javascript入门网页变色

javascript入门网页变色

时间: 2023-07-28 07:08:02 浏览: 47

好的，让我们来编写一个简单的 JavaScript 代码，实现网页元素的颜色变化：首先，在 HTML 文件的 head 标签中添加如下代码，引入 JavaScript 文件： ```html <head> <script src="script.js"></script> </head> ``` 接下来，在同一目录下创建一个名为 `script.js` 的 JavaScript 文件，并添加如下代码： ```javascript // 获取要变色的元素 const element = document.getElementById('target'); // 定义颜色数组 const colors = ['red', 'blue', 'green', 'orange', 'purple']; // 定义变色函数 function changeColor() { // 随机生成一个颜色 const randomColor = colors[Math.floor(Math.random() * colors.length)]; // 将元素颜色设置为随机颜色 element.style.color = randomColor; } // 定义定时器，每隔1秒执行一次变色函数 setInterval(changeColor, 1000); ``` 最后，在 HTML 文件中添加要变色的元素，并给它一个 id： ```html <body> <h1 id="target">这是一个会变色的标题</h1> </body> ``` 现在，运行 HTML 文件，你会发现页面上的标题每隔1秒钟会随机变换颜色。