<!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. TP函数

    U方法用于完成对URL地址的组装,特点在于可以自动根据当前的URL模式和设置生成对应的URL地址,格式为:U('地址','参数','伪静态','是否跳转','显示域名');在模板中使用U方法而不是固定 ...

  2. c++笔试题两道，求解当中一道

    1.Implement a functionthat prints the numbers from 1 to 100.But for multiples of three(3) print &quo ...

  3. smartPtr指针的实现

    编写一个智能指针类.智能指针是一种数据类型,一般用模板实现,模拟指针行为的同时还提供自动来及回收机制.它会自动记录SmartPointer<T*>对象的引用计数,一旦T类型对象的引用计数为 ...

  4. 终端I/O之行控制函数

    下列4个函数提供了终端设备的行控制能力.其中,filedes引用一个终端设备,否则出错返回,errno设置为ENOTTY. #include <termios.h> int tcdrain ...

  5. SVM多分类

    http://www.matlabsky.com/thread-9471-1-1.htmlSVM算法最初是为二值分类问题设计的,当处理多类问题时,就需要构造合适的多类分类器.目前,构造SVM多类分类器 ...

  6. SecureCRT 滚动条设置

    不久前在Debian下使用kermit时发现kermit有一些优点,比如当串口上不断有信息打印时,仍然可以通过拖动滚动条来查看以前打印的信息,并且滚动条不会滚动到最下面.当按下回车键时,滚动条会自动滚 ...

  7. 如何制作gif动画，丰富自己的博客？

    不久前在博客园上看到有个哥们发表了一篇博客,其中使用了大量的动态的gif动画,感觉这种方法对于丰富博客内容非常有帮助,然后在网上搜索了一些关于制作gif动画的资料.我的方法不一定好,在这里仅作为抛砖引 ...

  8. 汇编中 .fill 的作用

    .fill     语法:.fill repeat, size, value    含义是反复拷贝 size个字节,重复 repeat 次,        其中 size 和 value 是可选的,默 ...

  9. ubuntu 设置IP,设置网关

    1. 检验是否可以连通,就使用ping命令ping 网关 开始的时候总是现实unreachable 2. 设置IP sudo ifconfig eth0 133.133.133.190 netmask ...

  10. Python操作MySQL之SQLAlchemy

      SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作,简言之便是:将对象转换成SQL,然后使用数据API执行SQL并获取执行结 ...