JS(定时器)

最新推荐文章于 2024-08-20 19:21:56 发布

小梦新靓

最新推荐文章于 2024-08-20 19:21:56 发布

阅读量272

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_43712187/article/details/90578751

版权

JS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

定时器
----setTimeout（函数名/直接把函数写在这里，时间）隔断事件再执行只执行一次 clearTimeout（前面的返回值）清除该定时器
----setInterval（函数名/直接把函数写在这里，时间）每隔一段时间执行一次 clearInterval（前面的返回值）清除该定时器
小案例
html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/time.css" />
		<script src="js/time.js"></script>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
</html>

window.onload=function()
{
   var Div1=document.getElementById("div1");
   var Div2=document.getElementById("div2");
   var time;
   Div2.onmouseover=Div1.onmouseover=function()
   {
   		clearTimeout(time);
   	  Div2.style.display="block";
   }
   Div2.onmouseout=Div1.onmouseout=function()
   {
    time=setTimeout(function(){
    	Div2.style.display="none"},500);
   }
//	Div2.onmouseover=function(){
//		clearTimeout(time);
//		Div2.style.display="block";
//	}
//	Div2.onmouseout=function()
//	{
//	time=setTimeout(function(){
//	 	Div2.style.display="none"},500);
//	}
}

css

*{
   padding: 0px;
   margin: 0px;
}
div{
   margin: 10px;
}
#div1{
   width: 40px;
   height: 50px;
   background:skyblue;
   float:left;
}
#div2{
   width: 40px;
   height: 100px;
   background: palegreen;
   float:left;
   display: none;
}