商品倒计时

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;
}

//获取元素
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;
	}
}

posted @ 2017-11-28 16:21 carol72 阅读(189) 评论(0) 收藏举报

刷新页面返回顶部

carol72

商品倒计时

公告