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 相关文章推荐
javascript qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
js版本A*寻路算法
2006/12/22 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
python在不同层级目录import模块的方法
2016/01/31 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
汇科协同Java笔试题
2012/03/31 面试题
自我鉴定四大框架
2014/01/17 职场文书
保险公司开门红口号
2014/06/21 职场文书
机械专业求职信范文
2014/07/15 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers
GO中sync包自由控制并发示例详解
2022/08/05 Golang