前端之家收集整理的这篇文章主要介绍了
在页面中输出当前客户端时间javascript实例代码，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
时间对象（Date（））比较简单，本文旨在为初学者入门使用，大牛可略过！
本文承接基础知识实例，说一下实例的要求：
在页面中输出当前客户端时间（2015年1月1日星期一10:10:10这样的格式），每过一秒中页面不刷新，但是时间自动更新（用两种定时器方法都可以实现），鼠标点击时间，如果原先运动则停止，如果停止则继续运动；
要求基本上可分为2部分：一是不刷新自动更新时间，二是点击时间停止或更新时间
好，那我们还是老规矩，一步一步来，既然是时间，那就会用到时间对象 new Date();
获取时间对象我是用对象的方式来获取的，这样方便调用，结构也比较清晰，不必一个个定义，比较推荐这种写法，得到相应的值也很方便，比如获取年份：time.year;
得到我们需要获取的数据之后，然后要处理的是星期问题，因为现在获取的星期的值还是1,2,3,4,5,6,7，这里我们需要转换一下，将它变为我们看得到的文字信息，这里我们用一个函数包起来：
这里我用的是swicth case组合，这个判断条件特别适合做类似于星期这样的判断，这里就不多说了，当然，你也可以用if else组合来判断，看个人习惯问题，还有一个需要解决的问题就是，现在获取的分和秒在0-9的时候，是显示的0-9的数字，
不是我们常见的00-09这样的显示，为了将这样的时间变成我们熟悉的样子，我们同样可以写一个函数，将它转换一下:
这里我用的是三元运算，如果对三元运算不是很了解的，看下面的代码，是一个意思：
好万事俱备，只欠东风了，我们先把这些代码整合起来，这样更方便使用：
这个函数应该能懂吧，传一个obj对象是为了能把时间在这个对象里面输出，但此时输出的时间还只是一个静态时间，页面不刷新，根本不会走，所以，我们接下来就来实现自动更新时间的功能，首先我们先给一个容器：
Box">
Box.onclick = function(){
if(offOn){
clearInterval(o
Box.timer);
offOn=false;
}else{
o
Box.timer = setInterval(function(){
Timer(o
Box);
},1000);
offOn = true;
}
}
Box = document.getElementById("
Box");
var offOn = true;
Timer(o
Box);
function showTime(){
o
Box.timer = setInterval(function(){
Timer(o
Box);
},1000);
}
showTime();
o
Box.onclick = function(){
offOn ? clearInterval(o
Box.timer) : showTime();
offOn=!offOn;
}
function Timer(obj){
var nowDate = new Date();
var time = {
year : nowDate.getFullYear(),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);
}
