Output the current client time in the page. javascript instance code _ javascript skills

This article mainly introduces the information about the javascript instance code of the current client time output on the page. For more information, see the time object (Date, this article is intended for beginners!

This article undertakes the basic knowledge instance and describes the requirements of the instance:

Output the current client time on the page (in the format of 10:10:10 on Monday, January 1, 2015). The page is not refreshed every second, but the time is automatically updated (both timer methods can be used ), click the time. If the previous motion is stopped, the motion continues;

The requirements can be basically divided into two parts: one is not to refresh the automatic update time, the other is to click the time to stop or update the time

Well, we are still the old rule. 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 : nowDate.getDay(),hour : nowDate.getHours(),minute : nowDate.getMinutes(),second : nowDate.getSeconds()}; 

I use the object method to obtain the time object. This makes it easy to call and have a clear structure. You do not need to define them one by one. We recommend this method to get the corresponding value, for example, obtain the year: time. year;

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

Function Week (num) {switch (num) {case 1: return 'monday'; break; case 2: return 'tuesday'; break; case 3: return 'wedday '; break; case 4: return 'thurs'; break; case 5: return 'Friday'; break; case 6: return 'satur'; break; case 7: return 'sunday '; break ;};}

Here I am using the swicth case combination. This condition is especially suitable for the judgment similar to the week. I will not talk about it here. Of course, you can also use the if else combination to judge it, looking at my habits, another problem that needs to be solved is that the number 0-9 is displayed when the score and second obtained are 0-9,

This is not a common display like 00-09. To make the time look familiar to us, we can also write a function to convert it:

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

Here I am using a Trielement operation. If I am not familiar with a Trielement operation, read the following code:

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

Everything is ready for use. We need to integrate the Code 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 'monday'; break; case 2: return 'tuesday'; break; case 3: return 'weday'; break; case 4: return 'thurs'; 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 );}

You can understand this function. You can pass an obj object to output the time in this object. However, the output time is only a static time, and the page is not refreshed, therefore, we will implement the automatic time update function. First, we will give a container:

To implement automatic time update, you need to use the timer (setInterval () or setTimeout (). The two methods are a bit different. The first method is always executed unless the timer is cleared, the second one is to execute it only once. If you want it to be executed all the time, you can consider using a recursive call method. This method is not written here.

We choose to use the first one:

Var oBox = document. getElementById ("box"); // get the Timer (oBox) element; // you need to execute it first, because if you do not execute it first, the Timer will have a delay of 1 second, it seems like a second slower to get out of oBox. timer = setInterval (function () {// oBox. timer is written to reduce the influence of global variables on the Timer. The custom attributes of the elements can also avoid naming conflicts between timer (oBox);}, 1000 );

At this point, a time displayed on the page can be automatically updated and displayed. However, we also need to click the time to stop the time, click again, and the time will be updated again, how can this be done? For ease of understanding, I will give you an example to understand. For example, when I press a light switch, the light will turn on, and I press the switch, the light is off, isn't it like 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. Do you think this is the end? Of course... No, out of our strict attitude towards code, code can be optimized in many places. All code sorting and optimization are 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 'monday'; break; case 2: return 'tuesday'; break; case 3: return 'weday'; break; case 4: return 'thurs'; 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 );}

Several operations, such as ternary operations and reverse operations, are used in it. Please try to understand it!

So far, do you think this is the end? Of course... No, when it comes to display time, this is only a glimpse of the time object application, and more applications should be countdown applications, such as group buying websites, such as verification code countdown, but today's time is limited, this time I will not elaborate on the countdown function here. I will open a blog to explain some of the Countdown Application Methods for your reference. I think it is necessary to talk about it, this is today!

I would like to introduce more about how to output the javascript instance code of the current client time on the page, and hope to help you!