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改变disabled的boolean状态的三种方法
Dec 13 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
vue循环数组改变点击文字的颜色
Oct 14 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 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简洁函数小结
2011/08/12 PHP
zend framework重定向方法小结
2016/05/28 PHP
Yii核心验证器api详解
2016/11/23 PHP
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
Python内置数据类型详解
2014/08/18 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python中的getopt函数使用详解
2015/07/28 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
Python3多线程操作简单示例
2018/05/22 Python
python实现归并排序算法
2018/11/22 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
extern是什么意思
2016/03/10 面试题
作文评语集锦大全
2014/04/23 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
学习心得体会
2019/06/20 职场文书