JavaScript实现自动弹出窗口并自动关闭窗口的方法


Posted in Javascript onAugust 06, 2015

本文实例讲述了JavaScript实现自动弹出窗口并自动关闭窗口的方法。分享给大家供大家参考。具体如下:

这里介绍的JavaScript自动弹出窗口并自动关闭窗口,JS实现此特效似乎很简单,打开网页后即显示一个弹出窗口,之后会自动离开,使用了window.open和document.open();以及document.close();对象共同来实现,现在似乎用的不多了。

运行效果如下图所示:

JavaScript实现自动弹出窗口并自动关闭窗口的方法

具体代码如下:

<HTML>
<HEAD>
<TITLE>自动离开的窗口</TITLE>
<SCRIPT>
<!--
var flyingwin
var popupwidth=200
var popupheight=150
var marginright
var windowcenter
var i_top=200
var i_left=-popupwidth-50
var step=40
var timer
var waitingtime=5000
var pause=20
function showWindow() {
 flyingwin = window.open("", "flyingwin", "toolbar=no,width="+popupwidth+",height="+popupheight+",top=100,left="+(-popupwidth)+"");
 flyingwin.document.open();
 flyingwin.document.write("<html><title>自动离开的窗口</title><body><p align=center>请不要关闭,马上就离开:(</body></html>");
 flyingwin.document.close();
 if (document.all) {
  marginright = screen.width+50
 }
 if (document.layers) {
  marginright = screen.width+50
 }
 windowcenter=Math.floor(marginright/2)-Math.floor(popupwidth/2)
 movewindow()
}
function movewindow() {
  if (i_left<=windowcenter) {
   flyingwin.moveTo(i_left,i_top)
   i_left+=step
   timer= setTimeout("movewindow()",pause)
  }
  else {
   clearTimeout(timer)
   timer= setTimeout("movewindow2()",waitingtime)
  }
}
function movewindow2() {
  if (i_left<=marginright) {
   flyingwin.moveTo(i_left,i_top)
   i_left+=step
   timer= setTimeout("movewindow2()",pause)
  }
  else {
   clearTimeout(timer)
   flyingwin.close()
  }
}
// -->
</SCRIPT>
</HEAD>
<BODY onload=showWindow()> </BODY>
</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
JS中表单的使用小结
Jan 11 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
JS+CSS实现动态时钟
Feb 19 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 #Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 #Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 #Javascript
js实现简单秒表走动的时钟特效
Mar 25 #Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 #Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 #Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 #Javascript
You might like
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
YII路径的用法总结
2014/07/09 PHP
PHP递归创建多级目录
2015/11/05 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
JavaScript 指导方针
2007/04/05 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
python复制文件的方法实例详解
2015/05/22 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
灵泰克Java笔试题
2016/01/09 面试题
中国入世承诺
2014/04/01 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
走群众路线剖析材料
2014/10/09 职场文书
走进毛泽东观后感
2015/06/04 职场文书
七一活动主持词
2015/06/29 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书