Three core methods of JavaScript Time Display

Source: Internet
Author: User
The use of JavaScript
A friend of mine asked me a few days ago: "You have a dynamic timetable on your personal homepage. I like it very much. I wonder how you made it? Probably used quite repeatedly

Miscellaneous programs !" "You have received the prize. In fact, the time display procedure is very simple. As long as you remember the three ways below, I promise that your homepage will also look beautiful ." I smiled proudly.
Method 1: Call time on a webpage.
The method is as follows: <script language = "JavaScript">
Function time_rota ()
{
Now = new date ();
H = "0" + now. gethours ();
M = "0" + now. getminutes ();
S = "0" + now. getseconds ();
If (H hour) {H = now. gethours ()}
If (M bytes) {M = now. getminutes ()}
If (s seconds) {S = now. getseconds ()}
Document. Write ("" + H + ":" + M + ":" + S + "");
}
</SCRIPT>
<SCRIPT>
Time_rota ()
</SCRIPT>
An important part of the mind method is described as follows:

1. The parameter "0 ". If this parameter is not added, the time displayed on the schedule is only in units. For example, the time displayed at a.m., a.m., and a.m. Is a.m ". Is it ugly! After the parameter "0" is added, let's look at it again: "01:01:01", which turns into a dual-bit display time. Let's see it!
2. "If" statement. This statement is used to correctly display the double-bit time. If this statement is not used, three digits are displayed after "hour, minute, second", no matter which one exceeds 10. For example: "am" is displayed at AM, which is too exaggerated! Therefore, the "if" statement must be used in the program.
In addition, the calling time program on the web page can be simplified to: (but if you have learned programming language, you must know that the above program is much more rigorous than the following program, and the following program cannot correctly display the double-bit time .)
<Script language = "JavaScript">
Today = new date ();
Document. Write (today. gethours () + ":", today. getminutes () + ":", today. getseconds ());
</SCRIPT>

Method 2: Dynamic Webpage timetable.
The method is as follows:
<SCRIPT>
Function time_rota ()
{
Now = new date ();
H = "0" + now. gethours ();
M = "0" + now. getminutes ();
S = "0" + now. getseconds ();
If (H hour) {H = now. gethours ()}
If (M bytes) {M = now. getminutes ()}
If (s seconds) {S = now. getseconds ()}
Document. Time. Clock. value = "" + H + ":" + M + ":" + S + ""
SetTimeout ('time _ ROTA () ', 1000)
}
</SCRIPT>
<Table>
<Tr>
<TD> <form method = "Post" name = "time">
<P> <input name = "Clock" size = "12" value = "display time"> </P>
</Form>
</TD>
<SCRIPT>
Time_rota ()
</SCRIPT>
An important part of the mind method is described as follows:
"Time" and "Clock" in a .doc ument. Time. Clock. Value correspond to the names defined after "name, input name" in the form. Therefore, the content of the two parts must be the same; otherwise, the program is definitely invalid.
2. setTimeout ('time _ ROTA () ', 1000) indicates that the specified program runs once per second, that is, dynamic timing.
Method 3: The dynamic display time on the status bar.
The method is as follows:
<Script language = "JavaScript">
Function time_rota ()
{
Now = new date ();
H = "0" + now. gethours ();
M = "0" + now. getminutes ();
S = "0" + now. getseconds ();
If (H hour) {H = now. gethours ()}
If (M bytes) {M = now. getminutes ()}
If (s seconds) {S = now. getseconds ()}
SetTimeout ("time_rota ()", 1000 );
Window. Status = "" + H + ":" + M + ":" + S + "";
}
</SCRIPT>
<SCRIPT>
Time_rota ()
</SCRIPT>
An important part of the mind method is described as follows:
This method is extended from the above two ways of thinking, and the general idea is the same as above. You only need to learn to use the window. Status function. Its function is to display text on the status bar.
"Now, let's talk about how you feel about my friends. Are you eager to try it !" I looked at him and asked. "I remember, thank you !" He is ecstatic ......
Today, my friend invited me to serve as a guest on his homepage. He said he would give me an unexpected surprise. As a result, I went to his home page. He used the dynamic timetable and paid a high respect to me on his webpage. At the same time, he called me a "master ".
"What do you do next in 'master? By the way, write articles and share these three ideas with netizens ." I said to myself.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.