JS 递归小例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<title></title>
		<style>
			*{padding:0;margin:0;border:0;font-family: "微软雅黑"}
			.adv,.main{width:100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 10;}
			.adv img,.main img{width:100%;height: 100%;}
			.adv span{background: rgba(0,0,0,0.5);position: absolute;top: 5px;right: 5px;font-size: 20px;padding: 10px;
    		color: #fff;cursor: pointer;}
    		.adv span b{font-weight: 500;}
    		.main{z-index: 9;}
    		.box{transform: translate(-50%,0);position: absolute;top: 50%;left: 50%;font-size: 20px;color: #fff;
    		background: rgba(0,0,0,0.5);padding: 10px;}
		</style>
	</head>
	<body>
		<div class="adv" id="adv">
			<img src="images/adv.jpg" alt="" />
			<span id="jump">跳过<b id="advRecursive">3</b></span>
		</div>
		<div class="main">
			<img src="images/index.jpg"/>
			<div class="box">
				生命计时：<span id="box">00:00:00</span>
			</div>
		</div>
		<script type="text/javascript">
			var timmer,advNumber = document.getElementById("advRecursive").innerHTML;
			minusAdvNumber();
			function minusAdvNumber(){
				if(advNumber < 1 ){
					jump();
				}else{
					advNumber--;
					setTimeout(function(){
						document.getElementById("advRecursive").innerHTML = advNumber;	
						minusAdvNumber();			
					},1000);
				}
			}
			document.getElementById("jump").addEventListener("click",function(){
				jump();
			});
			function jump(){
				if(timmer) clearInterval(timmer);				
				document.getElementById("adv").remove();
				timmer = setInterval(addNumber,1000);
			}
			var box = document.getElementById("box"),H = 0,M = 0,S = 0;		
			function addNumber(){
				S++;
				if(S > 59){ 
					S = 0;
					M++;
					if(M > 59){
						M = 0;
						H++;
					}
				}
				S = less10(S);
				H = less10(H);
				M = less10(M);
				box.innerHTML = H + ":" + M + ":" + S;
			}
			function less10(n){	
				if(parseFloat(n) < 10){
					n = "0" + parseFloat(n);
				}
				return n;
			}
		</script>
	</body>
</html>
猜你喜欢
