网页实时显示服务器时间和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 相关文章推荐
juqery 学习之四 筛选查找
Nov 30 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
单线程JavaScript实现异步过程详解
May 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
php inc文件使用的风险和注意事项
2013/11/12 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Python中特殊函数集锦
2015/07/27 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
python多线程http压力测试脚本
2019/06/25 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
餐饮主管岗位职责
2013/12/10 职场文书
安全生产活动月方案
2014/03/09 职场文书
信息技术课后反思
2014/04/27 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
离婚协议书格式
2015/01/26 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL
Nginx报404错误的详细解决方法
2022/07/23 Servers