Output the current client time javascript instance code to the page

  • 2021-01-18 06:14:18
  • OfStack

Time object (Date ()) is relatively simple, this article is designed for beginners to start using, Daniu can skip!

This article undertakes the basic knowledge instance, say 1 the requirements of the instance:

Output the current client time in the page (in the format of 110:10:10 on the week of January 1, 2015), the page does not refresh in every second, but the time is automatically updated (can be achieved with two timer methods), the mouse clicks the time, if the original movement will stop, if the stop will continue movement;

Requirements can be basically divided into two parts: 1 is the automatic update time without refreshing, and 2 is the stop or update time of click time

OK, so we're going to do it one step at a time, since it's time, we're going to use the time object 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()
}; 

I get the time object is the way to get the object, so easy to call, the structure is also relatively clear, do not have to define 1, more recommend this way of writing, get the corresponding value is also very convenient, such as the year: time.year;

After we get the data we need to get, then we need to deal with the week problem, because now we get the value of the week is still 1,2,3,4,5,6,7, here we need to convert it to the text information we can see, here we use a function wrapped:


function Week(num){
switch(num){
case 1 :
return ' week 1';
break;
case 2 :
return ' week 2';
break;
case 3 :
return ' week 3';
break;
case 4 :
return ' week 4';
break;
case 5 :
return ' week 5';
break;
case 6 :
return ' week 6';
break;
case 7 :
return ' Sunday ';
break; 
};
}

Here I am using swicth case combination, the judgment condition is especially suitable for doing such a judgment, similar to the week there is not much said, of course, you can also use if else combination, personal habits, there is a need to solve the problem is, now get the minutes and seconds when 0-9, is to display the Numbers 0 to 9,

Instead of the common display of 00-09, we can also write a function that converts it to 1 in order to make the time look familiar to us:


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

If you are not familiar with the 3-tuple operation, look at the following code, which means 1:


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

Now that we're ready, let's put the code together to make it easier to use:


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 ' week 1';
break;
case 2 :
return ' week 2';
break;
case 3 :
return ' week 3';
break;
case 4 :
return ' week 4';
break;
case 5 :
return ' week 5';
break;
case 6 :
return ' week 6';
break;
case 7 :
return ' Sunday ';
break; 
};
}
function twoNum(num){
return num = num<10 ? '0'+num : num; 
}
obj.innerHTML = time.year+' years '+time.month+' month '+time.day+' day  '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second);
}

This function should be able to understand, pass an obj object is to be able to output the time in this object, but at this time the output time is just a static time, the page does not refresh, it will not walk, so, we will implement the automatic update time function, first of all, we give a container:


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

To implement automatic time update, you need to use a timer (setInterval() or setTimeout()). These two methods are a little different, the first is 1 straight execution, unless the timer is cleared, the second is only executed once and never executed, if you want it to be 1 straight execution, you can consider using recursive call method, this method is not written here

We choose the first option:


var oBox = document.getElementById("box"); // Access to elements 
Timer(oBox); // So we need to do it first 1 Because if it is not executed first, the timer will have 1 A delay 1 In seconds, it looks and feels slow 1 Seconds out 1 sample 
oBox.timer = setInterval(function(){ //oBox.timer This is written to reduce the impact of external global variables on the timer, and to avoid naming collisions with the element's custom attributes 
Timer(oBox);
},1000); 

At this point, a time displayed on the page can be automatically updated, but we still have one requirement, that is, click the time, the time will stop, click again, the time will be updated again, then how to do this? For the convenience of understanding, let me give you an example, should be able to understand, for example, a light, when I press the switch, the light will be on, I press the switch again, the light will be off, is it very similar to our requirements, so we can set a switch to achieve the effect we want:


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

At this point, all the functions are implemented, you think that's the end of it? Of course... No, due to our strict attitude towards code, many places can be optimized. All the code optimization is as follows:


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 ' week 1';
break;
case 2 :
return ' week 2';
break;
case 3 :
return ' week 3';
break;
case 4 :
return ' week 4';
break;
case 5 :
return ' week 5';
break;
case 6 :
return ' week 6';
break;
case 7 :
return ' Sunday ';
break; 
};
}
function twoNum(num){
return num = num<10 ? '0'+num : num; 
}
obj.innerHTML = time.year+' years '+time.month+' month '+time.day+' day  '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second);
}

Inside the use of a few 3 yuan operation and reverse operations, please have a good understanding of 1!

So here you think it's all over? Of course... Not, when it comes to show time, it's just a time object used nine cattle hair, 1 more applications should be the application of the countdown, such as sites, for example captcha countdown, etc., but today, time is limited, this time is not here in detail the countdown function, I will separate 1 slice of blogging about the countdown 1 some application methods, consult for everybody to study, I think it's necessary to talk about, well, today is here!

On the page output the current client time javascript instance code related knowledge to introduce more, I hope to be helpful to you!


Related articles: