网页实时显示服务器时间和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 相关文章推荐
js过滤数组重复元素的方法
Sep 05 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 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
php adodb连接不同数据库
2009/03/19 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
react路由配置方式详解
2017/08/07 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
js实现简单的打印表格
2020/01/15 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
python numpy 反转 reverse示例
2019/12/04 Python
python中的测试框架
2020/11/13 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
营业经理岗位职责
2013/11/10 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
事业单位考察材料范文
2014/12/25 职场文书
XX部保密工作制度范本
2019/08/27 职场文书