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实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
Vue实现小购物车功能
Dec 21 Vue.js
基于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
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
深入分析js中的constructor和prototype
2012/04/07 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
python实现图片压缩代码实例
2019/08/12 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
css sprite简单实例
2016/05/23 HTML / CSS
美国网上订购鲜花:FTD
2016/09/23 全球购物
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
nohup的用法
2012/11/26 面试题
灵泰克Java笔试题
2016/01/09 面试题
怎样客观的做好自我评价
2013/12/28 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
分析Python list操作为什么会错误
2021/11/17 Python
详解Python flask的前后端交互
2022/03/31 Python