<!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. 离线安装Android开发环境的方法

    对于大家从官网上下载下来的SDK其实是一个安装工具,里面啥都没有,如果在线安装的话会需要很长时间.我们同样可以从网络上用下载工具将所需要安装的东西下载下来,(同样有劳大家自己动手找找了)然后直接放入相 ...

  2. js的加载方式

    同步加载即<script>标签 异步加载即 动态插入<script>标签,动态修改<script>的src属性. Ajax加载.

  3. Fork/Join框架之双端队列

    简介 ForkJoinPool管理着ForkJoinWorkerThread线程,ForkJoinWorkerThread线程内部有一个双端队列,这个双端队列主要由一个数组queue.数组下标queu ...

  4. js正則表達式语法

    1. 正則表達式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之同样的 ...

  5. html+css 知识整理

    1.学网页最好的方法:学习别人的网页. 2.文档结构 <html>(超文本标记语言) <head>  <title>     </title>    & ...

  6. shell 学习笔记

    <Linux命令行与shell脚本编程大全>笔记   wkss 其他:http://www.cnblogs.com/pengdonglin137/p/3528303.html 一.基本命令 ...

  7. Linux 混杂设备、外部中断和输入子系统

    混杂设备也是一种字符设备,主设备号固定为10.相对于普通字符设备驱动,它不需要自己去生成设备文件. 1.声明使用的头文件 #include <linux/miscdevice.h> 2.定 ...

  8. 类型推导：函数模板与auto

    1.从函数模板谈起 函数模板的类型推导机制是在c++98时代就有的,auto的类型推导机制与其基本一致,所以先理解函数模板类型推导. 函数模板可以用如下代码框架表示: #template<typ ...

  9. C小加 之 随机数

    描述ACM队的“C小加”同学想在学校中请一些同学一起做一项问卷调查,为了实验的客观性,他先用计算机生成了N个1到1000之间的随机整数(0<N≤100),对于其中重复的数字,只保留一个,把其余相 ...

  10. iOS - UI - UISwitch

    UISwitch //开关    不用设置宽高  有默认宽高 UISwitch * sw = [[UISwitch alloc] initWithFrame:CGRectMake(100, 100,  ...