網(wǎng)頁實(shí)時(shí)顯示服務(wù)器時(shí)間和javscript自運(yùn)行時(shí)鐘
更新時(shí)間:2014年06月09日 17:31:25 作者:
如果每秒通過ajax加載服務(wù)器時(shí)間的話,就會(huì)產(chǎn)生大量的請(qǐng)求,于是打算使用js 來解決這個(gè)需求
最近項(xiàng)目網(wǎng)頁需要實(shí)時(shí)顯示服務(wù)器時(shí)間,如果每秒通過ajax加載服務(wù)器時(shí)間的話,就會(huì)產(chǎn)生大量的請(qǐng)求。
于是設(shè)計(jì)了“javscript自運(yùn)行時(shí)鐘” 和 "ajax加載服務(wù)器時(shí)間" 相結(jié)合的形式來顯示服務(wù)器時(shí)間?!癹avscript自運(yùn)行時(shí)鐘” 以某初始時(shí)間為起點(diǎn)自動(dòng)運(yùn)行,"ajax加載服務(wù)器時(shí)間" 每60s將服務(wù)器的時(shí)間給“javscript自運(yùn)行時(shí)鐘” 更新。
javscript自運(yùn)行時(shí)鐘:
/*!
* File: sc_clock.js
* Version: 1.0.0
* Author: LuLihong
* Date: 2014-06-06
* Desc: 自動(dòng)運(yùn)行的時(shí)鐘
*
* 版權(quán):開源,隨便使用,請(qǐng)保持頭部。
*/
/**
* 格式化輸出
* @returns
*/
String.prototype.format = function() {
var args = arguments;
return this.replace(/\{(\d+)\}/g, function(m, i){return args[i];});
};
/**
* 轉(zhuǎn)化為數(shù)字
* @returns
*/
String.prototype.toInt = function(defaultV) {
if (this === "" || !(/^\d+$/.test(this))) return defaultV;
return parseInt(this);
};
window.scClock =
{
year : 2014,
month : 1,
day : 1,
hour : 0,
minute : 0,
second : 0,
isRunning : false,
/**
* 顯示時(shí)間的函數(shù),調(diào)用者在調(diào)用startup函數(shù)時(shí)傳入。
*/
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;
},
/**
* 初始化時(shí)間:時(shí)間格式:2014-06-09 11:30:30
*/
updateTime : function(time) {
var arr = 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);
},
/**
* 更新時(shí)間:時(shí)間格式:2014-06-09 11:30:30
*/
updateTime : function(time) {
var arr = 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);
},
/**
* 結(jié)束
*/
shutdown : function() {
if (!this.isRunning) return;
this.isRunning = false;
},
/**
* 獲取時(shí)間
*/
getDateTime : function() {
var fmtString = "{0}-{1}-{2} {3}:{4}:{5}";
var sMonth = (this.month < 10) ? ("0" + this.month) : this.month;
var sDay = (this.day < 10) ? ("0" + this.day) : this.day;
var sHour = (this.hour < 10) ? ("0" + this.hour) : this.hour;
var sMinute = (this.minute < 10) ? ("0" + this.minute) : this.minute;
var sSecond = (this.second < 10) ? ("0" + this.second) : this.second;
return fmtString.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) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12: {
if (this.day > 31) {
this.day = 1;
this.month++;
}
break;
}
case 4:
case 6:
case 9:
case 11: {
if (this.day > 30) {
this.day = 1;
this.month++;
}
break;
}
case 2: {
if (this.isLeapYear()) {
if (this.day > 29) {
this.day = 1;
this.month++;
}
} else if (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);
},
/**
* 檢測(cè)是否為閏年: 判斷閏年的規(guī)則是,能被4整除,但能被100整除的不是閏年,能被400整除為閏年.
*/
isLeapYear : function() {
if (this.year % 4 == 0) {
if (this.year % 100 != 0) return true;
if (this.year % 400 == 400) return true;
}
return false;
}
};
調(diào)用代碼:
/**
* 開始系統(tǒng)時(shí)間
*/
function startupClock() {
if (window.scClock) {
window.scClock.startup(function(time){
$("#currTime").text(time);
});
}
}
/**
* 加載系統(tǒng)時(shí)間
*/
function loadSystemTime() {
var jsonData = {
"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顯示代碼:
<span id="currTime"></span>
于是設(shè)計(jì)了“javscript自運(yùn)行時(shí)鐘” 和 "ajax加載服務(wù)器時(shí)間" 相結(jié)合的形式來顯示服務(wù)器時(shí)間?!癹avscript自運(yùn)行時(shí)鐘” 以某初始時(shí)間為起點(diǎn)自動(dòng)運(yùn)行,"ajax加載服務(wù)器時(shí)間" 每60s將服務(wù)器的時(shí)間給“javscript自運(yùn)行時(shí)鐘” 更新。
javscript自運(yùn)行時(shí)鐘:
復(fù)制代碼 代碼如下:
/*!
* File: sc_clock.js
* Version: 1.0.0
* Author: LuLihong
* Date: 2014-06-06
* Desc: 自動(dòng)運(yùn)行的時(shí)鐘
*
* 版權(quán):開源,隨便使用,請(qǐng)保持頭部。
*/
/**
* 格式化輸出
* @returns
*/
String.prototype.format = function() {
var args = arguments;
return this.replace(/\{(\d+)\}/g, function(m, i){return args[i];});
};
/**
* 轉(zhuǎn)化為數(shù)字
* @returns
*/
String.prototype.toInt = function(defaultV) {
if (this === "" || !(/^\d+$/.test(this))) return defaultV;
return parseInt(this);
};
window.scClock =
{
year : 2014,
month : 1,
day : 1,
hour : 0,
minute : 0,
second : 0,
isRunning : false,
/**
* 顯示時(shí)間的函數(shù),調(diào)用者在調(diào)用startup函數(shù)時(shí)傳入。
*/
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;
},
/**
* 初始化時(shí)間:時(shí)間格式:2014-06-09 11:30:30
*/
updateTime : function(time) {
var arr = 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);
},
/**
* 更新時(shí)間:時(shí)間格式:2014-06-09 11:30:30
*/
updateTime : function(time) {
var arr = 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);
},
/**
* 結(jié)束
*/
shutdown : function() {
if (!this.isRunning) return;
this.isRunning = false;
},
/**
* 獲取時(shí)間
*/
getDateTime : function() {
var fmtString = "{0}-{1}-{2} {3}:{4}:{5}";
var sMonth = (this.month < 10) ? ("0" + this.month) : this.month;
var sDay = (this.day < 10) ? ("0" + this.day) : this.day;
var sHour = (this.hour < 10) ? ("0" + this.hour) : this.hour;
var sMinute = (this.minute < 10) ? ("0" + this.minute) : this.minute;
var sSecond = (this.second < 10) ? ("0" + this.second) : this.second;
return fmtString.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) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12: {
if (this.day > 31) {
this.day = 1;
this.month++;
}
break;
}
case 4:
case 6:
case 9:
case 11: {
if (this.day > 30) {
this.day = 1;
this.month++;
}
break;
}
case 2: {
if (this.isLeapYear()) {
if (this.day > 29) {
this.day = 1;
this.month++;
}
} else if (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);
},
/**
* 檢測(cè)是否為閏年: 判斷閏年的規(guī)則是,能被4整除,但能被100整除的不是閏年,能被400整除為閏年.
*/
isLeapYear : function() {
if (this.year % 4 == 0) {
if (this.year % 100 != 0) return true;
if (this.year % 400 == 400) return true;
}
return false;
}
};
調(diào)用代碼:
復(fù)制代碼 代碼如下:
/**
* 開始系統(tǒng)時(shí)間
*/
function startupClock() {
if (window.scClock) {
window.scClock.startup(function(time){
$("#currTime").text(time);
});
}
}
/**
* 加載系統(tǒng)時(shí)間
*/
function loadSystemTime() {
var jsonData = {
"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顯示代碼:
復(fù)制代碼 代碼如下:
<span id="currTime"></span>
相關(guān)文章
對(duì)Web開發(fā)中前端框架與前端類庫的一些思考
這篇文章主要介紹了對(duì)Web開發(fā)中前端框架與前端類庫的一些思考,本文講解了前端框架的理解誤區(qū)、前端框架與前端類庫的區(qū)別、前端MVC框架思想等內(nèi)容,需要的朋友可以參考下2015-03-03
uniapp小程序使用高德地圖api實(shí)現(xiàn)路線規(guī)劃的示例代碼
路線規(guī)劃常用于出行路線的提前預(yù)覽,我們提供4種類型的路線規(guī)劃,分別為:駕車、步行、公交和騎行,滿足各種的出行場景,這篇文章主要介紹了uniapp小程序使用高德地圖api實(shí)現(xiàn)路線規(guī)劃,需要的朋友可以參考下2023-01-01
輸入自動(dòng)提示搜索提示功能的使用說明:sugggestion.txt
該js文件中的代碼實(shí)現(xiàn)了[輸入自動(dòng)搜索提示]功能,如百度、google搜索框中輸入一些字符會(huì)以下拉列表形式給出一些提示,提高了用戶體驗(yàn)2013-09-09
用javascript實(shí)現(xiàn)計(jì)算兩個(gè)日期的間隔天數(shù)
用javascript實(shí)現(xiàn)計(jì)算兩個(gè)日期的間隔天數(shù)...2007-08-08
prototype與jquery下Ajax實(shí)現(xiàn)的差別
Ajax技術(shù)在web中應(yīng)用的相當(dāng)廣泛,最近項(xiàng)目需要用到Ajax,由于主站所用的是Jquey,而某個(gè)欄目的開發(fā)用的是prototype,這樣一來就必須對(duì)JS代碼做調(diào)整了。2009-09-09
js如何實(shí)現(xiàn)設(shè)計(jì)模式中的模板方法
都知道在js中如果定義兩個(gè)相同名稱的方法,前一個(gè)方法就會(huì)被后一個(gè)方法覆蓋掉,使用此特點(diǎn)就可以實(shí)現(xiàn)模板方法,感興趣的朋友可以了解下本文哈2013-07-07
JS中JSON對(duì)象和String之間的互轉(zhuǎn)及處理技巧
JSON:JavaScript 對(duì)象表示法(JavaScript Object Notation),其實(shí)JSON就是一個(gè)JavaScript的對(duì)象(Object)而已。接下來通過本文給大家介紹JS中JSON對(duì)象和String之間的互轉(zhuǎn)及處理技巧,需要的朋友一起學(xué)習(xí)吧2016-04-04
bootstrap實(shí)現(xiàn)嵌套模態(tài)框的實(shí)例代碼
這篇文章主要介紹了bootstrap實(shí)現(xiàn)嵌套模態(tài)框的實(shí)例代碼,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01

