setInterval()函数实现前端定时器

setInterval是一个实现定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval方法会不停地调用函数,直到 clearInterval被调用或窗口被关闭。
由setInterval返回的ID值可用作clearInterval方法的参数。
一个简单的例子:

var times = 0;
var showTime = null;
//计时器
setInterval(function() {
	times++;
	showTime = "时间  ";
	if(times >= 60) {
		// 大于60秒转换为 xx:xx 格式,如:01:11
		if(Math.floor(times / 60) < 10) {
			showTime = showTime + "0" + Math.floor(times / 60) + ":";
		} else {
			showTime = showTime + Math.floor(times / 60) + ":";
		}
	}
	// 小于十分钟则在分钟前面补0,如:01:00
	if(times % 60 < 10) {
		showTime = showTime + "0" + times % 60;
	} else {
		showTime = showTime + times % 60;
	}
	// time为id,将时间显示在id为time的标签属性内即可
	time.innerHTML = showTime;
}, 1000);

1000为周期每隔1000毫秒也就是1秒就执行该方法一次
在body中可以如下:

<span id="time">0</span>

这样就可以在前端页面实现一个简单的定时器了。

猜你喜欢

转载自blog.csdn.net/qq_37253891/article/details/85272546