网页实时显示服务器时间和javscript自运行时钟
于是设计了“javscript自运行时钟”和"ajax加载服务器时间"相结合的形式来显示服务器时间。“javscript自运行时钟”以某初始时间为起点自动运行,"ajax加载服务器时间"每60s将服务器的时间给“javscript自运行时钟”更新。
javscript自运行时钟:
/*! *File:sc_clock.js *Version:1.0.0 *Author:LuLihong *Date:2014-06-06 *Desc:自动运行的时钟 * *版权:开源,随便使用,请保持头部。 */ /** *格式化输出 *@returns */ String.prototype.format=function(){ varargs=arguments; returnthis.replace(/\{(\d+)\}/g,function(m,i){returnargs[i];}); }; /** *转化为数字 *@returns */ String.prototype.toInt=function(defaultV){ if(this===""||!(/^\d+$/.test(this)))returndefaultV; returnparseInt(this); }; window.scClock= { year:2014, month:1, day:1, hour:0, minute:0, second:0, isRunning:false, /** *显示时间的函数,调用者在调用startup函数时传入。 */ showFunc:function(){}, /** *初始化 */ init:function(y,mon,d,h,min,s){ this.year=y; this.month=mon; this.day=d; this.hour=h; this.minute=min; this.second=s; }, /** *初始化时间:时间格式:2014-06-0911:30:30 */ updateTime:function(time){ vararr=time.split(/[\-\\:]/); if(arr.length!=6)return; this.year=arr[0].toInt(2014); this.month=arr[1].toInt(1); this.day=arr[2].toInt(1); this.hour=arr[3].toInt(0); this.minute=arr[4].toInt(0); this.second=arr[5].toInt(0); }, /** *更新时间:时间格式:2014-06-0911:30:30 */ updateTime:function(time){ vararr=time.split(/[\-\\:]/); if(arr.length!=6)return; this.year=arr[0].toInt(2014); this.month=arr[1].toInt(1); this.day=arr[2].toInt(1); this.hour=arr[3].toInt(0); this.minute=arr[4].toInt(0); this.second=arr[5].toInt(0); }, /** *开始 */ startup:function(func){ if(this.isRunning)return; this.isRunning=true; this.showFunc=func; window.setTimeout("scClock.addOneSec()",1000); }, /** *结束 */ shutdown:function(){ if(!this.isRunning)return; this.isRunning=false; }, /** *获取时间 */ getDateTime:function(){ varfmtString="{0}-{1}-{2}{3}:{4}:{5}"; varsMonth=(this.month<10)?("0"+this.month):this.month; varsDay=(this.day<10)?("0"+this.day):this.day; varsHour=(this.hour<10)?("0"+this.hour):this.hour; varsMinute=(this.minute<10)?("0"+this.minute):this.minute; varsSecond=(this.second<10)?("0"+this.second):this.second; returnfmtString.format(this.year,sMonth,sDay,sHour,sMinute,sSecond); }, /** *增加一秒 */ addOneSec:function(){ this.second++; if(this.second>=60){ this.second=0; this.minute++; } if(this.minute>=60){ this.minute=0; this.hour++; } if(this.hour>=24){ this.hour=0; this.day++; } switch(this.month){ case1: case3: case5: case7: case8: case10: case12:{ if(this.day>31){ this.day=1; this.month++; } break; } case4: case6: case9: case11:{ if(this.day>30){ this.day=1; this.month++; } break; } case2:{ if(this.isLeapYear()){ if(this.day>29){ this.day=1; this.month++; } }elseif(this.day>28){ this.day=1; this.month++; } break; } } if(this.month>12){ this.month=1; this.year++; } this.showFunc(this.getDateTime()); if(this.isRunning) window.setTimeout("scClock.addOneSec()",1000); }, /** *检测是否为闰年:判断闰年的规则是,能被4整除,但能被100整除的不是闰年,能被400整除为闰年. */ isLeapYear:function(){ if(this.year%4==0){ if(this.year%100!=0)returntrue; if(this.year%400==400)returntrue; } returnfalse; } };
调用代码:
/** *开始系统时间 */ functionstartupClock(){ if(window.scClock){ window.scClock.startup(function(time){ $("#currTime").text(time); }); } } /** *加载系统时间 */ functionloadSystemTime(){ varjsonData={ "ajaxflag":1, "mod":"time_mod" }; $.getJSON(ajax_sc_url,jsonData,function(data){ if(data.code==0){ if(window.scClock) window.scClock.updateTime(data.time); } }); setTimeout("loadSystemTime()",60000); }
html显示代码:
<spanid="currTime"></span>