网页实时显示服务器时间和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判断浏览器的比较全的代码
Feb 13 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
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
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
完美的php分页类
2017/10/24 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
js加解密 脚本解密
2008/02/22 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
利用Python破解验证码实例详解
2016/12/08 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
jupyter 导入csv文件方式
2020/04/21 Python
监察建议书格式
2014/05/19 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
经典团队口号大全
2014/06/21 职场文书
十佳党员事迹材料
2014/08/28 职场文书
食品安全承诺书范文
2014/08/29 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
手机被没收的检讨书
2014/10/04 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android