网页实时显示服务器时间和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 上下banner替换具体实现
Nov 14 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
原生JavaScript实现轮播图
Jan 10 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
openPNE常用方法分享
2011/11/29 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
Javascript Select操作大集合
2009/05/26 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
python学生管理系统代码实现
2020/04/05 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
思想专业自荐信范文
2013/12/25 职场文书
小学生常见病防治方案
2014/06/06 职场文书
七一讲话心得体会
2014/09/05 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
民事答辩状范本
2015/05/21 职场文书
羊脂球读书笔记
2015/06/30 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
element多个表单校验的实现
2021/05/27 Javascript
python实现双向链表原理
2022/05/25 Python
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers