<!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; 162px; height: 279px; display: inline-block; border-top: 1px solid #A0A0A4; position: relative; } .box { position: absolute; top: 0; left: 0; background: #fff; 152px; height: 269px; padding: 5px; margin: 0 2px; } #showcase li:first-child .box { margin-left: 0; } .box img { 100px; height: 80px; margin: 20px; } .box input[type="text"] { 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; 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 { 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 { 80px; height: 51px; border: 1px solid #8C4A4A; margin-left: 120px; } tbody tr td:first-child { 180px; padding: 0 10px; color: #000; font-weight: normal; } tbody div { 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); };