弹出层倒计时打开新页面关闭自己

最新推荐文章于 2023-04-24 14:42:29 发布

chuzhenbin

最新推荐文章于 2023-04-24 14:42:29 发布

阅读量1k

点赞数

分类专栏： javascript jquery 文章标签： redirect div html button filter border

本文链接：https://blog.csdn.net/chuzhenbin/article/details/7599991

版权

jquery 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
    <title>test</title>
    
		<script type="text/javascript" src="jquery-1.4.1.js" charset="utf-8"></script>
	
		<script type="text/javascript">
			var second=5;
			var timerId; //定时器id
			function checkByWebServices(){
				$("#waitView").css("display","block"); //inline
				$("#waitViewFade").css("display","block");
				//second = document.getElementById('totalSecond').innerText;
				second = $("#totalSecond").text();
				timerId = window.setInterval("redirect()", 1000);
			}		
			function redirect(){
				if(second < 0){
					window.clearInterval(timerId); //清除已经设置的定时器对象
					window.open('http://www.baidu.com?result','_bank');
			  	window.close();
				}
				else{
					//document.getElementById('totalSecond').innerText = second--; 
					$("#totalSecond").text(second--);
				}
			}
		</script>
  	    	  

	  <style>
	    #waitViewFade{  
		    display: none;  
		    position: absolute;  
		    top: 0;  
		    left: 0;  
		    width: 100%;  
		    height: 100%;  
		    background-color: black;  
		    z-index:9998;  
		    -moz-opacity: 0.5;  
		    opacity:.50;  
		    filter: alpha(opacity=50);
	    }  
	    
	    #waitView{  
		    color:#ff0000;
		    display: none;  
		    position: absolute;  
		    top: 25%;  
		    left: 25%;  
		    width: 50%;  
		    height: 50%; 
		    line-height:50%;
		    padding: 16px;  
		    border: 12px solid orange;  
		    background-color: white;  
		    z-index:9999;  
		    overflow: auto; 
		    text-align:center; 
	    }  
	  </style>
  
  </head>
  
  <body οncοntextmenu="return false" >

    <div id="waitView">
	    <br><br><br><br>
	    <img src="jindutiao1.gif">
	    <br><br><br><br><br>
	    <span style="color:#000000"><span id="totalSecond">5</span>秒后进入新页面...</span>
      <br><br><br>
    </div>
  	<div id="waitViewFade"></div>
  	
  
	  <div id="body">
	  	<div id="page">
	  	AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
	  	<input type="button" value="按钮" οnclick="checkByWebServices()" />
			</div>
		</div>
  
  </body>
</html>

chuzhenbin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
弹出层倒计时打开新页面关闭自己

test var second=5; var timerId; //定时器id function checkByWebServices(){ $("#waitView").css("display","block"); //inline $("#waitViewFade").css("display","block");
复制链接

扫一扫