Simple Web Digital Clock

Source: Internet
Author: User
Let's first come to a final implementation: the main implementation idea is to use the JavaScript built-in object Date to get the current system time, and use the DOM method setInterval (code, time) to achieve real-time refresh. 1. simple Html page 1: & lt ;! DOCTYPEhtmlPUBLIC & quot;-// W3C/... first, a final implementation:

Main Implementation ideas: Use the JavaScript built-in object Date to get the current system time, and use the DOM method setInterval (code, time) to achieve real-time refresh.
1. A simple Html page
1:
2:
3:
4:
5:
6:Simple clock
7:
8:
9:
10:
11: 0000
12: Year
13: 00
14: Month
15: 00
16: Day
17:
18:
19: 00
20 ::
21: 00
22 ::
23: 00
24: Week
25: 1
26:
27:
28:
29:
2. Implementation of clock. js
1: var timer = null;
2: var aNow = null;
3: var g_oImgWeek = null;
4: var aWeekName = ["day", "one", "two", "three", "four", "five", "Six"];
5:
6: function setclock ()
7 :{
8: setInterval (checkSwitch, 1000 );
9 :};
10: function checkSwitch ()
11 :{
12: var year = document. getElementById ('Year ');
13: var month = document. getElementById ('month ');
14: var date = document. getElementById ('date ');
15: var hour = document. getElementById ('hour ');
16: var minute = document. getElementById ('minute ');
17: var second = document. getElementById ('second ');
18: var week = document. getElementById ('Week ');
19:
20: aNow = getTimeArray ();
21:
22: year. innerHTML = aNow [0];
23: month. innerHTML = aNow [1];
24: date. innerHTML = aNow [2];
25: hour. innerHTML = aNow [3];
26: if (aNow [4] <10 ){
27: minute. innerHTML = '0' + aNow [4];
28 :}
29: else {
30: minute. innerHTML = aNow [4];
31 :}
32: if (aNow [5] <10 ){
33: second. innerHTML = '0' + aNow [5];
34 :}
35: else {
36: second. innerHTML = aNow [5];
37 :}
38: week. innerHTML = aWeekName [aNow [6];
39:
40 :}
41:
42: function toDouble (iNum)
43 :{
44: if (iNum <10)
45 :{
46: return '0' + iNum;
47 :}
48: else
49 :{
50: return ''+ iNum;
51 :}
52 :}
53:
54: function getTimeArray ()
55 :{
56: var oDate = new Date ();
57: var aNumber = [];
58:
59: var iYear = oDate. getYear ();
60: var iMonth = oDate. getMonth ();
61: var iDay = oDate. getDate ();
62: var iHour = oDate. getHours ();
63: var iMin = oDate. getMinutes ();
64: var iSec = oDate. getSeconds ();
65: var iWeek = oDate. getDay ();
66:
67: if (iYear <1900)
68 :{
69: iYear ++ = 1900;
70 :}
71:
72: var str = (iYear) + toDouble (iMonth + 1) + toDouble (iDay) + toDouble (iHour) + toDouble (iMin) + toDouble (iSec) + ''+ iWeek;
73: var aChar = str. split ('');
74:
75: for (I = 0; I 76 :{
77: aNumber [I] = parseInt (aChar [I]);
78 :}
79: return aNumber;
80 :}
 
3. Introduce the clock. js file in Html
1:

Related Article

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.