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

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

辛篱

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

阅读量534

点赞数

分类专栏： JavaScript 文章标签： javascript setTimeout 延时提示框

本文链接：https://blog.csdn.net/honey_1234567890/article/details/50621073

版权

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

摘要由CSDN通过智能技术生成

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

光看题目，大家可能不太理解什么是延时提示框，我来给大家举一个小例子：我们平时玩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>

效果如下：