javascript

使用javascript实现抢购商品倒计时—第一篇技术文章

公司在网上卖葡萄酒,最近在搞一个活动:天天抢购,其中在首页展现部分抢购的酒品,同时在标签上显示离抢购结束时间还有多有时间。

我想到用javascript来实现,在网上用google搜索了一下,找到以下合适的文章:

http://topic.csdn.net/t/20030423/14/1697850.html

其主要代码如下:

<html>
<head>
<title>时间显示</title>
</head>
<body   onload=”time()”>
<div   id=meizz>
<script   language=javascript><!–
function   time()
{
var   now   =   new   Date();
var   h   =   (now.getHours()       >   9)   ?   now.getHours()       :   “0″   +   now.getHours();
var   m   =   (now.getMinutes()   >   9)   ?   now.getMinutes()   :   “0″   +   now.getMinutes();
var   s   =   (now.getSeconds()   >   9)   ?   now.getSeconds()   :   “0″   +   now.getSeconds();
var   noon=   (now.getHours()       >   12)?   “PM”   :”AM”;
var     myclock=”<center><font   color=red>现在是:”+h+”:”+m+”:”+s+”:”+”   “+noon+”</font></center>”;
document.all.meizz.innerHTML   =   myclock;   <!–显示现在的时间–>
setTimeout(“time()”,1000)   ;   <!–setTimeout函数可以让时间数字不停地跳动–>
}
–>
</script>
</body>
</html>

我参考了网上的文章,把功能实现了。代码如下:

<script language=”javascript” >
window.onload=function()
{
leftTime();
}

function leftTime()
{
var now_time=new Date();
var this_year=now_time.getYear();
var this_month=now_time.getMonth();
var this_day=now_time.getDate()
var end_day =new Date(this_year,this_month,this_day,18,0,0); //结束时间
var hours=now_time.getHours();
var minutes=now_time.getMinutes();
if(9<=hours<18){
var left_time=end_day.getTime()-now_time.getTime();
var left_hours=Math.floor(left_time/(1000*60*60))%24;
var left_minutes=Math.floor(left_time/(1000*60))%60;
var left_seconds=Math.floor(left_time/1000)%60;
document.getElementById(“qianggou_lefttime”).innerHTML=”离抢购结束时间(18:00)还有”+left_hours+”小时”+left_minutes+”分”+left_seconds+”秒”;

setTimeout(“leftTime()”, 1000);

}
}

</script>
</head>

<body>
<div id=”qianggou_lefttime”></div>
</body>

效果如下:

javascript-count-down 倒计时

javascript-count-down 倒计时

不过该代码还没有针对FireFox优化,在FireFox会出现负数。

因为javascript是客户端技术,所用到的时间是用户电脑的本地时间,所以如果用户的电脑时间不正确,同样倒计时会不准确。

第一篇文章,还不知道怎样写。

加了很多代码,大家可以把代码拷贝到Dreamweaver中,新建文档就可以测试代码了。

END