<!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>
JS 递归小例子
最新推荐文章于 2023-04-03 11:29:08 发布