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生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
JavaScript中的比较操作符&gt;、=、
Dec 31 Javascript
JS重载实现方法分析
Dec 16 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
javascript运行机制之执行顺序理解
Aug 03 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
php遍历目录viewDir函数
2009/12/15 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
如何在django中运行scrapy框架
2020/04/22 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
详解python中的lambda与sorted函数
2020/09/04 Python
介绍一下Java中的Class类
2015/04/10 面试题
《在家里》教后反思
2014/03/01 职场文书
安全标语口号
2014/06/09 职场文书
爱护草坪标语
2014/06/24 职场文书
大学生找工作求职信
2014/07/09 职场文书
环卫工人节活动总结
2014/08/29 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android