网页实时显示服务器时间和javscript自运行时钟

最近项目网页需要实时显示服务器时间,如果每秒通过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>

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
弄了个很简单的例子判断IE浏览器版本是否过低 例子结构如下,其实一个页面加引入jquery就可以了,顺便弄了个标准结构(注意在IE6和IE7版本较低情况下下才看到它的提示效果) 复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/x

jQuery filter函数使用方法 - 2015-05-01 14:05:07

利用filter函数可以从wrapper set中过滤符合条件的DOM元素。 如果我们有一个内容如下的html文件,要获取类为external的a元素,使用filter可以很easy地搞定。 复制代码 代码如下: a href=#>a href=#>a href=#>a href=#>a href=#>a href=#>a href=#>a href=#>a href=#>a href=#> filter的参数类型可分为两种: 1 传递选择器 2 传递过滤函数 如果使用选择器作为参数,用法如下 复制代码 代
JavaScript中的所有事物都是对象:字符串、数组、数值、函数等。JS中并没有类的概念, 但我们可以利用JS的语法特征,以类的思想来创建对象。 原始方法 复制代码 代码如下: script type="text/javascript" var obj = new Object(); obj.name = "Koji"; //为对象添加属性 obj.age = 21; obj.showName = function(){ //为对象添加方法 alert(this.name); } obj.showAge
几个月前在一个项目中涉及到树形栏,然后看了很多插件,觉得有点麻烦,于是自己写了一个,写着写着就出问题了。 当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作,可是用$(".XX").click();方法是不行的。 1、之前用的是jq1.4.3 ,jq1.7一下都可以使用live()方法,来实现该功能 $(‘#div').live(‘click',function(){//do stuff}); 但是live方法也有不支持的事件,例如:toggle事件 ,遇到这个
今天又回顾了一下这个插件,然后发现它在IE6下面工作的时候,显示起来是不正常的,tip经常出现在很离谱的位置。问题还有,由于tip的显示效果没有用到任何图像,都是纯的CSS,所以里面用CSS实现的三角形在IE6下是无法工作的,会显示一块有色区域,很丑,所以我就想动手改它一下。先上一张对比图好了: js方面的代码肯定是没问题的,问题出CSS上,Colortip用的是position进行定位,在IE6下面可能存在着一点问题。而且由于IE6不支持border-color:transparent的属性,所以tip下
原文作者: Andy Croxall 原文链接: Ten Oddities And Secrets About JavaScript 翻译编辑: 张鑫旭 数据类型和定义 1. Null是个对象 JavaScript众多类型中有个Null类型,它有个唯一的值null, 即它的字面量,定义为完全没有任何意义的值。其表现得像个对象,如下检测代码: 复制代码 代码如下: alert(typeof null); //弹出 'object' 如下截图: 尽管typeof值显示是"object",但null并不认为是一
一个合作伙伴的页面效果,鼠标放到 图片上要变成彩色,本来就是一个简单的换色效果,但问题是,图片的高度和宽度不是一样大的。 这就比较麻烦了。如果把图片放到背景里就要一个一个的去定义图片外面的容器a/a,要多写很多层叠样式,太麻烦,最后我决定,把图片的高度的一一半,和图片的宽度赋值给它外面的容器a/a 然后把图片做了如下处理: 当鼠标移动到图片上让他向上移动30个像素,移开则回到原位。 html代码如下: 复制代码 代码如下: !--partner_box-- div class="partner_box"
方法说明: 结束响应,告诉客户端所有消息已经发送。当所有要返回的内容发送完毕时,该函数必须被调用一次。 如何不调用该函数,客户端将永远处于等待状态。 语法: 复制代码 代码如下: response.end([data], [encoding]) 接收参数: data end()执行完毕后要输出的字符,如果指定了 data 的值,那就意味着在执行完 response.end() 之后,会接着执行一条 response.write(data , encoding); encoding 对应data的字符编码
我们大多数人都使用过JavaScript,近年来随着各种JavaScript框架的流行使得JavaScript变得更加神奇和容易。"Anonymous (匿名)函数?不知道那是什么但是看起来和自己所写的差不多。” 你可能并不知道可以传给 new Function() 一个字符串作为函数的body来构造一个 JavaScript函数。编程中并不经常用到,但有时候应该是很有用的. 下面是 new Function 的基本用法: 复制代码 代码如下: // 最后一个参数是函数的 body(函数体),类型为 st
setAdminTabs.js代码中添加如下: 复制代码 代码如下: $("#adminTabs li").mouseover(function(){$(this).addClass("selectedTab")}); 始终不起作用,原因如下: 复制代码 代码如下: .selectedTab{background-color:White; border-bottom:1px} 定义两个属性,在admin.css的文件中存在,如下: 复制代码 代码如下: #adminTabs ul li{ float:lef