网页实时显示服务器时间和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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 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
一个好用的分页函数
2006/11/16 PHP
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
php遍历目录方法小结
2015/03/10 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
JSONP跨域请求
2017/03/02 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python算法学习之基数排序实例
2013/12/18 Python
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
Ref与out有什么不同
2012/11/24 面试题
农行心得体会
2014/09/02 职场文书
个人授权委托书模板
2014/09/14 职场文书
县委务虚会发言材料
2014/10/20 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android