求一段js代码打开页面div5秒弹出，点击关闭按钮后再次定时弹出 打开页面后弹出一个带关闭按钮的层，并且在关闭后可以定时弹出的...
jQuery\u600e\u4e48\u63a7\u5236\u4e00\u4e2adiv\u5b9a\u65f6\u5f39\u51fa\u6765\u7136\u540e\u8fc7\u4e00\u6bb5\u65f6\u95f4\u5b9a\u65f6\u5173\u95ed\u95ee\u9898\u5206\u6790\uff1a
\u9996\u5148\u6765\u5206\u6790\u4e00\u4e0b\u8fd9\u4e2a\u529f\u80fd\u7684\u4e24\u4e2a\u6b65\u9aa4\u3002
1\u3001\u5f39\u51fa\uff1a\u5f53\u9875\u9762\u521d\u59cb\u5316\u5b8c\u6bd5\u540e\uff0c\u7b49\u5f85N\u79d2\u663e\u793a\u51fadiv\u6807\u7b7e\u3002
2\u3001\u5173\u95ed\uff1a\u5f53div\u6807\u7b7e\u5f39\u51fa\u540e\uff0c\u518d\u7b49\u5f85N\u79d2\u540e\u5c06\u5176\u5173\u95ed\u3002
\u89e3\u51b3\u65b9\u6848\uff1a
\u53ef\u4ee5\u4f7f\u7528JavaScript\u7684setTimeout\u65b9\u6cd5\u6765\u505a\u5b9a\u65f6\u529f\u80fd\u3002
\u6848\u4f8b\u5982\u4e0b\uff1a
\u6b64\u6848\u4f8b\u8bbe\u7f6e\u9875\u9762\u521d\u59cb\u5316\u540e5\u79d2\u5f39\u51fadiv\u6807\u7b7e\uff0c\u518d\u7b495\u79d2\u540e\u5173\u95eddiv\u6807\u7b7e\u3002
HTML\u4ee3\u7801\uff1a
\u6211\u662fDIV\u7684\u5185\u5bb9CSS\u4ee3\u7801\uff1a
div{ width: 200px; height: 200px; line-height: 200px; text-align: center; background-color: #000; color: #FFF; display: none;}JavaScript\u4ee3\u7801\uff1a
setTimeout(function(){ $('div').show(); //\u5c06DIV\u6807\u7b7e\u663e\u793a\u51fa\u6765\u3002 setTimeout(function(){ $('div').hide(); //\u5c06DIV\u6807\u7b7e\u9690\u85cf\u3002 }, 5000);}, 5000);\u9875\u9762\u521d\u59cb\u5316\u65f6\u4e3a\u7a7a\u767d\uff0c5\u79d2\u540e\u7684\u6548\u679c\u4e3a\uff1a
\u7528setInterval(fun,time)
fun\u662f\u4f60\u5199\u7684\u89e6\u53d1\u5f39\u51fa\u6846\u7684\u51fd\u6570\uff0ctime\u662f\u95f4\u9694\u7684\u65f6\u95f4\uff0c\u5728\u9875\u9762\u8f7d\u5165\u7684\u65f6\u5019\u5148\u6267\u884c\u4e00\u6b21fun
\u7136\u540e\u518d\u662fsetInterval(fun,time)\uff0c\u8fd9\u6837\u5c31\u4f1a\u5faa\u73af\u6267\u884c\u4e86
<!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秒才执行。弹窗在显示状态不执行。
问题分析：
首先来分析一下这个功能的两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秒后的效果为：
绛旓細濡備笅鍙傝冿細1.椤甸潰澶嶅埗鏈変竴涓猧d涓篶2鐨div锛屼笅闈㈡湁涓涓瓙div锛屼笅闈㈡湁涓涓寜閽紝浜嬩欢鏄敤鏉ョ偣鍑100涓猘dddiv銆2.鍦╡vent鍑芥暟涓紝瀹氫箟涓涓唴瀹逛负degreediv瀛楃鐨勫瓧绗︿覆鍙橀噺銆3.鐒跺悗浣跨敤jquery鐨刟ppend灏嗗凡鐭ョ殑div瀛楃涓叉坊鍔犲埌c2div锛屽涓嬫墍绀恒4.杩愯椤甸潰锛岀幇鍦ㄥ彧鐪嬪埌涓涓猟iv锛屽涓嬪浘鎵绀恒5.鍗曞嚮涓嬮潰鐨...
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆乭tml缂栬緫鍣ㄣ佹祻瑙堝櫒銆1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<script>鏍囩锛岃緭鍏js浠ｇ爜锛('body').append('<div id="a" style="color:blue">div鍐呭</div>');3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃禿iv浠ュ強瀹冪殑id灞炴у拰棰滆壊灞炴...
绛旓細Status=no鏄惁鏄剧ず鐘舵佹爮涓殑淇℃伅(閫氬父鏂囦欢宸茬粡鎵撳紑),yes鏄厑璁哥殑; 绀轰緥:window.open(page.aspx iframe妗嗘灦椤甸潰涓脊鍑虹獥鍙ｅ浣曚娇鐢JS鍥炶皟? 鍙兘鏄:鍐掓场鎵鑷...寮瑰嚭绐楀彛鐨浠ｇ爜鏄粈涔? 銆愭渶鍩烘湰鐨勫脊鍑虹獥鍙ｄ唬鐮併 SCRIPTLANGUAGE="javascript"> !-- window.open('page.html') --> /SCRIPT> 鍥犱负杩欐槸涓娈javascript...
绛旓細浣跨敤ajax銆傚弬鑰浠ｇ爜锛(function(){ .ajax({ type:"POST", url:"LoginLoadArticle.ashx",data: "type="+escape("鏈鏂板叕鍛") ,success:function(msg){ (".gonggao").html(msg);}, error:function(XMLHttpRequest, textStatus, thrownError){}})})...
绛旓細鍏跺疄妤间笂璇寸殑灏辨槸javascript浠ｇ爜锛屽彧鏄湁鐐瑰啓閿欎簡锛<script type="text/javascript"> function open(html){ window.open(html,'_self')} </script> 浣犵殑鎸夐挳杩欐牱鍐 <input type="button" onclick="open(杩欓噷鏄綘璇寸殑鍊)"> 琛ュ厖鍥炵瓟锛氶鍏堢粰浣犺鐨勪唬鐮佺粷瀵规病閿欙紝浣犲彲浠ヨ嚜宸辫瘯璇曞憖 <html> <...
绛旓細1銆丠TML缁撴瀯 <div id ="test"></div><input type='button' value='鑾峰彇椤甸潰鐨刯avascript浠ｇ爜' onclick="fun()"/>2銆乯avascript浠ｇ爜 <script id="script_id">function fun(){var code = document.getElementById("script_id").innerHTML;var div = document.getElementById("test");div....
绛旓細</head> <body onselectstart="return false"> <table id="t" class="t"> <tr> <td align="center" valign="middle"> <div class="d1"><div class="d2"> <table width="290" height="115" border="0" cellpadding="0" cellspacing="0" cellspace="0" cellpad="0"> ...
绛旓細鍙互灏哾ocument.links鐢紝$("鎸囧畾鐨DIV").find("a")浠ｆ浛锛屽叾浠栭兘涓鏍凤紝涔熷氨鏄 function random_all(){ var myrandom=Math.round(Math.random()*($("鎸囧畾鐨凞IV").find("a").length-1))window.location=$("鎸囧畾鐨凞IV").find("a")[myrandom].href } 娉細鎴戣繖閲屼娇鐢ㄤ簡jquery浠ｇ爜 ...
绛旓細1銆鎵撳紑缂栬緫鍣紝鏂板缓test.html锛岀敤浜庡涔犱粖澶╃殑鍐呭銆2銆佹帴涓嬫潵闇瑕佸湪head鏍囩涓嬫柟寮曞叆jquery.min.js鎻掍欢銆3銆佸湪椤甸潰鐨刡ody鏍囩閲岋紝鏂板缓涓涓猵锛屽悕绉颁负test銆4銆佸湪body鏍囩涓嬫柟鍐欎笂script>/script>,鐢ㄦ潵瀛樻斁js浠ｇ爜銆傞氳繃class瀹氫綅鍒皃锛岄氳繃css()鏂规硶璁╂枃瀛楀眳涓5銆佸湪娴忚鍣ㄤ腑鎵撳紑test.html锛屽彲浠ュ湪鏂囧瓧...
绛旓細1銆佸湪璁颁簨鏈噷鍐欙細onload =function(){alert("I love China");} 2銆佸彟瀛樹负showMyWords.js锛屾斁鍒板拰浣犵殑缃戦〉鍚屼竴涓枃浠跺す涓嬨3銆<script type="text/javascript" src="showMyWords.js"></script>灏嗚繖鍙浠ｇ爜鍔犲埌<head>鏍囩鍐咃細<html> <head> <title></title> <script type="text/javascript...
