HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="../js/jquery-2.0.3.js"></script> <script src="demo.js"></script> <link rel="stylesheet" href="common.css"> <title>倒计时</title> </head> <body> <div id="container"> <div id="count-down"> <span id="jump">跳转 <b>30</b></span> </div> <div id="content"> 上网时间： <span id="ptime"> 00:00:00 </span> </div> </div> </body> </html>
CSS代码
*{margin:0;padding:0} html,body{ background: #000; width:100%; height:100%; } #container{ width:50%; margin:0 auto; height:100%; } #count-down{ width:100%; height:100%; padding: 10px; text-align: right; color:#666; background:url(../images/1.jpg) no-repeat center center; background-size:100% 100%; box-sizing: border-box; } #content{ width:100%; height:100%; text-align: center; color:#666; line-height:200px; background:url(../images/2.jpg) no-repeat center center; background-size:100% 100%; box-sizing: border-box; } @media screen and (max- 640px){ #container{ width:100%; margin:0 auto; height:100%; } }
Jquery代码
$(function(){ // 开屏广告 var text =$('#count-down span b').text(); var timer ; countDown(text) $('#jump').click(function(){ jump() }) function countDown(index){ if(index > 0) { setTimeout(function(){ index --; $('#count-down span b').text(index); countDown(index) // 自己调用自己 },1000) } else { jump() } }; function jump(){ $('#count-down').fadeOut(800); if (timer) { clearInterval(timer) } timer = setInterval(setClock,1000) }; var HH = 0,MM =0, SS=0,str =""; function setClock() { str = ""; if (++SS == 60) { if (++MM == 60) { HH ++ MM = 0 } SS = 0 } str += HH <10 ? "0"+ HH : HH; str += ":" str += MM <10 ? "0"+ MM : MM; str += ":" str += SS <10 ? "0"+ SS : SS; $("#ptime").text(str) } })
仅供自己以后复习