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刷新窗口方法小结
Oct 21 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
javascript this指向相关问题及改变方法
Nov 19 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
PHP 开发工具
2006/12/06 PHP
实用函数2
2007/11/08 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
php实现中文转数字
2016/02/18 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
浅谈javascript的原型继承
2012/07/25 Javascript
JS跨域总结
2012/08/30 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
Angular路由简单学习
2016/12/26 Javascript
express express-session的使用小结
2018/12/12 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
Python存取XML的常见方法实例分析
2017/03/21 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
Python绘制动态水球图过程详解
2020/06/03 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
新浪网技术部笔试题
2016/08/26 面试题
数控技术专科生自我评价
2014/01/08 职场文书
软件项目开发计划书
2014/05/01 职场文书
学校教师安全责任书
2014/07/23 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
捐款通知怎么写
2015/04/24 职场文书
新人入职感言
2015/07/31 职场文书
高一军训感想
2015/08/07 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js