JavaScript——定时器

一次性定时器:

  • 当页面出现图片3S后自动消失,3S内点击取消按钮可销毁定时器,使图片一直显示。
<body>
	<div id="div">
		<img src="img.png" />
	</div>
	<button onclick="test()">取消</button>
</body>
<script>
	//一次性定时器
	var oDiv =document.getElementById('div');
	var timer=setTimeout(function(){
		oDiv.style.display='none';//在图片出现3S后消失
	},3000)
	function test()
	{
		clearTimeout(timer);//取消定时效果
	}
</script>

周期性定时器:

  • 鼠标移入时开始计时,鼠标移开后停止计时。
<body>
	<div id="div"style="width: 100%;height: 300px;font-size: 50px;
		text-align: center;background-color: pink;"></div>
</body>
<script>
	var oDiv = document.getElementById('div');
	var timer = null;//定时器 (全局变量)
	var i=0;//计数器   (全局变量)
	oDiv.onmouseover = function()//鼠标移入开始计时
	{
		timer=setInterval(function(){//周期性定时器
			i++;
			oDiv.innerHTML= i;
		},1000)
	}
	oDiv.onmouseout = function()//鼠标移开取消(暂停)计时器,但不能完全销毁,因为他是周期性的
	{
		clearInterval(timer);
	}
</script>

你可能感兴趣的:(javascript)