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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
JS实现网页端猜数字小游戏
Mar 06 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
缅甸的咖啡简史
2021/03/04 咖啡文化
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Django自定义认证方式用法示例
2017/06/23 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
销售人员自我评价怎么写
2013/09/19 职场文书
追悼会子女答谢词
2014/01/28 职场文书
学生请假条格式
2014/04/11 职场文书
死亡赔偿协议书
2015/01/28 职场文书
六五普法学习心得体会
2016/01/21 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
Ruby处理YAML和json数据
2022/04/18 Ruby
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers