JS延时器提示框的应用实例代码解析
作者:Web学海无涯 发布时间:2024-05-10 14:00:28
标签:js,延时器,提示框
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延时显示提示框</title>
<style>
#div1 {
float: left;
width: 60px;
height: 60px;
background-color: aqua;
}
#div2 {
position: relative;
float: left;
margin: 0 10px;
width: 200px;
height: 200px;
background-color: #cccccc;
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'; //鼠标移入div1时显示div2
// };
//
// oDiv1.onmouseout = function () {
// timer = setTimeout(function () {
// oDiv2.style.display = 'none'; //鼠标移除div1时隐藏div2
// }, 500); //为了从div1移入div2,所以移出div1时div2隐藏应该有一个延时设置
// };
//
// oDiv2.onmouseover = function () {
// clearTimeout(timer); //清除延时器设置,当鼠标移入div2时,div2应当显示
// };
//
// oDiv2.onmouseout = function () {
// timer = setTimeout(function () {
// oDiv2.style.display = 'none'; //当鼠标移出div2时,div2应当隐藏
// }, 500); //当鼠标移出div2并移入div1时,div2会闪烁一下再显示,设置一个延时,清除闪烁的效果;
// // 但是设置延时器之后,鼠标移入div1时,div2却隐藏了,原因是setTimeout,
// // 应当清除延时器,在oDiv1.onmouseover事件中添加,清除延时器的代码
// };
// 由于这四个事件中代码两两对应地相同或相似,可以做如下简化处理:
oDiv1.onmouseover = oDiv2.onmouseover = function () {
clearTimeout(timer);
oDiv2.style.display = 'block';
/* 鼠标移入div1时显示div2,虽然oDiv2.onmouseover事件中没有写oDiv2.style.display = 'block';
但是实际上oDiv2是'block'状态,多写一句代码没有实质性影响*/
};
oDiv1.onmouseout = oDiv2.onmouseout = function () {
timer = setTimeout(function () {
oDiv2.style.display = 'none'; //鼠标移除div1时隐藏div2
}, 500); //为了从div1移入div2,所以移出div1时div2隐藏应该有一个延时设置
};
// 简化后的代码执行结果跟前面的代码效果完全一致.
}
</script>
</head>
<body>
<h2>延时提示框</h2>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
延时提示框编写时需要注意的点都记录在注释当中,逐个对照注意一下,这个功能看过视频教程之后实现起来比较顺畅,原因是在编写代码之前对所需功能做了一个列表按照列表一一实现,出现问题再进行相应的调整比上来直接写代码强多了。


猜你喜欢
- 一、性能度量性能度量目的是对学习期的泛华能力进行评估,性能度量反映了任务需求,在对比不同算法的泛华能力时,使用不同的性能度量往往会导致不同的
- Django View官方文档一个视图函数(类),简称视图,是一个简单的 Python 函数(类),它接受Web请求并且返回Web响应。响应
- 在Oracle 8i版本之前,使用internal用户来执行数据库的启动和关闭以及create database等操作;从8i版本以后,Or
- Function closeUBB(strContent) '*************************
- 使用python去除文中的某个字符是非常麻烦的一件事,不同的环境可以用到多种方法,例如正则表达式,del语法,现在发布的是一个比较简单易行的
- MySQL有多种存储引擎:MyISAM、InnoDB、MERGE、MEMORY(HEAP)、BDB(BerkeleyDB)、EXAMPLE、
- 前言在迷宫问题中,给定入口和出口,要求找到路径。本文将讨论三种求解方法,递归求解、回溯求解和队列求解。在介绍具体算法之前,先考虑将迷宫数字化
- 一、背景起源于一个问题:怎样找到字符串中出现次数最多的字符其实使用max函数就能很轻松的解决这个问题:代码:str1 = "AAA
- xlabel(‘time',‘FontSize',12);如果没有设置位置,默认是在中间在xlabel中也有position
- 今天要用python做一个小功能,那就是实现万年历的查询。首先看一下整体感觉实现代码:def is_leap_year(year): &nb
- 准备工作创建表use [test1]gocreate table [dbo].[student]( [id] [int] ide
- Oracle基本PLSQL的使用实例详解PL/SQL 块是在 SQL 语言之上发展起来的一种应用,可以集中的处理各种复杂的 SQL 操 作。
- 前言:为了帮助广大考生和家长了解高考历年的录取情况,很多网站都汇总了各省市的录取控制分数线,为广大考生填报志愿提供参考。因受多种因素影响,每
- httplib 是 python中http 协议的客户端实现,可以使用该模块来与 HTTP 服务器进行交互。httplib的内容不是很多,也
- 本文从简单的例子入手,从打包文件去分析以下三个问题:webpack打包文件是怎样的?如何做到兼容各大模块化方案的?webpack3带来的新特
- 本文实例讲述了Python实现matplotlib显示中文的方法。分享给大家供大家参考,具体如下:【注意】可能与本文主题无关,不过我还是想指
- 一、实现原理其实实现原理很简单,我们的pptx文件其实是一个压缩包。我们可以直接修改pptx文件的后缀,改成zip然后解压,比如下面这个:这
- 引言微信小程序为了优化用户体验,取消了在进入小程序时立马出现授权窗口。需要用户主动点击按钮,触发授权窗口。那么,在我实践过程中,出现了以下问
- --销售冠军 --问题:在公司中,老板走进来,要一张每个地区销量前3名的销售额与销售员的报表 --- create table salesd
- 1. 图片加载、灰度图、 显示和保存from PIL import Imageimg = Image.open('01.jpg