首页 > 网络编程 > javascript > 网页特效 > 时间日期 > js 限时抢购

js 模仿网上的限时抢购效果

2010-07-19 00:02:52 作者：

显示类似还剩 14小时52分15秒这样的效果，显示活动剩余多长时间就结束。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>抢购时间倒计时效果</title> 
<script language="javascript"> 
function $(element){ 
return document.getElementById(element); 
} 
//限时抢购 
var the_s=new Array(); 
function view_time(the_s_index,objid){

if(the_s[the_s_index]>=0){ 
var the_D=Math.floor((the_s[the_s_index]/3600)/24) 
var the_H=Math.floor((the_s[the_s_index]-the_D*24*3600)/3600); 
var the_M=Math.floor((the_s[the_s_index]-the_D*24*3600-the_H*3600)/60); 
var the_S=(the_s[the_s_index]-the_H*3600)%60; 
html = "还剩 "; 
//if(the_D!=0) html += the_D+"天"; 
if(the_D!=0 || the_H!=0) html += '<span class="hour">'+(the_H+(the_D*24))+"</span>小时"; 
if(the_D!=0 || the_H!=0 || the_M!=0) html += '<span class="minute">'+the_M+"</span>分"; 
html += '<span class="second">'+the_S+"</span>秒"; 
$(objid).innerHTML = html; 
the_s[the_s_index]--; 
}else{ 
$(objid).innerHTML = "已结束";

} 
} 
</script> 
</head> 
<body> 
<p class="time" id="xsq_2402"> 
还剩 <span class="hour">14</span>小时<span class="minute">49</span>分<span class="second">44</span>秒 
</p> 
<script language="javascript"> 
var startDate= new Date("2010/07/16 09:07:43"); 
var endDate= new Date("2010/07/17 00:00:00"); 
the_s[2402]=(endDate.getTime()-startDate.getTime())/1000; 
setInterval("view_time(2402,'xsq_2402')",1000); 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

js 模仿网上的限时抢购效果

您可能感兴趣的文章: