模仿了一个夸张的商品倒计时效果，设计的精简当然也很丑，只是为了检测自己说明问题

来源：互联网发布：知乎经典好贴编辑：程序博客网时间：2024/05/03 10:34
<!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>
0 0