两种JS计时代码

2009年6月14日 | 分类: 学习笔记 | 标签: , ,

    为了便于计算萌萌的出生天数,想在本站加个记时栏,随手google了一下,发现基本上都是倒计时的代码,呵呵,简单的拿来把起始时间一颠倒,就变成我想要的正计时代码了。
    计时代码取当前时间有两种方式,一种是取客户端时间,这是最常见的一种方式,但如果客户端时间被修改了的话,记时就不准确了;另一种是取服务器的时间,这个不用担心客户端时间被修改,不过实现起来稍微麻烦一点。我这里使用的就是第二种方式,显示效果见侧边栏顶端。

两种方式代码分别记录如下:
1、取客户端时间

<p align=“center”>萌萌出生已经有:<br /><span id=“_lefttime” style=“color:red;font-size:18pt;”></span></p>
<SCRIPT LANGUAGE=“JavaScript”>
function _fresh()
{
var endtime=new Date(“May 10, 2009 12:25:00″);
var nowtime = new Date();
var leftsecond=parseInt((nowtime.getTime()-endtime.getTime())/1000);
if(leftsecond<0){leftsecond=0;}
__d=parseInt(leftsecond/3600/24);
__h=parseInt((leftsecond/3600)%24);
__m=parseInt((leftsecond/60)%60);
__s=parseInt(leftsecond%60);
document.getElementById(“_lefttime“).innerHTML=__d+”“+__h+”小时“+__m+”“+__s+”秒”;
}
_fresh()
setInterval(_fresh,1000);
</SCRIPT>

2、取服务器时间

<p align=“center”>今天是:<br /><span id=“WeekCounter” style=“color:red;font-size:12pt;”></span></p>
<p align=“center”>萌萌出生已经有:<br /><span id=“TimeCounter” style=“color:red;font-size:14pt;”></span></p>
<SCRIPT LANGUAGE=“JavaScript”>
<!–
if (window.ActiveXObject){
  http_request=new ActiveXObject(‘Microsoft.XMLHTTP’);
} else if (window.XMLHttpRequest) {
  http_request=new XMLHttpRequest();
}
http_request.open(‘HEAD’, ‘.’, false);//获取服务器时间,XHR不能跨域!!!
http_request.send(null);
var ServerDate = new Date(http_request.getResponseHeader(‘Date’));
var ClientDate= new Date();
var d=ClientDateServerDate;//计算时差,单位毫秒
/*定义开始时间*/
var year=2009;
var Mon=5;
var day=10;
var hour=12;
var minu=25;
var Second=0;
/*定义结束*/
var starttime = new Date(year,Mon1,day,hour,minu,Second);
//月份是从0-11,所以要减1才能得到当前月份
function clock()
{
  var today = new Date();
  today.setTime(today.getTime()d);//同步日期到服务器时间
  var leave=todaystarttime;
  if(leave > 0)
  {
    var timeString=“”;
    var day = Math.floor(leave / (1000 * 60 * 60 * 24));
    leave-=day*(1000 * 60 * 60 * 24);
    if(day>0)timeString+= “” + day + “天”
   
    var hour = Math.floor(leave / (1000 * 60 * 60));
    leave-=hour*(1000 * 60 * 60);
    if(hour>0)
    {
      if(timeString!=“”)timeString+=“”;
      timeString+= “” + hour + “小时”
    }
   
    var minute = Math.floor(leave / (1000 * 60));
    leave-=minute*(1000 * 60);
    if(minute>0)
    {
      if(timeString!=“”)timeString+=“”;
      timeString+= “” + minute + “分”
    }
   
    var second = Math.floor(leave / 1000);
    if(timeString!=“”)timeString+=“”;
    timeString+= “” + second + “秒”
    document.getElementById(“TimeCounter”).innerHTML = timeString;
  }
  else
  {
   document.getElementById(“TimeCounter”).innerHTML= “Time’s up!”;
//window.location.reload();
  }
  setTimeout(“clock()”, 1000);
}
clock();
var week;
date1=ServerDate.getDate();
month1=ServerDate.getMonth()+1;
year1=ServerDate.getYear();
if(ServerDate.getDay()==0) week=“星期天”
if(ServerDate.getDay()==1) week=“星期一”
if(ServerDate.getDay()==2) week=“星期二”
if(ServerDate.getDay()==3) week=“星期三”
if(ServerDate.getDay()==4) week=“星期四”
if(ServerDate.getDay()==5) week=“星期五”
if(ServerDate.getDay()==6) week=“星期六”
document.getElementById(“WeekCounter”).innerHTML= year1+“年”+month1+“月”+date1+“日”+“&nbsp;”+week;
//–>
</SCRIPT>

听取niuniuni同学的建议,小小更新了一下,加上了显示当前日期及星期,呵呵..