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{
660px;
margin: 20px auto;
}
h2{
font-size: 14px;
padding: 12px 0 5px;
border-bottom: 1px solid #9b999b;
}
#wareList li{
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{
120px;
height: 14px;
background: #deddde;
}
#wareList li img{
height: 168px;
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;
40%;
text-indent: 30px;
}
#list1 li{
background: #e2e0e2;
height: 55px;
line-height: 55px;
margin-top: 5px;
}
#list1 span{
display: inline-block;
}
#list1 .span1{
200px;
padding-left: 20px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#list1 .span2{
220px;
padding-left: 70px;
}
#list1 img{
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;
}
}