网页显示服务器时间和javscript自运行时钟

最近项目网页需要实时显示服务器时间,如果每秒通过ajax加载服务器时间的话,就会产生大量的请求。

于是设计了“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() {
	var args = arguments;
	return this.replace(/\{(\d+)\}/g, function(m, i){return args[i];});
};

/**
 * 转化为数字
 * @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,
	/**
	 * 显示时间的函数,调用者在调用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-09 11:30:30
	 */
	initTime	: 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);
	},
	
	/**
	 * 更新时间:时间格式: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);
	},
	
	/**
	 * 结束
	 */
	shutdown	: function() {
		if (!this.isRunning) return;
		this.isRunning = false;		
	},
	
	/**
	 * 获取时间
	 */
	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);
	},
	
	/**
	 * 检测是否为闰年: 判断闰年的规则是,能被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;
	}
	
};

调用代码:


/**
			 * 开始系统时间
			 */
			function startupClock() {
				if (window.scClock) {
					window.scClock.startup(function(time){
						$("#currTime").text(time);
					});
				}
			}
			/**
			 * 加载系统时间
			 */
			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>



        

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值