<!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 递归小例子
猜你喜欢
转载自blog.csdn.net/qiuqidehao/article/details/80776507
今日推荐
周排行