定时器的应用（一）：延时提示框

最新推荐文章于 2022-12-31 16:24:24 发布

原创最新推荐文章于 2022-12-31 16:24:24 发布 · 577 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #setTimeout #延时提示框

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用JavaScript创建延时提示框，类似QQ头像悬停显示个人资料的效果。通过设置定时器和捕获鼠标事件，实现在鼠标移开后延迟消失的功能。详细讲解了HTML框架结构的搭建和JavaScript代码实现各个功能的步骤。

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

定时器的应用（一）：延时提示框

光看题目，大家可能不太理解什么是延时提示框，我来给大家举一个小例子：我们平时玩QQ时，当鼠标移动到QQ头像处就会出现一个介绍个人资料的小卡片，我们可以把鼠标移动到这张卡片上，当鼠标移动到QQ头像或是该卡片上时，卡片不会消失。当鼠标离开QQ头像和该卡片时，卡片消失。我们可以称这个卡片为“延时提示框”。其实这里就用到了我在上一个博客中提到的：开启定时器和关闭定时器。下面我来为大家简单介绍一下如何用JavaScript来写“延时提示框”。

（一）首先，我们用HTML来搭建一个小的框架结构：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>延时提示框</title>
<style>
div{float:left; margin-left:10px;}
#div1{width:100px; height:100px; background:red;}
#div2{width:300px; height:300px; background:gray;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

效果如下：

一开始状态，我们让灰色方框隐藏，所以在div2的样式中添加display:none; 即将#div2{width:200px; height:200px; background:gray;}改为：#div2{width:200px; height:200px; background:gray;display:none;}

（二）添加javascript语句：

首先，我们需要提取html中有用的信息：

window.onload=function()
{
	var oDiv1=document.getElementById("div1");
	var oDiv2=document.getElementById("div2");
	var timer=null;
}

接着，我们再一点一点的完善各个功能：

功能①：当鼠标移动到红色区域上时，会显示灰色区域。我们需要在oDiv1的onmouseover事件中改变oDiv2的display属性值；

oDiv1.onmouseover=function()
{
	oDiv2.style.display='block';
};

但是，在鼠标移开红色区域时，灰色区域马上消失，鼠标不能移到灰色区域。这时候我们自然而然的想到延时定时器。

功能②：在oDiv1的onmouseout事件中使用延时定时器，当鼠标移开红色区域时，灰色区域不会马上消失，而是在一段时间后消失。（这样我们就可以把鼠标移动灰色区域上）

var timer=null;
oDiv1.onmouseout=function()
{
	timer=setTimeout(function(){oDiv2.style.display='none';},500);
};

这次出现的问题是：虽然我们可以把鼠标移到灰色区域，但是在0.5s后灰色区域仍会消失（与QQ略微不同）。所以，我们自然而然的又想到要关闭延时定时器。

功能③：在oDiv2的onmouseover事件中关闭延时定时器，即：当我们把鼠标移动到灰色区域时，灰色区域永远都不会消失。

oDiv2.onmouseover=function()
{
	clearTimeout(timer);
};

但是，这次仍然存在小问题，当我们把鼠标移开灰色区域时，灰色区域也不会消失（与QQ略微不同）。所以，我们需要重新再次启用延时定时器。

功能④：在oDiv2的onmousout事件中再次启用延时定时器，即：当我们将鼠标移开灰色区域，灰色区域会自动消失。

oDiv2.onmouseout=function()
{
	timer=setTimeout(function(){oDiv2.style.display='none';},500);
};

这次，仍然存在一点点小的错误：功能④的延时定时器对功能①造成了影响，当我们把鼠标移动红色区域时，不会显现灰色区域，所以，我们需要重新修改一下功能①：在功能①中要关闭功能④的延时定时器。

oDiv1.onmouseover=function()
{
	clearTimeout(timer);
	oDiv2.style.display='block';
};

至此，我们就实现了“延时提示框”的全部功能。下面是该功能的全部代码，希望对大家有所帮助。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>延时提示框</title>
<style>
div{float:left; margin-left:10px;}
#div1{width:80px; height:80px; background:red;}
#div2{width:200px; height:200px; background:gray; display:none;}
</style>

<script>
window.onload=function()
{
	var oDiv1=document.getElementById("div1");
	var oDiv2=document.getElementById("div2");
	var timer=null;
	
	oDiv1.onmouseover=function()
	{
		clearTimeout(timer);
		oDiv2.style.display='block';
	};
	oDiv1.onmouseout=function()
	{
		timer=setTimeout(function(){oDiv2.style.display='none';},500);
	};
	oDiv2.onmouseover=function()
	{
		clearTimeout(timer);
	};
	oDiv2.onmouseout=function()
	{
		timer=setTimeout(function(){oDiv2.style.display='none';},500);
	};
	
	/*
	*简化处理：
	
	oDiv1.onmouseover=oDiv2.onmouseover=function()
	{
		clearTimeout(timer);
		oDiv2.style.display='block';
	};
	oDiv1.onmouseout=oDiv2.onmouseout=function()
	{
		timer=setTimeout(function(){oDiv2.style.display='none';},500);
	};
	
	*/
	
};
</script>

</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>