Output current client time in a page JavaScript instance code _javascript tips

Time Object (date ()) is simpler, this article is intended for beginners to use, Daniel can skip!

This article takes the basic knowledge example, says the example request:

Output the current client time in the page (January 1, 2015 Monday 10:10:10), the page does not refresh every second, but the time is automatically updated (with both Timer method can be implemented), mouse click Time, if the original movement is stopped, if stopped then continue to exercise;

Requirements can be basically divided into 2 parts: one is not to refresh the automatic update time, the second is the click Time to stop or update time

Well, then we are the old rules, step-by-step, since it is time, it will use the time Object new Date ();

var nowdate = new Date ();
var time = {Year:nowDate.getFullYear (), Month:nowDate.getMonth (),
day:nowDate.getDate (),
Week:no Wdate.getday (), hour:nowDate.getHours (), Minute:nowDate.getMinutes (), Second:nowDate.getSeconds ()

Get time Object I was to use the way of object to obtain, so convenient to call, the structure is also clearer, do not have to define each, the comparison recommended this type of writing, get the corresponding value is also very convenient, such as the acquisition year: Time.year;

After we get the data we need to get, and then we're going to deal with the week question, because the value of the week we're getting is still 1,2,3,4,5,6,7, and here we need to convert it and change it to the text we see, where we wrap it up with a function:

function Week (num) {
switch (num) {case
1: Return
' Monday ';
break;
Case 2: Return
' Tuesday ';
break;
Case 3: Return
' Wednesday ';
break;
Case 4: Return
' Thursday ';
break;
Case 5: Return
' Friday ';
break;
Case 6: Return
' Saturday ';
break;
Case 7: Return
' Sunday ';
break; 
};
}

Here I'm using the SWICTH case combination, this judgment condition is especially suitable for making a judgment similar to that of the week, here is not much to say, of course, you can also use if else combination to judge, look at the problem of personal habits, there is a need to solve the problem is that now get the minutes and seconds at 0-9, is the number of 0-9 displayed,

Not our usual 00-09 show, in order to turn this time into what we are familiar with, we can also write a function that converts it:

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

Here I use ternary operations, if the ternary operation is not very understanding, look at the following code, is a meaning:

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

All right, it's just the east wind, and we're going to put the code together so it's easier to use:

function Timer (obj) {
var nowdate = new Date ();
var time = {Year:nowDate.getFullYear (), Month:nowDate.getMonth (),
day:nowDate.getDate (),
Week:no Wdate.getday (), hour:nowDate.getHours (), Minute:nowDate.getMinutes (), Second:nowDate.getSeconds ()
};
function Week (num) {
switch (num) {case
1: Return
' Monday ';
break;
Case 2: Return
' Tuesday ';
break;
Case 3: Return
' Wednesday ';
break;
Case 4: Return
' Thursday ';
break;
Case 5: Return
' Friday ';
break;
Case 6: Return
' Saturday ';
break;
Case 7: Return
' Sunday ';
break; 
};}
function Twonum (num) {return
num = num<10? ' 0 ' +num:num; 
}
obj.innerhtml = time.year+ ' year ' +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 a obj object is to be able to put the time in this object output, but at this time the output is only a static time, the page does not refresh, will not go, so, we next to implement the function of automatic update time, first we give a container:

To implement a time automatic update, you need to use a timer (setinterval () or settimeout ()), which is a bit different, the first one is always executed, unless the timer is cleared, the second is executed only once, and if you want it to execute, You might consider using a recursive method, which is not written here

We choose to use the first type:

var Obox = document.getElementById ("box"); Gets
the element Timer (Obox);//This needs to be done first, because the timer has a delay of 1 seconds to execute without first executing, and looks like it's slowing down a second.
Obox.timer = setinterval (function () {//obox.timer This notation is to reduce the effect of global variables on timers, and to avoid naming conflicts
with custom attributes of elements Timer (Obox);

Here, a page on the display of the time can be automatically updated display, but we still have a request, that is, click Time, Time to stop, click again, time and restore updates, then how to do this? To make it easier to understand, I give you an example, should be able to understand, for example, a lamp, when I press the switch, the light on, and I press the switch, the lamp went out, is not like our requirements are very similar, so we set a switch can 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;
}

Here, so the function has been realized, you think this is the end of it? Of course... No, out of our program Ape's rigorous attitude to the code, many places are able to do optimization, all the Code collation 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 nowdat
E = new Date (); var time = {Year:nowDate.getFullYear (), Month:nowDate.getMonth (), Day:nowDate.getDate (), Week:nowDate.getDay (), H
Our:nowDate.getHours (), Minute:nowDate.getMinutes (), Second:nowDate.getSeconds ()}; 
function Week (num) {switch (num) {case 1:return ' Monday ', break, Case 2:return ' Tuesday ', break, Case 3:return ' Wednesday ';
Case 4:return ' Thursday ';
Break
Case 5:return ' Friday ';
Break
Case 6:return ' Saturday ';
Break
Case 7:return ' Sunday '; 
Break
}; } function Twonum (num) {return num = num<10? 
' 0 ' +num:num; obj.innerhtml = time.year+ ' year ' +time.month+ ' month ' +time.day+ ' Day ' +week (time.week) + ' +time.hour+ ': ' +twonum (time.minute) +
': ' +twonum (Time.second); }

The use of a few of the three-dimensional operation and reverse operation, please take a good look at understanding!

Here, you think this is the end of it? Of course... No, when it comes time to show, this is only time object application of the bucket, more applications should be the countdown to the application, such as group purchase site, such as the countdown to verify code, etc., but today time is limited, this time is not here to elaborate the countdown function, I will open a blog to explain the countdown to some of the application methods, For your reference to study, I think it is necessary to say, well, today is here!

About outputting the current client time in the page the knowledge of JavaScript instance code will give you more information, hope to help everyone!