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 相关文章推荐
Web开发之JavaScript
Mar 29 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
js数组实现权重概率分配
Sep 12 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
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 str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
做网页的一些技巧
2007/02/01 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python中set常用操作汇总
2016/06/30 Python
python运行其他程序的实现方法
2017/07/14 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
预备党员承诺书
2014/03/25 职场文书
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