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 相关文章推荐
jQuery 使用手册(六)
Sep 23 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
vue项目出现页面空白的解决方案
Oct 31 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
收音机的保养
2021/03/01 无线电
php你的验证码安全码?
2007/01/02 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
Python进程间通信用法实例
2015/06/04 Python
Mac 上切换Python多版本
2017/06/17 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
英文慰问信范文
2015/03/24 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python