模仿了一個誇張的商品倒計時效果，設計的精簡當然也很醜，只是為了檢測自己說明問題
阿新 • • 發佈：2019-01-04
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> #box{ width: 1002px; margin: 100px auto; box-shadow: 1px 1px 5px 1px; } #top{ width: 1000px; height: 300px; border: 1px solid black; position: relative; } #top ul,li,input{ margin: 0; padding: 0; } #top ul{ height: 300px; position: absolute; top: 0; } #top li{ border: 1px solid black; display:inline-block; list-style: none; width: 250px; height: 300px; position: absolute; opacity: 1; } input{ width: 160px; } .btn{ width: 80px; } #top li div{ width: 250px; height: 300px; opacity: 1; position: absolute; } .xj{ background:#998a8a; color:#fff; text-align: center; } .time{ display: inline-block; } </style> <script type="text/javascript" src="doMove.js"></script> <script type="text/javascript" src="opacity.js"></script> <script type="text/javascript" src="shake.js"></script> <script type="text/javascript"> window.onload=function(){ var aLi=document.getElementsByTagName('li'); var middle=document.getElementById('middle'); var bottom=document.getElementById('bottom'); var oP=document.getElementsByTagName('p')[0]; var arrdiv=[]; for(var i=0;i<aLi.length;i++){ aLi[i].style.left=i*250+"px"; var aDiv=aLi[i].getElementsByTagName('div'); for(var j=0;j<aDiv.length;j++){ arrdiv.push(aDiv[j])} } var str=""; var timer0=null; var timer1=null; var timer2=null; var timer3=null; var time=document.getElementById('time'); var tmdiv=time.getElementsByTagName('div'); var aInp0=tmdiv[0].getElementsByTagName('input'); var aInp1=tmdiv[1].getElementsByTagName('input'); var aInp2=tmdiv[2].getElementsByTagName('input'); var aInp3=tmdiv[3].getElementsByTagName('input'); aInp0[1].onclick=function(){ timer0=setInterval(function(){ var mytime=new Date(); str=aInp0[0].value; var future=new Date(str); var sjc=(future-mytime)/1000; if(sjc>=0){ tian=Math.floor(sjc/86400); shi=Math.floor(sjc%86400/3600); fen=Math.floor(sjc%86400%3600/60); miao=Math.floor(sjc%60); aInp0[2].value=add0(tian)+'天'+add0(shi)+'時'+add0(fen)+'分'+add0(miao)+'秒'; }else{ clearInterval(timer0); spxj(arrdiv[0],aLi[0]); } },1000) } aInp1[1].onclick=function(){ timer1=setInterval(function(){ var mytime=new Date(); str=aInp1[0].value; var future=new Date(str); var sjc=(future-mytime)/1000; if(sjc>=0){ tian=Math.floor(sjc/86400); shi=Math.floor(sjc%86400/3600); fen=Math.floor(sjc%86400%3600/60); miao=Math.floor(sjc%60); aInp1[2].value=add0(tian)+'天'+add0(shi)+'時'+add0(fen)+'分'+add0(miao)+'秒'; }else{ clearInterval(timer1); spxj(arrdiv[1],aLi[1]); } },1000) } aInp2[1].onclick=function(){ timer2=setInterval(function(){ var mytime=new Date(); str=aInp2[0].value; var future=new Date(str); var sjc=(future-mytime)/1000; if(sjc>=0){ tian=Math.floor(sjc/86400); shi=Math.floor(sjc%86400/3600); fen=Math.floor(sjc%86400%3600/60); miao=Math.floor(sjc%60); aInp2[2].value=add0(tian)+'天'+add0(shi)+'時'+add0(fen)+'分'+add0(miao)+'秒'; }else{ clearInterval(timer2); spxj(arrdiv[2],aLi[2]); } },1000) } aInp3[1].onclick=function(){ timer3=setInterval(function(){ var mytime=new Date(); str=aInp3[0].value; var future=new Date(str); var sjc=(future-mytime)/1000; if(sjc>=0){ tian=Math.floor(sjc/86400); shi=Math.floor(sjc%86400/3600); fen=Math.floor(sjc%86400%3600/60); miao=Math.floor(sjc%60); aInp3[2].value=add0(tian)+'天'+add0(shi)+'時'+add0(fen)+'分'+add0(miao)+'秒'; }else{ clearInterval(timer3); spxj(arrdiv[3],aLi[3]); } },1000) } function spxj(obj,li){ var sum=0; shake(obj,'left',function(){ doMove(obj,'top',5,300); opacity(obj,0.01,0,function(){ li.className="xj"; li.innerHTML="該商品已下架"; middle.innerHTML+="<div style='background:"+obj.style.background+";width:1000px;height:30px'>"+obj.innerHTML+"</div>"; var omsp=middle.getElementsByTagName("span"); for(var a=0; a<omsp.length;a++){ sum+=Number(omsp[a].innerHTML)} var obsp=bottom.getElementsByTagName("span")[0]; obsp.innerHTML=sum; }); }); }//商品下架 function add0(n){ if(n<10){return n="0"+n}else{return n=""+n} }//時間前加0 } </script> </head> <body> <div id="box"> <div id="time"> <div class="time"> <input type="text" value="December 22,2016 6:0:0"> <input class="btn" type="button" value="開始倒計時" ><br> 剩餘時間：<input type="text"> </div> <div class="time"> <input type="text" value="December 22,2016 6:0:0"> <input class="btn" type="button" value="開始倒計時"><br> 剩餘時間：<input type="text"> </div> <div class="time"> <input type="text" value="December 22,2016 6:0:0"> <input class="btn" type="button" value="開始倒計時"><br> 剩餘時間：<input type="text"> </div> <div class="time"> <input type="text" value="December 22,2016 6:0:0"> <input class="btn" type="button" value="開始倒計時"><br> 剩餘時間：<input type="text"> </div> </div> <div id="top"> <ul> <li><div style="background: pink">蘋果<span>30</span>元</div></li><li> <div style="background: yellow">香蕉<span>40</span>元</div></li><li> <div style="background: orange">菠蘿<span>50</span>元</div></li><li> <div style="background: red">西瓜<span>60</span>元</div></li> </ul> </div> <div id="middle"></div> <div id="bottom"> <p>共計：<span>0</span>元</p> </div> </div> </body> </html>