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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 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/11/13 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
php实现购物车功能(下)
2016/01/05 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
vue小白入门教程
2018/04/02 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
python解析html开发库pyquery使用方法
2014/02/07 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
python 如何对logging日志封装
2020/12/02 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
单位委托书范本
2014/04/04 职场文书
教师考核材料
2014/05/21 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
个人收入证明格式
2015/06/24 职场文书
学生会自荐信
2019/05/16 职场文书