求一段js代码打开页面div5秒弹出，点击关闭按钮后再次定时弹出
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求一段js代码打开页面div5秒弹出，点击关闭按钮后再次定时弹出相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>定时弹窗</title>
<style type="text/css">
html,body
width:100%;
height:100%;
margin:0;
padding:0;
.box
width:100%;
.tc-box
width:25%;
margin:80px auto;
border:1px solid #f00;
text-align: center;
line-height: 150px;
</style>
</head>
<body>
<div class="box">
<div class="tc-box" id="tc">
<div class="tc-cont">我是弹窗内容</div>
<button id="btn">点击关闭</button>
</div>
</div>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function()
var tc = document.getElementById('tc');
tc.style.display = 'none';
function xs()
var tc = document.getElementById('tc');
tc.style.display = 'block';
console.log('aaaaaaa');
var lia = window.setInterval(xs,5000);
</script>
</body>
</html>
点击关闭之后5秒就会自动弹出
上面的代码有点不太合理，下面代码优化了一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>定时弹窗</title>
<style type="text/css">
html,body
width:100%;
height:100%;
margin:0;
padding:0;
.box
width:100%;
.tc-box
width:35%;
margin:80px auto;
border:1px solid #f00;
text-align: center;
line-height: 150px;
</style>
</head>
<body>
<div class="box">
<div class="tc-box" id="tc">
<div class="tc-cont">我是弹窗内容</div>
<button id="btn">点击关闭5秒后继续弹出</button>
<button id="btn1">点击关闭，不再弹窗</button>
</div>
</div>
<script type="text/javascript">
var btn = document.getElementById('btn');
function xs()
var tc = document.getElementById('tc');
tc.style.display = 'block';
tc.classList.remove('on');
console.log('aaaaaaa');
btn.onclick = function()
var tc = document.getElementById('tc');
tc.style.display = 'none';
var lia = window.setInterval('xs()',5000);
tc.classList.add('on'); //添加一个on类
if(tc.classList.contains('on') == true) //查询类
function dsq()
window.clearInterval(lia);
window.setTimeout(dsq,5000);
// 清除定时器
var btn1 = document.getElementById('btn1');
btn1.onclick = function()
var tc = document.getElementById('tc');
tc.style.display = 'none';
</script>
</body>
</html>
因为一直弹窗会对浏览器产生很大的负荷，这里除了添加不再弹窗之外还优化了一下代码。
之前的代码是点击之后开始执行循环函数，但是不停止循环，不管弹窗是否显示的状态都会每5秒执行一次，这样明显不合理，应该是在你关闭弹窗之后5秒才执行。弹窗在显示状态不执行。
参考技术A问题分析：
首先来分析一下这个功能的两copy个步骤。
1、弹出：当页面初始化完毕后，等待N秒显示出div标签。
2、关闭：当div标签弹出后，再等待N秒后将其关闭。百
解决方案：
可以度使用JavaScript的setTimeout方法来做定时功能。
案例如下：
此案例设置页面初始化后5秒弹出div标签，再等5秒后关闭div标签。
HTML代码：
1<div>我是DIV的内容</div>
CSS代码：
div width: 200px; height: 200px; line-height: 200px; text-align: center; background-color: #000; color: #FFF; display: none;
JavaScript代码：
setTimeout(function() $('div').show(); //将DIV标签显示出来。 setTimeout(function() $('div').hide(); //将DIV标签隐藏。 , 5000);, 5000);
页面初始化时为空白，5秒后的效果为：
extjs 如何关闭当前整个网页
extjs 如何关闭当前整个网页 就如同JS中的window.close();的方法 关闭的是当前的整个界面，而不是window，不是标签页等
Extjs中关闭整个页面需要用parent对象窗口打开的window对象。例如：
有a,b两个页面，a页面为主页面，有按钮一个，点击按钮弹出一个windows对象，在其中显示b页面。b页面中也有一个按钮，点击关闭窗口。
a.htm (部分代码)
<script type="text/javascript">
function openWindow(id,title,url,width,height)
var win = Ext.get(id)
if (win)
win.close();
return;
win = new Ext.Window(
id:id,
title:title,
layout:'fit',
width:width,
height:height,
closeAction:'close',
collapsible:true,
plain: false,
resizable: true,
html : ''
);
win.show();
function myfunction()
openWindow('b-win','窗口中打开b页面','b.htm',400,300);
</script>
<input type="button" name="button1" value="打开窗口" onClick="myfunction()">
b.htm（部分代码）
<script type="text/javascript">
function closewin()
var win = parent.Ext.getCmp('b-win');
if (win) win.close();
</script>
<input type="button" name="button1" value="关闭a打开的窗口" onClick="closewin()"> 参考技术A 如果是需要把所有extjs的组件关闭的话，你可以找到最底层的容器组件，比如viewport或者container。（跟实际情况有关），然后使用容器的destroy（）方法，这样就可以关闭所有的组件了。希望能帮到你！追问
你这个是销毁EXTJS的组件 但是我现在想实现的是关闭当前你正在使用的这个网页，整个网页。就像是在google浏览器按F12 进入console 输入window.close() 的效果是一样的
追答我自己尝试了一下，发现只有通过用户点击或者javascript打开的新窗口才能使用window.close()关闭。w3school上的手册里这样解释：只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。
参考技术B extjs是一个js框架，可以理解为，是js的扩充和完善，它本身就是js代码，那么你以前的js代码都可以在extjs使用。所以你的window.close()还是可以使用。extjs没关闭浏览器的方法。追问
我开始也是这么认为的 但是很不幸 window.close()方法是关闭不了整个网页的 所以我才来问问有没有什么方法可以关闭整个网页的 Extjs中window.location.href这种属性都是好使的 但是window.close()方法不好使
追答我上面给你纠正了下概念。
你的回应里面还是要纠正，window.location.href还是原生的javascript，这是超链接的意思。不是用了extjs框架，所有的都是extjs的了。
好了说你的需求
如果浏览器只打开了你的1网页，然后1网页里面打开2网页，能找到opener的，那么，还是可以关掉的。
但是浏览器如果开了一个百度标签页，再开了你的1网页，2网页标签页，是无法做到点击你自己网页里面的按钮将百度那个标签页关闭掉的。
我说的意思就是要关闭我当前的页面 就跟点X按钮一样的效果 在Extjs中使用window.close();
是关闭不了当前页面的。 我想实现的功能就是点击EXTJS的按钮可以关闭此网页 就像是点X了一样的
我知道了，你说的tab是extjs的tanpanel，我还以为是浏览器的标签页。
好了，给你关闭当前网页的js代码，我测试过了，可用的。
function CloseBrowser()var browserName=navigator.appName;
alert(browserName);
if (browserName=="Netscape")
self.opener=null;
self.open('','_self');
self.close();
if (browserName=="Microsoft Internet Explorer")
window.opener = "whocares";
window.close();
本回答被提问者和网友采纳
以上是关于求一段js代码打开页面div5秒弹出，点击关闭按钮后再次定时弹出的主要内容，如果未能解决你的问题，请参考以下文章
求一段用js固定div在移动端底部不随页面滑动的代码 且不抖动
求一段css,在进入blog时候,窗口前自动弹出图片,几秒钟后自动关闭
怎么点击确定按钮关闭当前窗口，并返回父页面，并且父页面刷新。