Output the current client time javascript example code in the page_javascript skills

The time object (Date()) is relatively simple. This article is intended for beginners to get started. Experts can skip it!

This article undertakes basic knowledge examples and talks about the requirements of the examples:

Output the current client time on the page (in the format of 10:10:10 on Monday, January 1, 2015). The page does not refresh every second, but the time automatically updates (using two timer methods can be achieved), mouse click time, if the original movement is stopped, if it is stopped, the movement continues;

The requirements can basically be divided into 2 parts: one is to automatically update the time without refreshing, and the other is to click on the time to stop or update the time

Okay, let’s follow the old rules, step by step. Since it is time, we 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 obtain the time object in the form of an object, which is convenient to call and has a clear structure. It does not need to be defined one by one. This writing method is more recommended. It is also very convenient to get the corresponding value, such as getting the year: time. year;

After getting the data we need to get, we need to deal with the day of the week problem, because the value of the day of the week obtained now is still 1,2,3,4,5,6,7. Here we need to convert it and change it to For the text information we can see, here we wrap it with a function:

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; 
};
}

Here I use the swicth case combination. This judgment condition is particularly suitable for making judgments similar to the day of the week. I won’t go into details here. Of course, you can also use the if else combination to judge, depending on your personal habits. There is a problem that needs to be solved. When the minutes and seconds obtained are between 0 and 9, the numbers from 0 to 9 are displayed.

is not our common display of 00-09. In order to change this time into something we are familiar with, we can also write a function to convert it:

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

Here I am using ternary arithmetic. If you don’t know much about ternary arithmetic, look at the following code, it means the same thing:

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

Everything is ready, all we need is the east wind. Let’s integrate these codes first to make them more convenient 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 '星期一';
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<10 &#63; '0'+num : num; 
}
obj.innerHTML = time.year+'年'+time.month+'月'+time.day+'日 '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second);
}

You should understand this function. The purpose of passing an obj object is to output the time in this object. However, the time output at this time is only a static time. The page will not move at all if it is not refreshed. Therefore, we continue Next, let’s implement the function of automatically updating time. First, we give a container:

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

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

We choose to use the first one:

var oBox = document.getElementById("box"); //获取元素
Timer(oBox); //这里需要先执行一下，因为如果不先执行，定时器会有一个延迟1秒执行，看上去就感觉慢了一秒出来一样
oBox.timer = setInterval(function(){ //oBox.timer这种写法是为了减少外面全局变量对定时器的影响，用元素的自定义属性还可以避免命名冲突
Timer(oBox);
},1000); 

At this point, the time displayed on the page can be automatically updated and displayed. However, we still have another requirement, which is to click on the time and the time will stop. Click again and the time will resume updating. So how to do this? In order to make it easier to understand, I will give you an example, and you should be able to understand it. For example, if I press the switch of a light, the light will turn on. If I press the switch again, the light will go out. Is it very similar to our requirements? , so we can achieve the effect we want by setting a switch:

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 have been implemented. Do you think this is the end? certainly. . . No, due to our programmers’ rigorous attitude towards code, many places can be optimized. All codes are organized and optimized 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 '星期一';
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<10 &#63; '0'+num : num; 
}
obj.innerHTML = time.year+'年'+time.month+'月'+time.day+'日 '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second);
}

Please try to understand the several ternary operations and negation operations used in it!

At this point, do you think it’s over? certainly. . . No, when it comes to displaying time, this is just a drop in the bucket of time object applications. More applications should be countdown applications, such as group purchase websites, such as verification code countdowns, etc. However, today’s time is limited, so I won’t go into detail here this time. Let’s talk about the countdown function. I will open a separate blog to explain some application methods of countdown for your reference and study. I think it is necessary to talk about it. Well, that’s it for today!

I will introduce you to the relevant knowledge about outputting the current client time javascript example code on the page. I hope it will be helpful to everyone!