使用定时器函数每秒实现设置浏览器窗口的背景颜色:红、橙、黄、绿、青、蓝、紫七种颜色之一,循环显示
时间: 2023-10-01 21:09:26 浏览: 141
以下是使用JavaScript实现每秒更换背景颜色的代码:
```javascript
var colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"]; //定义颜色数组
var index = 0;
function changeColor() {
document.body.style.backgroundColor = colors[index]; //设置背景色
index = (index+1) % colors.length; //循环更新颜色索引
}
setInterval(changeColor, 1000); //每秒调用changeColor函数
```
使用`setInterval`函数可以定时调用指定的函数,第一个参数为要执行的函数,第二个参数为调用函数的时间间隔(单位为毫秒)。上述代码中,每秒钟调用`changeColor`函数一次,将背景色设置为数组中的颜色之一。`index`变量用于记录当前显示的颜色索引,每次更新时取模以实现循环显示。
相关问题
用html使用window的方法制作一个定时器
在HTML中,通常我们不会直接使用`window`对象来创建一个定时器,因为HTML本身并不支持JavaScript的定时功能。但是,如果你是在一个包含JavaScript的环境中,比如在一个HTML文件中嵌入了`<script>`标签,可以使用JavaScript的`setInterval`或`setTimeout`函数来创建一个定时器。
以下是一个简单的例子,展示如何使用`setInterval`函数每秒更新页面的时间:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器示例</title>
</head>
<body>
<h1 id="timer">0秒</h1>
<script>
// 创建一个定时器,每隔1秒钟执行一次updateTimer函数
var timer = setInterval(function() {
// 获取当前时间并显示在页面上
var currentTime = new Date().toLocaleTimeString();
document.getElementById("timer").textContent = currentTime;
}, 1000); // 1000毫秒等于1秒
// 如果需要,在适当的时候清除定时器(例如用户关闭窗口)
window.addEventListener('beforeunload', function (event) {
clearInterval(timer);
});
</script>
</body>
</html>
```
在这个例子中,当页面加载完成后,会开始计时,并且每过一秒钟更新显示的时间。如果用户离开页面(如点击浏览器的“关闭”按钮),`beforeunload`事件会触发,这时清除`setInterval`以防止资源泄露。
阅读全文
相关推荐















