<!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. mysqldump 安全 --skip-add-drop-table

    [root@localhost data]# mysqldump -uroot --master-data=2  -p  --single-transaction --skip-add-drop-ta ...

  2. Docker学习笔记2

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  3. 对shell中的与（&&）和或（||）的理解

    先说明一下: 如果第一个命令执行成功,与操作符 (&&)才会执行第二个命令 如果第一个命令执行失败,或操作符 (||)才会执行第二个命令 可以分析一下下面的命令的输出: #!/bin/ ...

  4. Java去除掉HTML里面所有标签的两种方法——开源jar包和自己写正则表达式

    Java去除掉HTML里面所有标签,主要就两种,要么用开源的jar处理,要么就自己写正则表达式.自己写的话,可能处理不全一些自定义的标签.企业应用基本都是能找开源就找开源,实在不行才自己写…… 1,开 ...

  5. 手机端的tab切换，响应式切换效果

    之前写过这些tab切换的效果,无论网页上还是手机端,网上也有很多的例子,这个好像是我参考网上,也不知道是哪里的了.总结了一下,就当保存下来了把. <!DOCTYPE html > < ...

  6. NSNotificationCenter 使用姿势详解

    来源:JamesYu 链接:http://www.jianshu.com/p/a4d519e4e0d5 最近在做平板的过程中,发现了一些很不规范的代码.偶然修复支付bug的时候,看到其他项目代码,使用 ...

  7. 【源码】初探C#爬虫，持续更新中。。。

       最近看到园子里有人用python做的爬虫软件并且上传的源码,苦于不懂python,便想着用C#也实现一个简易的爬虫软件.于是昨晚花了一个多小时的时间实现了一个简单的爬虫软件,功能十分简单,但是觉 ...

  8. Dividing 多重背包 倍增DP

    Dividing 给出n个物品的价值和数量,问是否能够平分.

  9. WPF/Silverlight Layout 系统概述——Arrange（转）

    Arrange过程概述 普通基类属性对Arrange过程的影响 我们知道Measure过程是在确定DesiredSize的大小,以便Arrange过程参考这个DesiredSize,确定给MyPane ...

  10. 使用solr的函数查询,并获取tf*idf值

    1. 使用函数df(field,keyword) 和idf(field,keyword). http://118.85.207.11:11100/solr/mobile/select?q={!func ...