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的inArray 方法介绍
Oct 08 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
js保留两位小数方法总结
Jan 31 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 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弹出对话框实现重定向代码
2014/01/23 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
Python解决鸡兔同笼问题的方法
2014/12/20 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Python Series从0开始索引的方法
2018/11/06 Python
python实现websocket的客户端压力测试
2019/06/25 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python