脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript输出当前客户端时间

在页面中输出当前客户端时间javascript实例代码

 更新时间：2016年03月02日 09:32:30   作者：凌云之翼  
这篇文章主要介绍了在页面中输出当前客户端时间javascript实例代码的相关资料,需要的朋友可以参考下

时间对象（Date（））比较简单，本文旨在为初学者入门使用，大牛可略过！

本文承接基础知识实例，说一下实例的要求：

在页面中输出当前客户端时间（2015年1月1日星期一10:10:10这样的格式），每过一秒中页面不刷新，但是时间自动更新（用两种定时器方法都可以实现），鼠标点击时间，如果原先运动则停止，如果停止则继续运动；

要求基本上可分为2部分：一是不刷新自动更新时间，二是点击时间停止或更新时间

好，那我们还是老规矩，一步一步来，既然是时间，那就会用到时间对象 new Date();

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()
};

获取时间对象我是用对象的方式来获取的，这样方便调用，结构也比较清晰，不必一个个定义，比较推荐这种写法，得到相应的值也很方便，比如获取年份：time.year;

得到我们需要获取的数据之后，然后要处理的是星期问题，因为现在获取的星期的值还是1,2,3,4,5,6,7，这里我们需要转换一下，将它变为我们看得到的文字信息，这里我们用一个函数包起来：

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; 
};
}

这里我用的是swicth case组合，这个判断条件特别适合做类似于星期这样的判断，这里就不多说了，当然，你也可以用if else组合来判断，看个人习惯问题，还有一个需要解决的问题就是，现在获取的分和秒在0-9的时候，是显示的0-9的数字，

不是我们常见的00-09这样的显示，为了将这样的时间变成我们熟悉的样子，我们同样可以写一个函数，将它转换一下:

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

这里我用的是三元运算，如果对三元运算不是很了解的，看下面的代码，是一个意思：

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 ? '0'+num : num; 
}
obj.innerHTML = time.year+'年'+time.month+'月'+time.day+'日 '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second);
}

这个函数应该能懂吧，传一个obj对象是为了能把时间在这个对象里面输出，但此时输出的时间还只是一个静态时间，页面不刷新，根本不会走，所以，我们接下来就来实现自动更新时间的功能，首先我们先给一个容器：

<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实例代码的相关知识就给大家介绍多，希望对大家有所帮助！

您可能感兴趣的文章:

相关文章

  • JavaScript实现刮刮乐效果

    JavaScript实现刮刮乐效果

    这篇文章主要为大家详细介绍了JavaScript实现刮刮乐效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JS实现图片切换效果

    JS实现图片切换效果

    这篇文章主要为大家详细介绍了基于JavaScript实现图片切换效果 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • javascript读写json示例

    javascript读写json示例

    JSON是一种简单的数据格式，比xml更轻巧，在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包，下面有个示例，大家可以参考下
    2014-04-04
  • js实现prototype扩展的方法(字符串,日期,数组扩展)

    js实现prototype扩展的方法(字符串,日期,数组扩展)

    这篇文章主要介绍了js实现prototype扩展的方法,实例分析了JavaScript针对字符串、日期、数组等的prototype扩展相关技巧,需要的朋友可以参考下
    2016-01-01
  • js将当前时间格式转换成时间搓(自写)

    js将当前时间格式转换成时间搓(自写)

    将时间转换成时间搓的方法有很多，在本文为大家介绍下使用js将当前时间转换成时间搓 例如2013-09-11 12:12:12，感兴趣的朋友可以参考下
    2013-09-09
  • JS使用正则表达式除去字符串中重复字符的方法

    JS使用正则表达式除去字符串中重复字符的方法

    这篇文章主要介绍了JS使用正则表达式除去字符串中重复字符的方法,以一个简单实例分析了JavaScript中正则过滤的相关使用技巧,需要的朋友可以参考下
    2015-11-11
  • 浅谈webpack打包之后的文件过大的解决方法

    浅谈webpack打包之后的文件过大的解决方法

    这篇文章主要介绍了浅谈webpack打包之后的文件过大的解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • sogou地图API用法实例教程

    sogou地图API用法实例教程

    这篇文章主要介绍了C# sogou地图API用法,包括了各种常用属性的用法实例,需要的朋友可以参考下
    2014-09-09
  • JavaScript+html实现前端页面滑动验证(2)

    JavaScript+html实现前端页面滑动验证(2)

    这篇文章主要为大家详细介绍了JavaScript+html实现前端页面滑动验证的第二种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • JavaScript中的this陷阱的最全收集并整理(没有之一)

    JavaScript中的this陷阱的最全收集并整理(没有之一)

    这篇文章主要介绍了JavaScript中的this陷阱的最全收集,需要的朋友可以参考下
    2017-02-02

最新评论