<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时抢购商品</title>
<style>
html, body, ul {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
h1 {
font-size: 14px;
}
ul {
font-size: 0;
}
li {
list-style: none;
background: url(img/down.png) 0 0 no-repeat;
width: 162px;
height: 279px;
display: inline-block;
border-top: 1px solid #A0A0A4;
position: relative;
}
.box {
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 152px;
height: 269px;
padding: 5px;
margin: 0 2px;
}
#showcase li:first-child .box {
margin-left: 0;
}
.box img {
width: 100px;
height: 80px;
margin: 20px;
}
.box input[type="text"] {
width: 106px;
height: 16px;
background: #DED6E7;
color: #522121;
font-size: 12px;
border: 1px solid #EFEFEF;
padding: 2px;
}
.box input[type="button"] {
color: #847373;
background: #fff;
border: none;
width: 36px;
font-size: 14px;
font-weight: bold;
}
.box .timeoff {
font-size: 14px;
color: #A0A0A4;
text-align: center;
}
.box p {
font-size: 14px;
margin-bottom: 0;
}
.box span {
color: #BDADBD;
font-weight: bold;
}
.box .price {
color: #BD214A;
font-weight: bold;
}
table {
width: 648px;
background: #DED6E7;
text-align: center;
font-size: 14px;
color: #522121;
font-weight: bold;
margin-top: 30px;
border-collapse: collapse;
}
td {
padding: 10px 0;
border-top: 4px solid #fff;
border-bottom: 4px solid #fff;
}
td img {
width: 80px;
height: 51px;
border: 1px solid #8C4A4A;
margin-left: 120px;
}
tbody tr td:first-child {
width: 180px;
padding: 0 10px;
color: #000;
font-weight: normal;
}
tbody div {
width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#total {
font-weight: bold;
font-size: 20px;
}
#total .all {
color: #BD214A;
}
</style>
<script type="text/javascript" src="float.js"></script>
<script type="text/javascript">
window.onload = function ()
{
var oul = document.getElementById('showcase');
var odiv = oul.getElementsByTagName('div');
var otable = document.getElementsByTagName('tbody')[0];
var ototal = document.getElementById('total').getElementsByTagName('span')[0];
for ( var i = 0; i < odiv.length; i++)
{
fntime(odiv[i]);
}
function fntime (box)
{
var obtn = box.getElementsByTagName('input')[1];
obtn.onclick = function ()
{
var inew = new Date(box.getElementsByTagName('input')[0].value);
var op = box.getElementsByTagName('p')[0];
var op2 = box.getElementsByTagName('p')[1].innerHTML;
var oimg = box.getElementsByTagName('img')[0];
var price = box.getElementsByTagName('span')[2].innerHTML;
clearInterval(box.timer);
box.timer = setInterval(function ()
{
var inow = new Date();
var t = Math.floor((inew - inow)/1000);
if( t >= 0 )
{
op.innerHTML = '剩余' + Math.floor(t/86400) + '天' + Math.floor(t%86400/3600) + '时' + Math.floor(t%86400%3600/60) + '分' + t%60 + '秒';
}
else
{
shake(box,'left',function()
{
domove(box,'top',10,50,279);
opacity(box,10,0,50,function()
{
box.style.display = 'none';
otable.innerHTML += '<tr><td>'+ op2+'</td><td>'+price+'</td><td><img src= "'+oimg.src+'"></td></tr>';
ototal.innerHTML = parseFloat(ototal.innerHTML)+parseFloat(price);
})
})
}
},1000);
};
}
};
</script>
</head>
<body>
<h1>限购时间</h1>
<ul id="showcase">
<li>
<div class="box">
<input type="text" value="August 28, 2014 21:56:0">
<input type="button" value="确定">
<p class="timeoff">剩余00天00时00分00秒</p>
<img src="img/5-1.jpg" />
<p>疯狂599，美的爆款隐藏式面板下拉门微波炉</p>
<p><span>抢购价：</span><span class="price">￥</span><span class="price">599.00</span></p>
</div>
</li>
<li>
<div class="box">
<input type="text" value="August 28, 2014 21:56:0">
<input type="button" value="确定">
<p class="timeoff">剩余00天00时00分00秒</p>
<img src="img/5-2.jpg" />
<p>疯狂3299，美的爆款隐藏式面板下拉门微波炉</p>
<p><span>抢购价：</span><span class="price">￥</span><span class="price">3299.00</span></p>
</div>
</li>
<li>
<div class="box">
<input type="text" value="August 28, 2014 21:56:0">
<input type="button" value="确定">
<p class="timeoff">剩余00天00时00分00秒</p>
<img src="img/5-3.jpg" />
<p>疯狂1块钱，美的爆款隐藏式面板下拉门微波炉</p>
<p><span>抢购价：</span><span class="price">￥</span><span class="price">1.00</span></p>
</div>
</li>
<li>
<div class="box">
<input type="text" value="August 28, 2014 21:56:0">
<input type="button" value="确定">
<p class="timeoff">剩余00天00时00分00秒</p>
<img src="img/5-4.jpg" />
<p>疯狂168，美的爆款隐藏式面板下拉门微波炉</p>
<p><span>抢购价：</span><span class="price">￥</span><span class="price">168.00</span></p>
</div>
</li>
</ul>
<table>
<thead>
<tr>
<td width="200px">商品名称</td>
<td width="150px">价钱</td>
<td width="298px"></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p id="total">
总价：<span class="all">0</span>元
</p>
</body>
</html>
function getstyle(obj,attr)
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
function domove (obj,attr,step,frequency,target,endfn)
{
step = parseInt(getstyle(obj,attr))<target?step:-step;
clearInterval(obj.timer);
obj.timer = setInterval( function ()
{
var speed = parseInt(getstyle(obj,attr)) + step;
if(step>0&&speed>target||step<0&&speed<target)
{
speed = target;
}
obj.style[attr] = speed + 'px';
if( speed == target )
{
clearInterval(obj.timer);
endfn&&endfn();
}
},frequency);
};
function opacity(obj,step,target,frequency,endfn)
{
var currentOpacity = getstyle(obj,'opacity') * 100;
step = currentOpacity < target?step:-step;
clearInterval(obj.opacity)
obj.opacity = setInterval (function ()
{
currentOpacity = getstyle(obj,'opacity') *100;
var nextOpacity = currentOpacity + step;
if(step>0&& nextOpacity>target || step<0&& nextOpacity < target )
{
nextOpacity = target;
}
obj.style.opacity = nextOpacity/100;
obj.style.filter = 'alpha(opacity:)' + nextOpacity +')';
if(nextOpacity == target )
{
clearInterval(obj.opacity);
endfn&&endfn();
}
},frequency);
};
function shake(obj,attr,endfn)
{
if( obj.shaked ) { return; }
obj.shaked = true;
var num = 0;
var timer = null;
var arr = [];
var pos = parseInt(getstyle(obj,attr));
for( var i = 20; i > 0; i-=2 )
{
arr.push(i,-i);
}
arr.push(0);
clearInterval(obj.shake);
obj.shake = setInterval(function ()
{
obj.style[attr] = pos + arr[num] +'px';
num++;
if(num==arr.length)
{
clearInterval(obj.shake);
endfn&&endfn();
obj.shaked = false;
}
},50);
};
来源：https://www.cnblogs.com/mayufo/p/4185923.html