js定时器

最新推荐文章于 2021-06-15 16:59:53 发布

原创最新推荐文章于 2021-06-15 16:59:53 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #定时器

javascript 专栏收录该内容

8 篇文章

订阅专栏

自动化的网页总离不开定时器

JS中定时器，有两种：setTimeout( function , time ) 、setInterval( function , time )

区别：

setTimeout( function , time ) 用于延时执行

setInterval( function , time ) 用自动循环执行

这里延时执行不如自动循环执行常用

故不研究延时执行

setInterval( function , time )

使用时，我们可以 window.setTimeout 或 setTimeout

window.setTimeout 将 setTimeout 函数作为全局window对象的一个属性来引用

且需要有clearInterval( timer ) 停止定时器

简单使用：

制作一个钟表

需求：

每隔一秒获取当前时间，并在html中显示

html：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS定时器</title>
	<link href="style.css" type="text/css" rel="stylesheet" />
	<script src="javascript.js"></script>
</head>
<body>
	<input type="text" id="input" />
	<button id="btn" onclick="stop()">停止</button>
</body>
</html>

CSS：

省略

javascript：

//测试一下
//alert('js运行成功');

window.onload=function(){
	//获取DOM节点
	var input=document.getElementById('input');
	var btn=document.getElementById('btn');

	//设置定时器为循环定时器
	var timer=window.setInterval(clock,1000);    //定时器中引用外部的函数，不加括号
	//设置定时器要执行的函数
	function clock(){
		var d=new Date();
		var t=d.toLocaleTimeString();
		input.value=t;
	};

	//设置停止按钮的点击函数
	btn.onclick=function(){
		timer=window.clearInterval(timer);
	};
};

小实例：

做一个计时的秒表

/*
*要求：
* 1、获取DOM节点
* 2、点击开始按钮事件
* 1、显示定时器，每10毫秒的速度递增值
* 2、值的显示为秒 10毫秒除以 100 单位为秒
* 3、开始按钮变成停止按钮
* 4、重置按钮开始计时，不能点击
* 5、点击按钮判断是开始还是停止再执行相应操作
* 3、点击重置按钮事件
* 1、使值变为0
*/

效果如图：

html：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS定时器--秒表</title>
	<link href="style.css" type="text/css" rel="stylesheet" />
	<script src="javascript2.js"></script>
</head>
<body>
	<input type="text" id="input" />
	<button id="btn1" >开始</button>
	<button id="btn2" >重置</button>
</body>
</html>

CSS：

省略

javascript：

window.onload=function(){
	//获取DOM节点
	var input = document.getElementById('input');
	var btn1 = document.getElementById('btn1');
	var btn2 = document.getElementById('btn2');

	//默认数值
	var time=0;
	var timer;
	input.value=time;

	//trun按钮函数
	btn1.onclick=function trun(){
		if(btn1.innerText=="开始"){
			btn1.innerText = "停止 ";
			btn2.disabled = true;
			timer = window.setInterval(star,10);
		}else{
			
			btn1.innerText = "开始" ;
			btn2.disabled = false;
			timer = window.clearInterval(timer); //timer is not definded  if里设置的计时器变量在else里不能使用
		};
	};
	//定时器函数
	function star(){
		time++;
		input.value = time/100 ;
	};
	//reset按钮函数
	btn2.onclick=function(){
		time = 0;
		input.value=time;
	};
}