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 相关文章推荐
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
微信小程序实现锚点跳转
Nov 23 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中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
零基础写python爬虫之神器正则表达式
2014/11/06 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
美国牛仔品牌:True Religion
2018/11/16 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
信息管理员岗位职责
2013/12/01 职场文书
企业法人代表任命书
2014/06/06 职场文书
国贸专业求职信
2014/06/28 职场文书
运动会演讲稿300字
2014/08/25 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
九年级化学教学反思
2016/02/22 职场文书
调研报告的主要写法
2019/04/18 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
SpringBoot详解执行过程
2022/07/15 Java/Android