javascript实现延时显示提示框特效代码


Posted in Javascript onApril 27, 2016

本文实例讲述了JavaScript使用setTimeout实现延迟弹出警告框的方法。分享给大家供大家参考。具体如下:

先给大家展示一个延迟/定时/强制弹出窗口的JS代码

参数解释:
设置时间:Then.setTime(Then.getTime() + 1*60*60*1000)

mylove/ttan.htm(过渡网页)
ttan.htm中的 http://弹出网页/ 是要弹出的网页

scroll:1(滚动条)
status:1(状态栏)
help:1(帮助按钮)
toolbar=1(工具栏)
resizable:1(是否可以用鼠标拖动改变大小)
dialogWidth:800px(宽度)
dialogHeight:600px(高度)
3000(延迟弹出的时间,单位:毫秒。1秒=1000毫秒)

<!--弹出广告-->
<script language="JavaScript">
function Get(){
var Then = new Date()
Then.setTime(Then.getTime() + 1*60*60*1000)
var cookieString = new String(document.cookie)
var cookieHeader = "Cookie1="
var beginPosition = cookieString.indexOf(cookieHeader)
if (beginPosition != -1){
} else
{ document.cookie = "Cookie1=POPWIN;expires="+ Then.toGMTString()
focusid=setTimeout("focus();window.showModelessDialog('ttan.htm','','scroll:0;status:0;help:0;resizable:0;d
ialogWidth:0px;dialogHeight:0px')",3000)
window.focus();
}
}Get();
</script>
<!--弹出结束-->
ttan.htm的内容:

<script language="javascript">
<!--
window.open("http://弹出网页/");
//-->
</script>
<script LANGUAGE="JavaScript">
<!--
setTimeout('window.close();', 0)
//-->
</script>

可以实现同一IP一定时间内只弹出一次,可以实现延迟弹出,可以实现强制弹出!!

下面的代码执行后点击按钮会延迟弹出一个警告框,主要演示了setTimeout的使用方法

<!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 相关文章推荐
js event事件的传递与冒泡处理
Dec 06 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 #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
You might like
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
javascript document.referrer 用法
2009/04/30 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
layui实现下拉框三级联动
2019/07/26 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
结构和类有什么异同
2012/07/16 面试题
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
国税会议欢迎词
2014/01/16 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
个人事迹材料范文
2014/12/29 职场文书
施工安全协议书
2016/03/22 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
Python进度条的使用
2021/05/17 Python
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL