<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin: 0;padding: 0}
ul {list-style: none;}
img {border: none;display: block;outline: none;}
a {text-decoration: none;outline: none;blr:express(this.onFocus=this.blur());}
#box {margin: 20px 30px}
#list li {width: 187px;height: 480px;float: left;margin-right: 20px;background: url(img/none.gif) 0 90px no-repeat;}
#list li #time {width: 187px;height: 30px;text-align: center;line-height: 30px;font-size: 12px;}
#list li a {display: block;width: 187px;height: 340px;position: relative;left: 0;top: 0}
#list li #inf {width: 187px;height: 50px;}
#inf span {color: red;font-size: 24px;margin-right: 10px}
#list li #btn {width: 187px;height: 30px;border: none;font-size: 18px;cursor: pointer; }
#btn1 {width: 80px;height: 30px;border: none;}
#setTime {width: 185px;height: 28px;}
</style>
<script type="text/javascript" src="startMove.js"></script>
<script type="text/javascript">
window.onload=function(){
var aList=document.getElementById('list');
var aLi=aList.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
fn(aLi[i]);
};
function fn(obj){
var aInp=obj.getElementsByTagName('input');
var p=obj.getElementsByTagName('p')[0];
var img=obj.getElementsByTagName('a')[0];
var oTimer=null;
var onoff=true;
aInp[1].onclick=function(){
clearInterval(oTimer)
getTime();
if (onoff) {
oTimer=setInterval(getTime,1000);
}else{
return;
};
}
function getTime(){
var val=aInp[0].value;
var newDate=new Date(val)
var nowDate=new Date();
var t=Math.floor((newDate-nowDate)/1000);
var iDate=Math.floor(t/86400);
var iH=Math.floor(t%86400/3600);
var iM=Math.floor(t%86400%3600/60);
var iS=Math.floor(t%60);
if (t>=0) {
var str=toZero(iDate)+'天'+toZero(iH)+'小时'+toZero(iM)+'分钟'+toZero(iS)+'秒';
p.innerHTML='还剩'+str;
}else{
clearInterval(oTimer);
p.innerHTML='不好意思,已售罄';
aInp[2].disabled=true;
shake(img,'left',function(){
startMove(img,{top:240,opacity:0},function(){
onoff=false;
})
})
};
}
function shake(oImg,attr,endFn){
var iCur=parseInt(getStyle(oImg,attr));
var len=18;
var arr=[];
var num=0;
for (var i = 18; i >0; i-=2) {
arr.push(i,-i);
};
arr.push(0);
oImg.shakeTime=setInterval(function(){
oImg.style[attr]=iCur+arr[num]+'px';
num++;
if (num==arr.length) {
clearInterval(oImg.shakeTime);
oImg.style[attr]=iCur+'px';
endFn && endFn();
};
},30)
}
}
}
function toZero(num){
if ( num < 10 ) {
return '0'+num;
}else{
return ''+num;
};
}
</script>
</head>
<body>
<div id="box">
<ul id="list">
<li>
<input type="text" id="setTime" value="May 8,2015 12:12:12" />
<input type="button" id="btn1" value="确定">
<p id="time">还剩8小时:00分钟</p>
<a href="javascript:;"><img src="img/aa.gif" /></a>
<p id="inf"><span>¥59.9</span>时尚格子衬衫</p>
<input type="button" value="立即抢购" id="btn" onFocus="this.blur()"/>
</li>
<li>
<input type="text" id="setTime" value="May 8,2015 12:12:12" />
<input type="button" id="btn1" value="确定">
<p id="time">还剩8小时:00分钟</p>
<a href="javascript:;"><img src="img/aa.gif" /></a>
<p id="inf"><span>¥59.9</span>时尚格子衬衫</p>
<input type="button" value="立即抢购" id="btn" onFocus="this.blur()"/>
</li>
<li>
<input type="text" id="setTime" value="May 8,2015 12:12:12" />
<input type="button" id="btn1" value="确定">
<p id="time">还剩8小时:00分钟</p>
<a href="javascript:;"><img src="img/aa.gif" /></a>
<p id="inf"><span>¥59.9</span>时尚格子衬衫</p>
<input type="button" value="立即抢购" id="btn" onFocus="this.blur()"/>
</li>
</ul>
</div>
</body>
</html>
function startMove(obj,json,endFn){
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bBtn=true;
for(var attr in json){
var iCur=0;
if (attr=='opacity') {
iCur=Math.round(parseFloat(getStyle(obj,attr))*100)
}else{
iCur=parseInt(getStyle(obj,attr));
};
var iSpeed=(json[attr]-iCur)/6;
iSpeed=iSpeed>0? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != json[attr]) bBtn=false;
if (attr=='opacity') {
obj.style.opacity=(iCur+iSpeed)/100;
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
}else{
obj.style[attr]=iCur+iSpeed+'px';
};
}
if (bBtn) {
clearInterval(obj.timer);
endFn && endFn();
};
},30)
}
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
}