一款很漂亮实用的日历

1. <html>
   
2. 
   
3. <head>
   
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
   
5. <title>网页特效|Linkweb.cn/Js|---一个很漂亮实用的日历</title>
   
6. <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
   
7. //创建一个数组,用于存放每个月的天数
   
8. function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)
   
9. {
   
10. this[0] = m0;
    
11. this[1] = m1;
    
12. this[2] = m2;
    
13. this[3] = m3;
    
14. this[4] = m4;
    
15. this[5] = m5;
    
16. this[6] = m6;
    
17. this[7] = m7;
    
18. this[8] = m8;
    
19. this[9] = m9;
    
20. this[10] = m10;
    
21. this[11] = m11;
    
22. }
    
23. //实现月历
    
24. function calendar() {
    
25. var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec";
    
26. var today = new Date();
    
27. var thisDay;
    
28. var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
    
29. year = today.getYear() +1900;
    
30. thisDay = today.getDate();
    
31. if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;
    
32. nDays = monthDays[today.getMonth()];
    
33. firstDay = today;
    
34. firstDay.setDate(1);
    
35. testMe = firstDay.getDate();
    
36. if (testMe == 2) firstDay.setDate(0);
    
37. startDay = firstDay.getDay();
    
38. document.write("<div id='rili' style='position:absolute;width:140px;left:300px;top:100px;'>")
    
39. document.write("<TABLE width='217' BORDER='0' CELLSPACING='0' CELLPADDING='2' BGCOLOR='#0080FF'>")
    
40. document.write("<TR><TD><table border='0' cellspacing='1' cellpadding='2' bgcolor='Silver'>");
    
41. document.write("<TR><th colspan='7' bgcolor='#C8E3FF'>");
    
42. var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
    
43. var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
    
44. var now = new Date();
    
45. document.writeln("<FONT STYLE='font-size:9pt;Color:#330099'>" + "公元 " + now.getYear() + "年" + monthNames[now.getMonth()] + " " + now.getDate() + "日 " + dayNames[now.getDay()] + "</FONT>");
    
46. document.writeln("</TH></TR><TR><TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>日</FONT></TH>");
    
47. document.writeln("<th bgcolor='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>一</FONT></TH>");
    
48. document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>二</FONT></TH>");
    
49. document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>三</FONT></TH>");
    
50. document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>四</FONT></TH>");
    
51. document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>五</FONT></TH>");
    
52. document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>六</FONT></TH>");
    
53. document.writeln("</TR><TR>");
    
54. column = 0;
    
55. for (i=0; i<startDay; i++) {
    
56. document.writeln("\n<TD><FONT STYLE='font-size:9pt'> </FONT></TD>");
    
57. column++;
    
58. }
    
59. 
    
60. for (i=1; i<=nDays; i++) {
    
61. if (i == thisDay) {
    
62. document.writeln("</TD><TD ALIGN='CENTER' BGCOLOR='#FF8040'><FONT STYLE='font-size:9pt;Color:#ffffff'><B>")
    
63. }
    
64. else {
    
65. document.writeln("</TD><TD BGCOLOR='#FFFFFF' ALIGN='CENTER'><FONT STYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#330066'>");
    
66. }
    
67. document.writeln(i);
    
68. if (i == thisDay) document.writeln("</FONT></TD>")
    
69. column++;
    
70. if (column == 7) {
    
71. document.writeln("<TR>");
    
72. column = 0;
    
73. }
    
74. }
    
75. document.writeln("<TR><TD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'>")
    
76. document.writeln("<FORM NAME='clock' onSubmit='0'><FONT STYLE='font-size:9pt;Color:#ffffff'>")
    
77. document.writeln("现在时间:<INPUT TYPE='Text' NAME='face' ALIGN='TOP'></FONT></FORM></TD></TR></TABLE>")
    
78. document.writeln("</TD></TR></TABLE></div>");
    
79. }
    
80. </SCRIPT>
    
81. <SCRIPT LANGUAGE="JavaScript">
    
82. var timerID = null;
    
83. var timerRunning = false;
    
84. 
    
85. function stopclock (){
    
86. if(timerRunning)
    
87. clearTimeout(timerID);
    
88. timerRunning = false;}
    
89. 
    
90. //显示当前时间
    
91. function showtime () {
    
92. var now = new Date();
    
93. var hours = now.getHours();
    
94. var minutes = now.getMinutes();
    
95. var seconds = now.getSeconds()
    
96. var timeValue = " " + ((hours >12) ? hours -12 :hours)
    
97. timeValue += ((minutes < 10) ? ":0" : ":") + minutes
    
98. timeValue += ((seconds < 10) ? ":0" : ":") + seconds
    
99. timeValue += (hours >= 12) ? " 下午 " : " 上午 "
    
100. document.clock.face.value = timeValue;
     
101. timerID = setTimeout("showtime()",1000);//设置超时,使时间动态显示
     
102. timerRunning = true;}
     
103. 
     
104. function startclock () {
     
105. stopclock();
     
106. showtime();}
     
