欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-21 21:01:38
...
时间对象(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

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

function twoNum(num){
if(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

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

 

要实现时间自动更新,就需要使用定时器(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

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

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

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