JavaScript/CSS sample codes
============Clock Begin==========
View Code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script type="text/javascript"> 5 var H='....'; 6 var H=H.split(''); 7 var M='.....'; 8 var M=M.split(''); 9 var S='......'; 10 var S=S.split(''); 11 var Ypos=0; 12 var Xpos=0; 13 var Ybase=8; 14 var Xbase=8; 15 var dots=12; 16 17 function clock(){ 18 var time=new Date (); 19 var secs=time.getSeconds(); 20 var sec=-1.57 + Math.PI * secs/30; 21 var mins=time.getMinutes(); 22 var min=-1.57 + Math.PI * mins/30; 23 var hr=time.getHours(); 24 var hrs=-1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360; 25 for (i=0; i < dots; ++i){ 26 document.getElementById("dig" + (i+1)).style.top=0-15+40*Math.sin(-0.49+dots+i/1.9).toString() + "px"; 27 document.getElementById("dig" + (i+1)).style.left=0-14+40*Math.cos(-0.49+dots+i/1.9).toString() + "px"; 28 } 29 for (i=0; i < S.length; i++){ 30 document.getElementById("sec" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(sec).toString() + "px"; 31 document.getElementById("sec" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(sec).toString() + "px"; 32 } 33 for (i=0; i < M.length; i++){ 34 document.getElementById("min" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(min).toString() + "px"; 35 document.getElementById("min" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(min).toString() + "px"; 36 } 37 for (i=0; i < H.length; i++){ 38 document.getElementById("hour" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(hrs).toString() + "px"; 39 document.getElementById("hour" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(hrs).toString() + "px"; 40 } 41 } 42 setInterval('clock()',50); 43 </script> 44 <style type="text/css"> 45 div.dig, div.hour, div.min, div.sec 46 { 47 position:absolute; 48 } 49 div.hour, div.min, div.sec 50 { 51 width:2px; 52 height:2px; 53 font-size:2px; 54 } 55 div.dig 56 { 57 width:30px; 58 height:30px; 59 font-family:arial,verdana,sans-serif; 60 font-size:10px; 61 color:#000000; 62 text-align:center; 63 padding-top:10px 64 } 65 div.min 66 { 67 background:#0000FF; 68 } 69 div.hour 70 { 71 background:#000000; 72 } 73 div.sec 74 { 75 background:#FF0000; 76 } 77 </style> 78 </head> 79 <body> 80 <div style="width:120px;height:100px;position:relative;left:58px;top:50px;"> 81 <div id="dig1" class="dig">1</div> 82 <div id="dig2" class="dig">2</div> 83 <div id="dig3" class="dig">3</div> 84 <div id="dig4" class="dig">4</div> 85 <div id="dig5" class="dig">5</div> 86 <div id="dig6" class="dig">6</div> 87 <div id="dig7" class="dig">7</div> 88 <div id="dig8" class="dig">8</div> 89 <div id="dig9" class="dig">9</div> 90 <div id="dig10" class="dig">10</div> 91 <div id="dig11" class="dig">11</div> 92 <div id="dig12" class="dig">12</div> 93 94 <div id="hour1" class="hour"></div> 95 <div id="hour2" class="hour"></div> 96 <div id="hour3" class="hour"></div> 97 <div id="hour4" class="hour"></div> 98 99 <div id="min1" class="min"></div> 100 <div id="min2" class="min"></div> 101 <div id="min3" class="min"></div> 102 <div id="min4" class="min"></div> 103 <div id="min5" class="min"></div> 104 105 <div id="sec1" class="sec"></div> 106 <div id="sec2" class="sec"></div> 107 <div id="sec3" class="sec"></div> 108 <div id="sec4" class="sec"></div> 109 <div id="sec5" class="sec"></div> 110 <div id="sec6" class="sec"></div> 111 </div> 112 </body> 113 </html>
============Clock End===========
Waiting for update