107. </SCRIPT>
     
108. </head>
     
109. 
     
110. <body onLoad="startclock(); timerONE=window.setTimeout">
     
111. 
     
112. <script language="JavaScript" type="text/javascript">
     
113. <!--
     
114. calendar();
     
115. //-->
     
116. 
     
117. </script>
     
118. 
     
119. </body>
     
120. 
     
121. </html>

复制代码

另一款挂历式的时间显示

1. <SCRIPT language=JavaScript>
   
2. function Year_Month(){
   
3. var now = new Date();
   
4. var yy = now.getYear();
   
5. var mm = now.getMonth()+1;
   
6. var cl = '<font color="#0000df">';
   
7. if (now.getDay() == 0) cl = '<font color="#c00000">';
   
8. if (now.getDay() == 6) cl = '<font color="#00c000">';
   
9. return(cl + yy + '年' + mm + '月</font>'); }
   
10. function Date_of_Today(){
    
11. var now = new Date();
    
12. var cl = '<font color="#ff0000">';
    
13. if (now.getDay() == 0) cl = '<font color="#c00000">';
    
14. if (now.getDay() == 6) cl = '<font color="#00c000">';
    
15. return(cl + now.getDate() + '</font>'); }
    
16. function Day_of_Today(){
    
17. var day = new Array();
    
18. day[0] = "星期日";
    
19. day[1] = "星期一";
    
20. day[2] = "星期二";
    
21. day[3] = "星期三";
    
22. day[4] = "星期四";
    
23. day[5] = "星期五";
    
24. day[6] = "星期六";
    
25. var now = new Date();
    
26. var cl = '<font color="#0000df">';
    
27. if (now.getDay() == 0) cl = '<font color="#c00000">';
    
28. if (now.getDay() == 6) cl = '<font color="#00c000">';
    
29. return(cl + day[now.getDay()] + '</font>'); }
    
30. function CurentTime(){
    
31. var now = new Date();
    
32. var hh = now.getHours();
    
33. var mm = now.getMinutes();
    
34. var ss = now.getTime() % 60000;
    
35. ss = (ss - (ss % 1000)) / 1000;
    
36. var clock = hh+':';
    
37. if (mm < 10) clock += '0';
    
38. clock += mm+':';
    
39. if (ss < 10) clock += '0';
    
40. clock += ss;
    
41. return(clock); }
    
42. function refreshCalendarClock(){
    
43. document.all.calendarClock1.innerHTML = Year_Month();
    
44. document.all.calendarClock2.innerHTML = Date_of_Today();
    
45. document.all.calendarClock3.innerHTML = Day_of_Today();
    
46. document.all.calendarClock4.innerHTML = CurentTime(); }
    
47. var webUrl = webUrl;
    
48. document.write('<table border="0" cellpadding="0" cellspacing="0"><tr><td>');
    
