var nowDate = new Date();
var time = {
year : nowDate.getFullYear(),
month : nowDate.getMonth(),
day : nowDate.getDate(),
week : nowDate.getDay(),
hour : nowDate.getHours(),
minute : nowDate.getMinutes(),
second : nowDate.getSeconds()
}; 

function Week(num){
switch(num){
case 1 :
return '星期一';
break;
case 2 :
return '星期二';
break;
case 3 :
return '星期三';
break;
case 4 :
return '星期四';
break;
case 5 :
return '星期五';
break;
case 6 :
return '星期六';
break;
case 7 :
return '星期日';
break; 
};
}

function twoNum(num){
return num = num<10 "htmlcode">

function twoNum(num){
if(num<10){
num = '0'+num; 
}
return num; 
}


好万事俱备，只欠东风了，我们先把这些代码整合起来，这样更方便使用：




function Timer(obj){
var nowDate = new Date();
var time = {
year : nowDate.getFullYear(),
month : nowDate.getMonth(),
day : nowDate.getDate(),
week : nowDate.getDay(),
hour : nowDate.getHours(),
minute : nowDate.getMinutes(),
second : nowDate.getSeconds()
};
function Week(num){
switch(num){
case 1 :
return '星期一';
break;
case 2 :
return '星期二';
break;
case 3 :
return '星期三';
break;
case 4 :
return '星期四';
break;
case 5 :
return '星期五';
break;
case 6 :
return '星期六';
break;
case 7 :
return '星期日';
break; 
};
}
function twoNum(num){
return num = num<10 "htmlcode">

<div id="box"></div> 


要实现时间自动更新，就需要使用定时器（setInterval() 或setTimeout()），这两个方法有点不一样，第一个是一直执行，除非清除定时器，第二个是只执行一次就不执行了，如果想要它一直执行，可以考虑用递归调用的方法，此方法就不在这里写了


我们选择用第一种：




var oBox = document.getElementById("box"); //获取元素
Timer(oBox); //这里需要先执行一下，因为如果不先执行，定时器会有一个延迟1秒执行，看上去就感觉慢了一秒出来一样
oBox.timer = setInterval(function(){ //oBox.timer这种写法是为了减少外面全局变量对定时器的影响，用元素的自定义属性还可以避免命名冲突
Timer(oBox);
},1000); 


到这里，一个在页面上显示的时间就可以自动更新显示了，但是我们还有一个要求，就是点击时间，时间要停止，再点击，时间又恢复更新，那这怎么做呢？为了便于理解，我给大家举个例子，应该就能明白，比如说一个灯，我按开关的时候，灯就亮了，我再按开关，灯就灭了，是不是跟我们的要求很像，所以我们设一个开关就能实现我们要的效果：




var offOn = true;
oBox.onclick = function(){
if(offOn){
clearInterval(oBox.timer);
offOn=false;
}else{
oBox.timer = setInterval(function(){
Timer(oBox);
},1000);
offOn = true;
}
} 


到这里，所以的功能就都实现了，你以为就这样就结束了吗？当然。。。不是，出于我们程序猿对代码的严谨态度，很多地方都是可以做优化的，所有的代码整理优化如下：




var oBox = document.getElementById("box");
var offOn = true;
Timer(oBox);
function showTime(){
oBox.timer = setInterval(function(){
Timer(oBox);
},1000);
}
showTime();
oBox.onclick = function(){
offOn ? clearInterval(oBox.timer) : showTime();
offOn=!offOn;
}
function Timer(obj){
var nowDate = new Date();
var time = {
year : nowDate.getFullYear(),
month : nowDate.getMonth(),
day : nowDate.getDate(),
week : nowDate.getDay(),
hour : nowDate.getHours(),
minute : nowDate.getMinutes(),
second : nowDate.getSeconds()
};
function Week(num){
switch(num){
case 1 :
return '星期一';
break;
case 2 :
return '星期二';
break;
case 3 :
return '星期三';
break;
case 4 :
return '星期四';
break;
case 5 :
return '星期五';
break;
case 6 :
return '星期六';
break;
case 7 :
return '星期日';
break; 
};
}
function twoNum(num){
return num = num<10 ? '0'+num : num; 
}
obj.innerHTML = time.year+'年'+time.month+'月'+time.day+'日 '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second);
}


里面用到的几处三元运算和取反等操作，请好好的揣摩领悟一下！


到这里，你以为就这样就结束了吗？当然。。。不是，说到显示时间，这只是时间对象应用的九牛一毛，更多的应用应该是倒计时的应用，比如说团购网站，比如说验证码的倒计时等等，但是今天时间有限，这次就不在这里细说倒计时的功能了，我会单独开一片博客讲解倒计时的一些应用方法，供大家参考学习，我觉得还是有必要说说的，好了，今天就到这里！


关于在页面中输出当前客户端时间javascript实例代码的相关知识就给大家介绍多，希望对大家有所帮助！