仿照淘宝的倒计时

2012-11-04

模仿淘宝的倒计时!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//ENhtmlheadtitle秒

模仿淘宝的倒计时
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>秒杀倒计时</title><script>
//取得剩余秒杀时间
function getLeftTime(){
var productMsTimeStr = "20101203093030"//从商品信息中获得
var dbTimeStr = "20101203093000"//
         //这里要改成类似于：var dbTimeStr = <%=a.get()%>
var productMsTime = parseSecKillDateStr(productMsTimeStr);
var dbTime = parseSecKillDateStr(dbTimeStr);

var leftTime = (productMsTime.getTime()-dbTime.getTime())/1000;

return leftTime;
}
//解析时间字符串,返回js Date对象
function parseSecKillDateStr(str){
var yearStr = str.substring(0,4);
var monthStr = str.substring(4,6);
var dateStr = str.substring(6,8);
var hourStr = str.substring(8,10);
var minuteStr = str.substring(10,12);
var secondStr = str.substring(12,14);
var theDate = new Date();
theDate.setFullYear(yearStr);
theDate.setMonth(monthStr-1);
theDate.setDate(dateStr);
theDate.setHours(hourStr);
theDate.setMinutes(minuteStr);
theDate.setSeconds(secondStr);

return theDate;
}
function countDown()   //根据剩余的时间改变页面显示
{
      var skNoPic = new Array("<img src='sk_no0.PNG'/>",
"<img src='sk_no1.PNG'/>",
"<img src='sk_no2.PNG'/>",
"<img src='sk_no3.PNG'/>",
"<img src='sk_no4.PNG'/>",
"<img src='sk_no5.PNG'/>",
"<img src='sk_no6.PNG'/>",
"<img src='sk_no7.PNG'/>",
"<img src='sk_no8.PNG'/>",
"<img src='sk_no9.PNG'/>");
   var timer = setInterval(function()
   {
       var maxtime = getLeftTime();//如果实现中使用：
        //var dbTimeStr = <%=A.get()%>，A是static的。
        //实际上js不会每次都返回新的结果。
        //（a.get() 的返回结果是每秒钟都会变的）
       //如果想要让var dbTimeStr = <%=a.get()%>每次返回的结果不同，
       // 该怎么改？？       if(maxtime>=0){

         var hours = Math.floor(maxtime/360);
             var minutes = Math.floor(maxtime/60);
             var seconds = Math.floor(maxtime%60);



             var hourImgSrc1 = Math.floor(hours/10);
             var hourImgSrc2 = Math.floor(hours%10);

             var minutesImgSrc1 = Math.floor((minutes-hours*60)/10);
             var minutesImgSrc2 = Math.floor((minutes-hours*60)%10);

             var secondImgSrc1 = Math.floor(seconds/10);
             var secondImgSrc2 = Math.floor(seconds%10);

             msg ="<img src='sk_time.PNG'/>"
                 +skNoPic[hourImgSrc1]+"<img src='v_flush.JPG'/>"+skNoPic[hourImgSrc2]+"<img src='maohao.JPG'/>"
             +skNoPic[minutesImgSrc1]+"<img src='v_flush.JPG'/>"+skNoPic[minutesImgSrc2]+"<img src='maohao.JPG'/>"
             +skNoPic[secondImgSrc1]+"<img src='v_flush.JPG'/>"+skNoPic[secondImgSrc2];
             document.getElementById('timer1').innerHTML = msg;
             if(maxtime == 5*60) {document.getElementById('timer1').innerHTML ="注意，还剩5分钟！"}
             --maxtime;
             changeStatus(0);
        }else{
        clearInterval(timer);
        changeStatus(1);
            document.getElementById('tip').innerHTML = "可以秒杀了！";
            setTimeout("changeStatus(2)",5000);
        }
    }, 1000);


}

function changeStatus(flag){
var msButton = document.getElementById("msButton");
if(flag==0){
msButton.value="not started";
msButton.disabled=true;
}
if(flag==1){
msButton.value="ok";
msButton.disabled=false;
msButton.onclick=function(){
document.getElementById('tip').innerHTML = "秒杀请求发送成功！";
}
}
if(flag==2){
msButton.value="ms over";
msButton.disabled=true;
}
}

</script>

</head>

<body onload="countDown()">

<div id="timer1" style="color:red"></div>
<div id="tip" style="color:red"></div>
<input type="button" id="msButton" value="秒杀" onclick="" disabled/>
</body>
</html>

附件可预览效果！

热点排行

Web前端

仿照淘宝的倒计时