网页实时显示服务器时间和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代码
Jan 01 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
Javascript实现计算个人所得税
May 10 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 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学习之PHP变量
2006/10/09 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php的字符串用法小结
2010/06/08 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
linux下编译安装memcached服务
2014/08/03 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
python配置grpc环境
2019/01/01 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
物业管理求职自荐信
2013/09/25 职场文书
信息技术专业个人自我评价
2013/12/11 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
2014年清明节寄语
2014/04/03 职场文书
安全承诺书格式
2014/05/21 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android