如何实现倒计时？来者有分，不食言！

<html>
<head>
<title>倒计时</title>
<style>
.time{color:#ffffff;font-family:verdana,geneva,helveticafont-size:9pt}
a:link{text-decoration:none;color:#000000}
a:active{text-decoration:none;color:#000000}
a:visited{text-decoration:none;color:#000000}
a:hover{text-decoration:none;color:#000000}
</style><script language="javascript">var time_now_client,time_end,time_server_client,timerID;time_end=new Date();
time_end=time_end.getTime() + 60000*100; //20分钟
time_now_client=new Date();
time_now_client=time_now_client.getTime();setTimeout("show_time()",1000);function show_time()
{
timer.innerHTML =time_server_client; var time_now,time_distance,str_time;
var int_hour,int_minute,int_second;
var time_now=new Date();
time_now=time_now.getTime();
time_distance=time_end-time_now;
if(time_distance>0)
{
int_hour=Math.floor(time_distance/3600000)
time_distance-=int_hour*3600000;
int_minute=Math.floor(time_distance/60000)
time_distance-=int_minute*60000;
int_second=Math.floor(time_distance/1000)

if(int_hour<10)
int_hour="0"+int_hour;
if(int_minute<10)
int_minute="0"+int_minute;
if(int_second<10)
int_second="0"+int_second;
str_time=int_hour+":"+int_minute+":"+int_second;
timer.innerHTML=str_time;
setTimeout("show_time()",1000);
}
else
{
timer.innerHTML ="over";
clearTimeout(timerID)
}
}
</script>
<style>
.time{color:#000000;font-family:verdana;font-size:9pt}
</style>
</head><BODY BGCOLOR=#FFFFFF topmargin=2 leftmargin=2>
<div id="Layer1" style="position:absolute; width:160px; height:187px; z-index:1">
<!-- begin calendar -->
  <table width=160 border=0 cellpadding=0 cellspacing=0>
    <tr> 
      <td colspan=3> </td>
    </tr>
    <tr> 
      <td width="47"> </td>
      <td background="images/mail_03.gif" width="67" valign="top">
        <table width=65 cellpadding=3 cellspacing=0 border=0>
          <tr> 
            <td align=center class="time">
              <a href="http://203.212.7.76:8000/Announcement.html" target=_blank><div id="timer" style="font-size:9pt;color:red"></div></a>
            </td>
          </tr>
        </table>
      </td>
      <td width="46"> </td>
    </tr>
    <tr> 
      <td colspan=3> </td>
    </tr>
  </table>
    <!-- end calendar -->
</div>
</BODY>
</HTML>

解决方案 »

  1.   

    楼上的, 光光一个倒计时那很容易的, 问题就是我将页面刷新一次, 计数又重新开始了, 所以你的代码也是有问题的.所以我从另外一个角度来解决这个问题, 在客户端可以用 cookie 来记时, 但同样对于稍有点WEB知识的人来说这根本就没用, 还是解决不了刷新重新计数的问题, 所以我设计了一个以服务器时间为基准的页面, 从服务器取时间所为基数, 这样, 客户端就做不了弊了.<html><head>
    <script language=javascript>
    //特别注明：北京时间是格林尼治标准时加八小时，因此我用的起始时间也是从八点起算的
    var secondServer = <%=DateDiff("s", "1970-01-01 08:00:00", Now())%>;
    var secondClient = parseInt(new Date().getTime()/1000);
    var secondSub    = secondServer - secondClient;         //两端时间秒差
    function meizzTime(n)
    {
       var mei = new Date();
       mei.setTime(mei.getTime() + n*1000);       //得到一个新的时间
       var h = (mei.getHours()   > 9) ? mei.getHours()   : "0" + mei.getHours();
       var m = (mei.getMinutes() > 9) ? mei.getMinutes() : "0" + mei.getMinutes();
       var s = (mei.getSeconds() > 9) ? mei.getSeconds() : "0" + mei.getSeconds();
       document.meizz.clock.value = h +":"+ m +":"+ s;
       setTimeout("meizzTime(secondSub)", 1000);
    }
    </script>
    <meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
    <meta http-equiv="refresh" content="100">
    <title>取服务器端时间（秒数）</title>
    </head><body onload="meizzTime(secondSub)">
    <form name=meizz><input name=clock size=8></form>
    </body></html>这段代码是得到服务器端时间的一个例子, 楼主可以将它放到页面里的一个隐藏 iframe 去,这个页面以100秒自动与服务器校对一次(刷新时间楼主可自定), 得到服务器端时间后再写到 parent 页面上去.
      

  2.   

    yes,the client only is not trustworthy.
      

  3.   


    呵啊， meizz(梅花雨) ，真是太好了，收藏备用！！！
      

  4.   

    meizz(梅花雨)的源代码为什么我看不到任何的效果？
      

  5.   

    倒计时？
    <html>
    <head>
    <script>
    var counter = 20
    var interval_id = setInterval("countdown()", 1000)
    function countdown()
    {
       status = counter--
       if(counter < 0)
       {
          clearInterval(interval_id)
          status = ""
       }
    }
    </script>
    </head><body>
    look downwards!
    <br>
    the number is count down in the status bar
    </body>
    </html>