网页实时显示服务器时间和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 相关文章推荐
JavaScript中URL编码函数代码
Jan 11 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
KnockoutJs快速入门教程
May 16 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
Angular封装表单控件及思想总结
Dec 11 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写杨辉三角实例代码
2011/07/17 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
ES6入门教程之Class和Module详解
2017/05/17 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python 开发Activex组件方法
2009/11/08 Python
python模拟鼠标拖动操作的方法
2015/03/11 Python
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
利用python 下载bilibili视频
2020/11/13 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
物业管理计划书
2014/01/10 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
太空授课观后感
2015/06/17 职场文书
SQL Server Agent 服务无法启动
2022/04/20 SQL Server