JavaScript small instance, output the current client time in the page

The Time object (date ()) is relatively simple, this article is intended for beginners to use, Daniel can skip!

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

Output the current client time in the page (January 1, 2015 Monday 10:10:10 such format), every second of the page does not refresh, but the time automatically updated (with two timer methods can be achieved), mouse click Time, if the original movement stopped, if the stop will continue to move;

Requirements are basically divided into 2 parts: one is not refreshed automatically update time, second, click Time to stop or update the time

Well, then we are still the same, step by step, since it is time, it will use the time object new Date ();

1  　　　　　　　 varNowdate =NewDate ();2             varTime = {3 year:nowDate.getFullYear (),4 month:nowDate.getMonth (),5 day:nowDate.getDate (),6 Week:nowDate.getDay (),7 hour:nowDate.getHours (),8 minute:nowDate.getMinutes (),9 second:nowDate.getSeconds ()Ten};

Get the time object I am using the way of object to get, so convenient to call, the structure is also relatively clear, do not need to define, compared to recommend this style, get the corresponding value is also very convenient, such as to obtain the year: time.year;

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

functionWeek (num) {Switch(num) { Case1 :                        return' Monday ';  Break;  Case2 :                        return' Tuesday ';  Break;  Case3 :                        return' Wednesday ';  Break;  Case4 :                        return' Thursday ';  Break;  Case5 :                        return' Friday ';  Break;  Case6 :                        return' Saturday ';  Break;  Case7 :                        return' Sunday ';  Break;            }; }

Here I use the SWICTH case combination, this judging condition is particularly suitable for similar to the week such judgment, here does not say, of course, you can also use if else combination to judge, see personal habits problem, there is a need to solve the problem is, now get the minutes and seconds in 0-9, Is the number shown in 0-9,

Not our common 00-09 such a display, in order to change the time we are familiar with the appearance, we can also write a function to convert it:

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

Here I use ternary operation, if the ternary operation is not very well understood, see the following code, is a meaning:

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

Everything is ready, only the east wind, we first put together these code, so more convenient to use:

functionTimer (obj) {varNowdate =NewDate (); varTime ={year:nowDate.getFullYear (), Month:nowDate.getMonth (), Day:nowdat E.getdate (), Week:nowDate.getDay (), hour:nowDate.getHours (), Minute:now                        Date.getminutes (), Second:nowDate.getSeconds ()}; functionWeek (num) {Switch(num) { Case1 :                        return' Monday ';  Break;  Case2 :                        return' Tuesday ';  Break;  Case3 :                        return' Wednesday ';  Break;  Case4 :                        return' Thursday ';  Break;  Case5 :                        return' Friday ';  Break;  Case6 :                        return' Saturday ';  Break;  Case7 :                        return' Sunday ';  Break;            }; }                        functiontwonum (num) {returnnum = num<10? ' 0 ' +Num:num; } obj.innerhtml= time.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, to pass an 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 come to realize the function of automatic update time, first we first give a container:

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

To achieve the time automatic update, you need to use a timer (setinterval () or settimeout ()), the two methods are a bit different, the first is to always execute, unless the timer is cleared, the second is only executed once will not execute, if you want it to be executed, You can consider a recursive invocation method, which is not written here.

We choose to use the first type:

var // get Element // this needs to be done first, because if it is not executed first, the timer will have a delay of 1 seconds to execute, it looks like a second to come out like Obox.timer = SetInterval (function// Obox.timer This notation is designed to reduce the effect of external global variables on timers and to avoid naming conflicts with the custom attributes of the elements     Timer (OBox);},1000);

Here, a page on the display of the time can be automatically updated display, but we also have a request, is the click Time, time to stop, then click, Time and restore the update, then how to do it? For the sake of understanding, I give you an example, should be able to understand, such as a lamp, I press the switch when the light is on, I will

Press the switch, the light is out, is not like our requirements, so we set a switch to achieve the effect we want:

var true  function() {    if(offon) {        clearinterval (obox.timer);        Offon=false;    } Else {        = setinterval (function() {            Timer (oBox);        },+);         true ;    }}

Here, so the function is all realized, you think this is the end of it? Of course... No, because of our procedural ape's rigorous attitude to the code, many places can be optimized, and all the code collation is optimized as follows:

varOBox = document.getElementById ("box"); varOffon =true;        Timer (OBox); functionShowTime () {Obox.timer= SetInterval (function() {Timer (OBox); },1000);                } showTime (); Obox.onclick=function() {Offon?clearinterval (Obox.timer): ShowTime (); Offon=!Offon; }                functionTimer (obj) {varNowdate =NewDate (); varTime ={year:nowDate.getFullYear (), Month:nowDate.getMonth (), Day:nowdat E.getdate (), Week:nowDate.getDay (), hour:nowDate.getHours (), Minute:now                        Date.getminutes (), Second:nowDate.getSeconds ()}; functionWeek (num) {Switch(num) { Case1 :                        return' Monday ';  Break;  Case2 :                        return' Tuesday ';  Break;  Case3 :                        return' Wednesday ';  Break;  Case4 :                        return' Thursday ';  Break;  Case5 :                        return' Friday ';  Break;  Case6 :                        return' Saturday ';  Break;  Case7 :                        return' Sunday ';  Break;            }; }                        functiontwonum (num) {returnnum = num<10? ' 0 ' +Num:num; } obj.innerhtml= time.year+ ' +time.month+ ' month ' +time.day+ ' Day ' +week (time.week) + ' +time.hour+ ': ' +twonum (time.minute) + ': ' +Twonum (Time.second); }

Inside the use of several ternary operations and reverse operation, please take a good understanding of it!

Here, do you think it's over? Of course... No, speaking of display time, this is only a time object application of the bucket, more applications should be the countdown application, such as group purchase site, such as verification code countdown and so on, but today's time is limited, this is not here to elaborate the countdown function, I will open alone

A blog to explain the countdown to some of the application methods, for everyone to reference the study, I think it is necessary to say, well, today to here!

Hurry up! There is an incorrect or missing thing to understand, and hope criticizes! Appreciate it!

JavaScript small instance, output the current client time in the page