双十一购物倒计时效果
时间：2014-11-10 17:00:01
收藏：0
阅读：311
马上双十一了，过了零点小伙伴们就要各自对放在购物车里的订单下单了，今日特写一个倒计时效果。
倒计时的主要思路：
知道结束时间的时间戳，当前的时间戳，结束的时间减去当前的时间就是，倒计时需要显示的时间差。然后对天、小时、分钟、秒，运行换算。
这里强调一个函数function todouble(),就是把换算出来的时间不足2位的，在数字前面加上一个“0”，比如1秒，变成01秒，2分钟变成02分钟。、
然后依次修改图片的top值在页面中显示。下面上代码。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <style> 8 *{margin:0px;padding:0px;} 9 body{width:100%;height:100%;overflow-x:hidden;background:#000;} 10 #body{width:820px;height:72px;margin:300px auto;} 11 #body .Box{width:192px;float:left;position:relative;} 12 #body .Box span{width:62px;height:71px;float:left;display:block;margin-right:5px;background:#fff;overflow:hidden;position:relative;} 13 #body .Box span img{position:absolute;left:0px;top:0px;} 14 #body .Box p{width:130px;heighgt:30px;display:block;line-height:30px;position:absolute;left:0px;top:73px;text-align:center;color:#f00; 15 font-family:Arial, Helvetica, sans-serif;} 16 .msg{width:820px;height:30px;line-height:20px;color:#ccc;font-size:20px;font-family:"微软雅黑";margin-bottom:20px;} 17 </style> 18 <script> 19 //dayObj,hourObj,minObj,secObj 20 function clockEnd(str,json){ 21 var endTime=str;//结束时间 22 var arr=endTime.split(‘-‘); 23 var num=arr.join(‘/‘) 24 var endTimeStamp=Date.parse(num);//结束时间戳 25 var dida=null; 26 var dayObj=document.getElementById(json.dayObj); 27 var hourObj=document.getElementById(json.hourObj); 28 var minObj=document.getElementById(json.minObj); 29 var secObj=document.getElementById(json.secObj); 30 var msg=document.getElementById(‘msg‘); 31 function coutMove(){ 32 var nowTimeStamp=new Date().getTime();//现在的时间戳 33 if(nowTimeStamp>endTimeStamp){ 34 endTimeStamp=nowTimeStamp; 35 clearInterval(dida); 36 } 37 var count=endTimeStamp-nowTimeStamp;//倒计时时间戳 38 var day=Math.floor(count/(1000*60*60*24)); 39 count-=day*(1000*60*60*24); 40 var hour=Math.floor(count/(1000*60*60)); 41 count-=hour*(1000*60*60); 42 var mint=Math.floor(count/(1000*60)); 43 count-=mint*(1000*60); 44 var sec=Math.floor(count/(1000)); 45 46 47 var D=toDouble(day); 48 var H=toDouble(hour); 49 var M=toDouble(mint); 50 var S=toDouble(sec); 51 52 domFn(dayObj,D); 53 domFn(hourObj,H); 54 domFn(minObj,M); 55 domFn(secObj,S); 56 msg.innerHTML=‘距离<strong style="color:#f00;padding:0px 10px;">11-11购物狂欢节</strong>还有：‘ 57 } 58 function domFn(obj,str){ 59 60 61 var oSpan=obj.getElementsByTagName(‘span‘); 62 var str01=str.substring(0,1);//0 63 var str02=str.substring(1,2); //1 64 //console.log(str01,str02) 65 oSpan[0].children[0].style.top=-71*str01+‘px‘ 66 oSpan[1].children[0].style.top=-71*str02+‘px‘ 67 68 } 69 // 70 function toDouble(str){ 71 var num=str; 72 if(num<10){ 73 num=‘0‘+num; 74 }else{ 75 num=‘‘+num; 76 } 77 return num; 78 } 79 dida=setInterval(function(){ 80 coutMove(); 81 },1000) 82 coutMove(); 83 } 84 window.onload=function(){ 85 clockEnd("2014-11-11",{ 86 dayObj:‘day1‘, 87 hourObj:‘hour‘, 88 minObj:‘min‘, 89 secObj:‘sec‘ 90 }); 91 } 92 </script> 93 <body> 94 <div id="body"> 95 <div class="msg" id="msg"></div> 96 <div class="Box" id="day1"> 97 <span><img src="images/daojishi_03.jpg"/></span> 98 <span><img src="images/daojishi_03.jpg"/></span> 99 <p>天</p> 100 </div> 101 <div class="Box" id="hour"> 102 <span><img src="images/daojishi_03.jpg"/></span> 103 <span><img src="images/daojishi_03.jpg"/></span> 104 <p>小时</p> 105 </div> 106 <div class="Box" id="min"> 107 <span><img src="images/daojishi_03.jpg"/> 108 </span><span><img src="images/daojishi_03.jpg"/></span> 109 <p>分钟</p> 110 </div> 111 <div class="Box" id="sec"> 112 <span><img src="images/daojishi_03.jpg"/></span> 113 <span><img src="images/daojishi_03.jpg"/></span> 114 <p>秒</p> 115 </div> 116 </div> 117 </body> 118 </html>
评论（0）