js定时器

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

「已注销」

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

阅读量265

点赞数

分类专栏： javascript 文章标签： javascript 定时器

本文链接：https://blog.csdn.net/kingAn123/article/details/79420114

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

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" οnclick="stop()">停止</button>
</body>
</html>

CSS：

省略

javascript：

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

window.οnlοad=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.οnclick=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.οnlοad=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.οnclick=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.οnclick=function(){
		time = 0;
		input.value=time;
	};
}

总结与注意事项：

1、 setInterval( 定时器函数，毫秒 )

定时器函数不加括号

2、clearInterval( 定时器变量 )

注意设置定时器时的变量，能被清除时获取到

如 if else 在if中声明的定时器变量，在else中无法获取到，导致不能清除定时器。

如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js定时器

自动化的网页总离不开定时器JS中定时器，有两种：setTimeout( function , time ) 、setInterval( function , time )区别： setTimeout( function , time ) 用于延时执行 setInterval( function , time ) 用自动循环执行这里延时执行不如自动循环执行常用故不研究延时执行setIn...
复制链接

扫一扫