49. document.write('<table id="CalendarClockFreeCode" border="0" cellpadding="0" cellspacing="0"
    
50. 
    
51. width="60" height="70" ');
    
52. document.write('style="position:absolute;visibility:hidden" bgcolor="#eeeeee">');
    
53. document.write('<tr><td align="center"><font ');
    
54. document.write('style="cursor:hand;color:#ff0000;font-family:宋体;font-size:14pt;line-
    
55. 
    
56. height:120%" ');
    
57. if (webUrl != 'netflower'){
    
58. document.write('</td></tr><tr><td align="center"><font ');
    
59. document.write('style="cursor:hand;color:#2000ff;font-family:宋体;font-size:9pt;line-
    
60. 
    
61. height:110%" ');
    
62. }
    
63. document.write('</td></tr></table>');
    
64. document.write('<table border="0" cellpadding="0" cellspacing="0" width="61"
    
65. 
    
66. bgcolor="#C0C0C0" height="70">');
    
67. document.write('<tr><td valign="top" width="100%" height="100%">');
    
68. document.write('<table border="1" cellpadding="0" cellspacing="0" width="58"
    
69. 
    
70. bgcolor="#FEFEEF" height="67">');
    
71. document.write('<tr><td align="center" width="100%" height="100%" >');
    
72. document.write('<font id="calendarClock1" style="font-family:宋体;font-size:7pt;line-
    
73. 
    
74. height:120%"> </font><br>');
    
75. document.write('<font id="calendarClock2" style="color:#ff0000;font-family:Arial;font-
    
76. 
    
77. size:14pt;line-height:120%"> </font><br>');
    
78. document.write('<font id="calendarClock3" style="font-family:宋体;font-size:9pt;line-
    
79. 
    
80. height:120%"> </font><br>');
    
81. document.write('<font id="calendarClock4" style="color:#100080;font-family:宋体;font-
    
82. 
    
83. size:8pt;line-height:120%"><b> </b></font>');
    
84. document.write('</td></tr></table>');
    
85. document.write('</td></tr></table>');
    
86. document.write('</td></tr></table>');
    
87. setInterval('refreshCalendarClock()',1000);
    
88. </SCRIPT>

复制代码

实时走动的时钟

1. <SCRIPT LANGUAGE="JavaScript">
   
2. <!-- Begin
   
3. fCol = '000000';  //face colour.
   
4. sCol = 'ff0000';  //seconds colour.
   
5. mCol = '000000';  //minutes colour.
   
6. hCol = '000000';  //hours colour.
   
7. H = '....';
   
8. H = H.split('');
   
9. M = '.....';
   
10. M = M.split('');
    
11. S = '......';
    
12. S = S.split('');
    
13. Ypos = 0;
    
14. Xpos = 0;
    
15. Ybase = 8;
    
16. Xbase = 8;
    
17. dots = 12;
    
18. ns = (document.layers)?1:0;
    
19. if (ns) {
    
20. dgts = '1 2 3 4 5 6 7 8 9 10 11 12';
    
21. dgts = dgts.split(' ');
    
22. for (i = 0; i < dots; i++) {
    
23. document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial,Verdana size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>');
    
24. }
    
25. for (i = 0; i < M.length; i++) {
    
26. document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>');
    
27. }
    
28. for (i = 0; i < H.length; i++) {
    
29. document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>');
    
30. }
    
31. for (i = 0; i < S.length; i++) {
    
32. document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>');
    
33.    }
    
34. }
    
35. else {
    
36. document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    
37. for (i = 1; i < dots+1; i++) {
    
38. document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial,Verdana;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
    
39. }
    
40. document.write('</div></div>')
    
41. document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    
42. for (i = 0; i < M.length; i++) {
    
43. document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
    
44. }
    
45. document.write('</div></div>')
    
46. document.write('</div></div>')
    
47. document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    
48. for (i = 0; i < H.length; i++) {
    
49. document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
    
50. }
    
51. document.write('</div></div>')
    
52. document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    
53. for (i = 0; i < S.length; i++) {
    
54. document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
    
55. }
    
56. document.write('</div></div>')
    
57. }
    
58. function clock() {
    
59. time = new Date ();
    
60. secs = time.getSeconds();
    
61. sec = -1.57 + Math.PI * secs/30;
    
62. mins = time.getMinutes();
    
63. min = -1.57 + Math.PI * mins/30;
    
64. hr = time.getHours();
    
65. hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
    
66. if (ns) {
    
67. Ypos = window.pageYOffset+window.innerHeight-60;
    
68. Xpos = window.pageXOffset+window.innerWidth-80;
    
69. }
    
70. else {
    
71. Ypos = document.body.scrollTop + window.document.body.clientHeight - 60;
    
72. Xpos = document.body.scrollLeft + window.document.body.clientWidth - 60;
    
73. }
    
74. if (ns) {
    
75. for (i = 0; i < dots; ++i){
    
76. document.layers["nsDigits"+i].top = Ypos - 5 + 40 * Math.sin(-0.49+dots+i/1.9);
    
77. document.layers["nsDigits"+i].left = Xpos - 15 + 40 * Math.cos(-0.49+dots+i/1.9);
    
78. }
    
79. for (i = 0; i < S.length; i++){
    
80. document.layers["nx"+i].top = Ypos + i * Ybase * Math.sin(sec);
    
81. document.layers["nx"+i].left = Xpos + i * Xbase * Math.cos(sec);
    
82. }
    
83. for (i = 0; i < M.length; i++){
    
84. document.layers["ny"+i].top = Ypos + i * Ybase * Math.sin(min);
    
85. document.layers["ny"+i].left = Xpos + i * Xbase * Math.cos(min);
    
86. }
    
87. for (i = 0; i < H.length; i++){
    
88. document.layers["nz"+i].top = Ypos + i * Ybase * Math.sin(hrs);
    
89. document.layers["nz"+i].left = Xpos + i * Xbase * Math.cos(hrs);
    
90.    }
    
91. }
    
92. else{
    
93. for (i=0; i < dots; ++i){
    
94. ieDigits[i].style.pixelTop = Ypos - 15 + 40 * Math.sin(-0.49+dots+i/1.9);
    
95. ieDigits[i].style.pixelLeft = Xpos - 14 + 40 * Math.cos(-0.49+dots+i/1.9);
    
96. }
    
97. for (i=0; i < S.length; i++){
    
98. x[i].style.pixelTop = Ypos + i * Ybase * Math.sin(sec);
    
99. x[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(sec);
    
100. }
     
101. for (i=0; i < M.length; i++){
     
102. y[i].style.pixelTop = Ypos + i * Ybase * Math.sin(min);
     
103. y[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(min);
     
104. }
     
105. for (i=0; i < H.length; i++){
     
106. z[i].style.pixelTop = Ypos + i * Ybase*Math.sin(hrs);
     
107. z[i].style.pixelLeft = Xpos + i * Xbase*Math.cos(hrs);
     
108.    }
     
109. }
     
110. setTimeout('clock()', 50);
     
111. }
     
112. if (document.layers || document.all) window.onload = clock;
     
113. //  End -->
     
114. </script>
     
115. 
     

复制代码