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


Posted in Javascript onJune 09, 2014

最近项目网页需要实时显示服务器时间,如果每秒通过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 
*/ 
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); 
}, 
/** 
* 更新时间:时间格式: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>
Javascript 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
javascript之锁定表格栏位
Jun 29 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
js使用心得分享
Jan 13 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
Vue.use源码分析
Apr 22 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 #Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 #Javascript
Node.js(安装,启动,测试)
Jun 09 #Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 #Javascript
javascript浏览器兼容教程之事件处理
Jun 09 #Javascript
jQuery学习笔记之toArray()
Jun 09 #Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 #Javascript
You might like
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
PHP单链表的实现代码
2016/07/05 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
python字典操作实例详解
2017/11/16 Python
python 接口返回的json字符串实例
2018/03/27 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
python代码编写计算器小程序
2020/03/30 Python
python Django 创建应用过程图示详解
2019/07/29 Python
python tkinter实现屏保程序
2019/07/30 Python
Pycharm中如何关掉python console
2020/10/27 Python
意大利男装网店:Vrients
2019/05/02 全球购物
优秀团员个人的自我评价
2013/10/02 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
聘用意向书范本
2014/04/01 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
论文评语大全
2014/04/29 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
文艺委员竞选稿
2015/11/19 职场文书