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 相关文章推荐
javascript document.images实例
May 27 Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
electron踩坑之dialog中的callback解决
Oct 06 Javascript
js实现碰撞检测
Jan 29 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
python实现简单的TCP代理服务器
2014/10/08 Python
python实现备份目录的方法
2015/08/03 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
应用数学自荐书范文
2013/11/24 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
不同意离婚上诉状
2015/05/23 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
大学学生会竞选稿
2015/11/19 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang