JS延时器提示框的应用实例代码解析


Posted in Javascript onApril 27, 2016

废话不多说了,直接给大家贴代码了,具体代码如下所示:

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

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

Javascript 相关文章推荐
Jquery之美中不足小结
Feb 16 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 #Javascript
requireJS使用指南
Apr 27 #Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 #Javascript
浏览器兼容的JS写法总结
Apr 27 #Javascript
Vue.js基础知识汇总
Apr 27 #Javascript
JS onkeypress兼容性写法详解
Apr 27 #Javascript
使用vue.js开发时一些注意事项
Apr 27 #Javascript
You might like
PHP之变量、常量学习笔记
2008/03/27 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
node.js require() 源码解读
2015/12/13 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
在python中的socket模块使用代理实例
2014/05/29 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
python实现字符串和数字拼接
2020/03/02 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
小学语文教学经验交流材料
2014/06/02 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
初中学生操行评语
2014/12/26 职场文书
投资意向协议书
2015/01/29 职场文书
刘公岛导游词
2015/02/05 职场文书
党支部工作总结2015
2015/04/01 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
JavaScript实现简单的音乐播放器
2022/08/14 Javascript