JavaScript——定时器

最新推荐文章于 2022-09-21 10:19:59 发布

Regina_Wan

最新推荐文章于 2022-09-21 10:19:59 发布

阅读量237

点赞数

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

本文链接：https://blog.csdn.net/Yun_Ge/article/details/89068990

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一次性定时器：

当页面出现图片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>