定时器及延时器 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="btn1" id="btn1" value="启动按钮" />
		<input type="button" name="" id="btn2" value="停止按钮" />
		<div id="div1">
			
		</div>
		<script>
//			延时器
			function delay1(){alert("你好")}
			setTimeout(delay1,5000);

//		定时器1在文档中写入
			var body=document.body;
			function interval1(){i++;body.innerHTML=i;}
			var i =0;
			setInterval(interval1,1000);
//		定时器2
			var div1=document.getElementById("div1");
			function interval2(){i++;div1.innerHTML=i;}
			var i =0;
			setInterval(interval2,1000);	


//			定时器停止
			var div1=document.getElementById("div1");
			function interval3(){i++;div1.innerHTML=i;}
//			回调函数:在setIntervel函数中该函数反复使用
			var i =0;
			var timer3=setInterval(interval3,1000);
//			给一个点击停止按钮
			var btn1=document.getElementById("btn2");
//			给按钮添加点击停止动作
			btn2.onclick=function(){clearInterval(timer3);}
		
			
		</script>
	</body>
</html>

　　定时器销毁

                <input type="button" name="btn1" id="btn1" value="启动按钮" />
		<input type="button" name="" id="btn2" value="停止按钮" />
		<div id="div1">
		<script>
//			定时器再次点击重新开始
			var div1=document.getElementById("div1");							
//			给一个点击停止按钮
			var btn1=document.getElementById("btn1");
//			给按钮添加点击停止动作
			var timer=null;
			btn1.onclick=function(){
				var i =0;
//				在事件中添加销毁定时器的按钮
				clearInterval(timer);
				timer=setInterval(function()        {i++;div1.innerHTML=i;},1000);
			}
			
		</script>

　　

posted on 2017-12-30 08:47  水墨江山画  阅读(259)  评论(0)  编辑  收藏  举报

导航