网页实时显示服务器时间和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 相关文章推荐
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
简单了解three.js 着色器材质
Aug 03 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中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
python万年历实现代码 含运行结果
2017/05/20 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
python随机数分布random测试
2018/08/27 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
Python作用域与名字空间原理详解
2020/03/21 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
浅析Python 多行匹配模式
2020/07/24 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
老干部工作先进事迹
2014/08/17 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python