<!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>

延时提示框编写时需要注意的点都记录在注释当中，逐个对照注意一下，这个功能看过视频教程之后实现起来比较顺畅，原因是在编写代码之前对所需功能做了一个列表按照列表一一实现，出现问题再进行相应的调整比上来直接写代码强多了。

JS学习笔记 -- 定时器，提示框的应用的更多相关文章

  1. 【转】IOS学习笔记29—提示框第三方库之MBProgressHUD

    原文网址:http://blog.csdn.net/ryantang03/article/details/7877120 MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单 ...

  2. JS学习笔记 - 透明度运动框

    该练习的笔记如下: 1.  var cur=0;  //先声明一个变量. 2.  parseInt会舍掉小数,而opacity值恰恰是小数,所以对于opacity,必须用parseFloat. cur ...

  3. 一点感悟：《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

  4. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  6. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  7. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  8. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  9. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

随机推荐

  1. [MEAN Stack] First API -- 3. Select by ID with Mongoose and Express

    Mongoose allows you to easily select resources by ID from your MongoDB. This is an important aspect ...

  2. sql server常用知识点

    --删除表 use [20130823_Recource] go drop table my_table1,my_table2,My_table3 --创建表 use [20130823_Recour ...

  3. Python高级编程–正则表达式（习题）

    原文:http://start2join.me/python-regex-answer-20141030/ ############################################## ...

  4. Linux服务器集群系统(三)--转

    引用地址:http://www.linuxvirtualserver.org/zh/lvs3.html LVS集群中的IP负载均衡技术 章文嵩(wensong@linux-vs.org) 2002 年 ...

  5. LeetCode50 Pow(x, n)

    题目: Implement pow(x, n). (Medium) 分析: 实现库函数求幂运算,遍历一遍是超时的,用快速幂,就是分治的思想,每次把n去掉一半. 注意:n的取值范围,n = MIN_IN ...

  6. Html方式导出word 页头和页脚设置

    <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:o ...

  7. [设计模式] .NET设计模式笔记 - 了解设计模式

    今天在TerryLee的cnblog(http://terrylee.cnblogs.com)里看到了与设计模式相关的整套文章,初学设计模式看完每篇文章后做些笔记和摘抄. ●什么是设计模式,什么是架构 ...

  8. [Adruino]XBEE 无线数据传输实际操作

    双轮小车制作实例代码 引用:http://hi.baidu.com/dlfla84/item/52b89017a6209c5cf1090e9b 双轮小车制作 2009-6-12 初步完成了串口数据缓存 ...

  9. ASP.NET通过byte正确安全的判断上传文件格式

    本文介绍一种更安全的方式上传图片,他能有效的防止一些通过修改文件后缀或MIME来伪造的图片的上传,从而保证服务器的安全,希望对大家有所帮助. ASP.NET中在判断文件格式时,我们以前常用的方法就是通 ...

  10. axure rp pro 6.5 注册码

    发现一可用的注册码: Name:BEAN Serial:MZlb4FJwOVw+j04A4pX8S5genhcCOo1adsaH/ZHOukDY7OyPJcCKUHlwUEfU0Osr (已验证可用) ...