定时器setInterval()和setTimeout()在做延时提示框中的作用

最新推荐文章于 2024-10-14 15:28:14 发布

原创最新推荐文章于 2024-10-14 15:28:14 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

Javascript 同时被 3 个专栏收录

19 篇文章

订阅专栏

HTML5

6 篇文章

订阅专栏

CSS3

4 篇文章

订阅专栏

本文深入解析JavaScript中的定时器setInterval()和setTimeout()的功能与用法，通过实例展示如何实现延时提示框效果，同时介绍定时器的关闭方法，是前端开发者不可错过的实用指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript中定时器setInterval()和setTimeout()在做延时提示框中的作用

setInterval() 间隔型，需要手动关闭计时器
setTimeot() 延时型，到时间点自动停止
关闭： clearInterval()
关闭： calerTimeout()

例子：第一栏编写简单的CSS3样式便于举例说明

<style>
	div{
		float:left;
		margin:10px;
	}
	#div1{
		width:50px;
		height:50px;
	    background-color:red;
	    border-radius:50%;
    }
    #div2{
    	width:220px;
    	height:150px;
    	background-color:#ccc;
    	display:none;
    }
</style>

<div id="div1">

</div>
<div id="div2">
	请填写您的信息......
</div>

<script type="text/javascript">
 	window.onload=function(){
	var oDiv1= docuument.getElementById('div1');
	var oDiv2= docuument.getElementById('div2');
	var timer=null;
	oDiv1.onmouseover=function(){
			 clearTimeout(timer);
			 oDiv2.style.display='block';
	}
	oDiv1.onmouseout=function(){
		   	 timer= selTimeout(function(){oDiv2.style.display='none';},500)
	}
	oDiv2.onmouseover=function(){
			 clearTimeout(timer);
	}
	oDiv2.onmouseout=function()
			 timer= selTimeout(function(){oDiv2.style.dispaly='none';},500) ;
	}
}
</script>