商品倒计时
HTML
<div class="box"> <h2>限购时间</h2> <ul id="wareList" class="clearFix"> <li class="fl"> <div class="waredown"> <img src="img/timg.jpg"/> <strong>商品已下架</strong> </div> <div class="ware"> <p> <input type="" name="" id="" value="" /> <a href="javascript:;">确定</a> </p> <em class="time">剩余00天00时00分00秒</em> <div> <img src="img/2.jpg"/> <p>1疯狂599,美的爆款隐藏式面板下拉门微波炉</p> <span>抢购价:<i>¥3299.00</i></span> </div> </div> </li> <li class="fl"> <div class="waredown"> <img src="img/timg.jpg"/> <strong>商品已下架</strong> </div> <div class="ware"> <p> <input type="" name="" id="" value="" /> <a href="javascript:;">确定</a> </p> <em class="time">剩余00天00时00分00秒</em> <div> <img src="img/2.jpg"/> <p>2疯狂599,美的爆款隐藏式面板下拉门微波炉</p> <span>抢购价:<i>¥3299.00</i></span> </div> </div> </li> <li class="fl"> <div class="waredown"> <img src="img/timg.jpg"/> <strong>商品已下架</strong> </div> <div class="ware"> <p> <input type="" name="" id="" value="" /> <a href="javascript:;">确定</a> </p> <em class="time">剩余00天00时00分00秒</em> <div> <img src="img/2.jpg"/> <p>3疯狂599,美的爆款隐藏式面板下拉门微波炉</p> <span>抢购价:<i>¥3299.00</i></span> </div> </div> </li> </ul> <div id="list"> <div> <span>商品名称</span> <span>价钱</span> </div> <ul id="list1"> <!--<li> <span class="span1 fl">疯狂599,美的爆款隐藏式面板下拉门微波炉</span> <span class="span2 fl">¥3299.00</span> <img src="img/2.jpg" class="fl"/> </li>--> </ul> </div> <p>总价:<i id="allPrice">00.00</i>元</p> </div>
CSS
*{ margin: 0; padding: 0; } li{ list-style: none; } .clearFix:after{ content: ""; display: block; clear: both; } .fl{ float: left; } .fr{ float: right; } .box{ width: 660px; margin: 20px auto; } h2{ font-size: 14px; padding: 12px 0 5px; border-bottom: 1px solid #9b999b; } #wareList li{ width: 200px; height: 280px; margin: 10px; position: relative; } .waredown{ position: absolute; left: 0; top: 0; } strong{ display: block; text-align: center; color: red; } #wareList li input{ width: 120px; height: 14px; background: #deddde; } #wareList li img{ height: 168px; width: 175px; margin: 0 auto; } #wareList li a{ color: #37161b; text-decoration: none; } .time{ display: block; color: #9b9a9c; padding: 10px 0; font-style: normal; } .ware{ position: absolute; left: 0; top: 0; background: #fff; font-size: 12px; color: #6f6d6f; opacity: 1; } .box i{ font-style: normal; color: #b71c4d; } #list{ padding: 20px 0 10px; } #list>div{ height: 30px; line-height: 30px; background: #e2e0e2; color: #482c31; } #list>div span{ display: inline-block; width: 40%; text-indent: 30px; } #list1 li{ background: #e2e0e2; height: 55px; line-height: 55px; margin-top: 5px; } #list1 span{ display: inline-block; } #list1 .span1{ width: 200px; padding-left: 20px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #list1 .span2{ width: 220px; padding-left: 70px; } #list1 img{ width: 60px; height: 47px; border: 2px solid #9a3939; vertical-align: top; margin-top: 3px; }
JS
//获取元素 var wareList=document.getElementById("wareList"); var wareLi=wareList.getElementsByTagName("li"); var aDiv=wareList.getElementsByTagName("div"); var Btn=document.getElementsByTagName("a"); var aInput=document.getElementsByTagName("input"); var txt=document.getElementsByTagName("em"); var monthArray=["January","February","March","April","May","June","July","August","September","October","November","December"]; var list=document.getElementById("list1"); var arr=[]; var allPrice=document.getElementById("allPrice"); //获取时间 var iNow=new Date(); var iYear=iNow.getFullYear();//年 var iMonth=iNow.getMonth();//月 var iDate=iNow.getDate();//日 var iHour=iNow.getHours();//时 var iMin=iNow.getMinutes();//分 var iSecond=iNow.getSeconds();//秒 //设置设置框内的默认时间‘ var str=monthArray[iMonth]+" "+zero(iDate)+","+iYear+" "+zero(iHour)+":"+zero(iMin)+":"+zero(iSecond); for (var i=0;i<aInput.length;i++) { //设置初始化input内的时间为现在时间 aInput[i].value=str; //点击确定开始倒计时 Btn[i].index=i; Btn[i].onclick=function(){ //清除定时器 clearInterval(this.timer); //获得设置框内的内容 var str1=aInput[this.index].value; //设置倒计时终点时间 this.iNew=new Date(str1); var that=this.index; Time(that); this.timer=setInterval(function(){ Time(that,function(){ //抖动 shake(aDiv[that*3+1],"left",function(){ //向下运动 moveTo(aDiv[that*3+1],"top",280,10); //透明度 aDiv[that*3+1].timer1=setInterval(function(){ var op=getStyle(aDiv[that*3+1],"opacity")-0.1; if(op<0){ //清除定时器 clearInterval(aDiv[that*3+1].timer1); op=0; } aDiv[that*3+1].style.opacity=op; //当商品倒计时结束并且透明度为0时, 商品列表加入新的商品、并计算总价 if(op==0){ var txt1=aDiv[that*3+2].getElementsByTagName('p')[0].innerHTML; var txt2=aDiv[that*3+2].getElementsByTagName('i')[0].innerHTML; var src1=aDiv[that*3+2].getElementsByTagName('img')[0].src; list.innerHTML+="<li><span class='span1 fl'>"+txt1+"</span><span class='span2 fl'>"+txt2+"</span><img src='"+src1+"' class='fl'/></li>"; //总价 var price=parseFloat(txt2.substring(1,txt2.length)); arr.push(price); var sum=0; for (var i=0;i<arr.length;i++) { sum+=arr[i]; } allPrice.innerHTML=sum; } },80) }); }); },1000) } } //封装函数 //获得时间和计算剩余时间函数 function Time(that,endFn){ iNow=new Date(); var t=Math.floor((Btn[that].iNew-iNow)/1000);//秒 //更新倒计时 var str="剩余"+Math.floor(t/86400)+"天"+Math.floor(t%86400/3600)+"时"+Math.floor(t%86400%3600/60)+"分"+t%60+"秒"; //当倒计时 if(t<0){ //清除清定时器 clearInterval(Btn[that].timer); if(endFn){ endFn(); } }else{ txt[that].innerHTML=str; } } //倒计时结束要执行的操作 //图片抖动、向下运动、透明度变化 //运动函数 function moveTo(obj,attr,target,dir,endFn){ clearInterval(obj.timer1); //解决dir正负的问题:当原始值小于目标值时dir为正值,否则为负值 dir=parseInt(getStyle(obj,attr))<target?dir:-dir; obj.timer1=setInterval(function(){ var speed=parseInt(getStyle(obj,attr))+dir;//步长 //当元素到达目标点时,停在目标点停止运动 if(speed>target&&dir>0||speed<target&&dir<0){ speed=target; } obj.style[attr]=speed+"px"; //清除定时器 if(speed==target){ clearInterval(obj.timer1); if(endFn){ endFn(); } } },30) } //抖动函数 function shake(obj,attr,endFn){ //生成数组[20,-20,18,-18,16,-16,14,-14,12,-12,10,-10,8,-8,6,-6,4,-4,2,-2,0,-0] var arr=[]; for (var i=22;i>1;i--) { arr.push(i-2,-(i-2)); } obj.num=0; var num=parseInt(getStyle(obj,attr)); obj.timer=setInterval(function(){ var attr1=num+arr[obj.num]; if(obj.num>arr.length-1){ clearInterval(obj.timer); obj.num=0; if(endFn){ endFn(); } } obj.style[attr]=attr1+"px"; obj.num++; },30) } //获得元素样式函数 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle(attr); }else{ return getComputedStyle(obj)[attr]; } } //补零函数 function zero(n){ if(n<10){ return n="0"+n; }else{ return n=""+n; } }