日期:2014-05-17  浏览次数:20849 次

请问这个限时抢购的 倒计时效果如何实现呢?
就是从数据库从提取商品记录 (抢购结束时间均为当天24:00) 一个倒计时的效果很容易实现,但是每个商品记录后面都显示这个倒计时效果就不会了 效果如http://www.newegg.com.cn/Products/Countdown.aspx 后每个产品后面的都跟个倒计时 
及 即 
  产品名称 所剩时间(倒计时) 


谢谢,在线等

------解决方案--------------------
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id='divs'>
<div>商品A  <span></span></div>
<br>
<div>商品b  <span></span></div>
<br>
<div>商品C  <span></span></div>
<br>
<div>商品D  <span></span></div>
</div>
<div id='CountMsg'></div>
<script language="JavaScript"> 
function GetRTime(){ 
var EndTime= new Date("2/11/2009"); //截止时间(月 日 年) 
var NowTime = new Date(); 
var nMS =EndTime.getTime() - NowTime.getTime(); 
var nD =Math.floor(nMS/(1000 * 60 * 60 * 24)); 
var nH=Math.floor(nMS/(1000*60*60)) % 24; 
var nM=Math.floor(nMS/(1000*60)) % 60; 
var nS=Math.floor(nMS/1000) % 60; 
var Remain=document.getElementById("divs").getElementsByTagName('SPAN');
if(nD>= 0){ 
for(var i=0;i<Remain.length;i++){
Remain[i].innerHTML=nD+'天'+nH+'小时'+nM+'分'+nS+'秒'; 
}

else { 
document.getElementById("CountMsg").innerHTML="时已过!"; 


setTimeout("GetRTime()",1000); 

window.onload=GetRTime; 
</script>
</BODY>
</HTML>
------解决方案--------------------
你也可以用
setInterval,不一定用setTimeout

比如这样
JScript code

function GetRTime(datevule,id){ 
var EndTime= new Date(datevule); //截止时间(月 日 年) 
var NowTime = new Date(); 
var nMS =EndTime.getTime() - NowTime.getTime(); 
var nD =Math.floor(nMS/(1000 * 60 * 60 * 24)); 
var nH=Math.floor(nMS/(1000*60*60)) % 24; 
var nM=Math.floor(nMS/(1000*60)) % 60; 
var nS=Math.floor(nMS/1000) % 60; 
if(nD>= 0){ 
document.getElementById(id+"D").innerHTML=nD; 
document.getElementById(id+"H").innerHTML=nH; 
document.getElementById(id+"M").innerHTML=nM; 
document.getElementById(id+"S").innerHTML=nS; 
} 
else { 
document.getElementById(id+"Msg").innerHTML="时已过!"; 
} 
} 
setInterval("GetRTime("2/11/2009","Remain")",1000);
setInterval("GetRTime("3/11/2009","Rebody")",1000);