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 相关文章推荐
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
javascript的理解及经典案例分析
May 20 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 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
PHPMailer安装方法及简单实例
2008/11/25 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
python strip()函数 介绍
2013/05/24 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
python实现计算器功能
2019/10/31 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
python3 字符串知识点学习笔记
2020/02/08 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
美国电视购物:QVC
2017/02/06 全球购物
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
工作中的自我评价如何写好
2013/10/28 职场文书
应届生服务员求职信
2013/10/31 职场文书
物业管理个人自我评价
2013/11/08 职场文书
如何写你的创业计划书
2014/01/07 职场文书
责任心演讲稿
2014/05/14 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
学籍证明模板
2015/06/18 职场文书
MySQL分库分表详情
2021/09/25 MySQL
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis