公司在网上卖葡萄酒,最近在搞一个活动:天天抢购,其中在首页展现部分抢购的酒品,同时在标签上显示离抢购结束时间还有多有时间。
我想到用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>
效果如下:
不过该代码还没有针对FireFox优化,在FireFox会出现负数。
因为javascript是客户端技术,所用到的时间是用户电脑的本地时间,所以如果用户的电脑时间不正确,同样倒计时会不准确。
第一篇文章,还不知道怎样写。
加了很多代码,大家可以把代码拷贝到Dreamweaver中,新建文档就可以测试代码了。
END
