Socrates
2014-04-07加入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | <!DOCTYPE html> <html> <head> <title>clock1</title> <script> function timeDisplay() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); divDisplay("h",h); divDisplay("m",m); divDisplay("s",s); h = checkTime(h); m = checkTime(m); s = checkTime(s); document.getElementById("txt").innerHTML = h + ":" + m + ":" + s; t = setTimeout(function(){timeDisplay()},1000); } function checkTime(i) { if(i<10) i = "0" + i; return i; } function divDisplay(divId,num) { var divDs=""; var mod = num % 5; if(divId=="h") //hours { if(num>12) { num -= 12; } for(var i = 0; i < 12; ++i) { if(i < 12 - num) divDs += "<div class='emp'></div>"; else divDs += "<div class='" + divId + "'></div>"; } } else //minutes and seconds { for(var j = 0; j < 12; ++j) { if(num == 0) num = 60; if(j< 12 - (num+4)/5) //上方空白区 divDs +="<div class='emp'></div>"; else if(j == 12 - (num+4)/5 ) //5s为一个单位，1~5s方框不断变高 divDs += oneDiv(divId,mod); else //底部 divDs += "<div class='" + divId + "'></div>"; } } document.getElementById(divId).innerHTML = divDs; } function oneDiv(divId,n) { var showDiv=""; switch(n) { case 0: showDiv += "<div class='" + divId + "'></div>"; break; case 1: for(var i = 0; i < 4; ++i) showDiv += "<div class='empS'></div>"; showDiv += "<div class='" + divId + "S'></div>"; break; case 2: for(var i = 0; i < 3; ++i) showDiv += "<div class='empS'></div>"; for(var i = 0; i < 2; ++i) showDiv += "<div class='" + divId + "S'></div>"; break; case 3: showDiv += "<div class='empS'></div><div class='empS'></div>"; for(var i = 0; i < 3; ++i) showDiv += "<div class='" + divId + "S'></div>"; break; case 4: showDiv += "<div class='empS'></div>"; for(var i = 0; i < 4; ++i) showDiv += "<div class='" + divId + "S'></div>"; break; } return showDiv; } </script> <style> div{float:left;} .h{width:100px;height:28px;border:1px white solid;background-color:red;} .m{width:100px;height:28px;border:1px white solid;background-color:green;} .s{width:100px;height:28px;border:1px white solid;background-color:blue;} .hS{width:100px;height:4px;border:1px white solid;background-color:red;} .mS{width:100px;height:4px;border:1px white solid;background-color:green;} .sS{width:100px;height:4px;border:1px white solid;background-color:blue;} .emp{width:100px;height:28px;border:1px white solid;} .empS{width:100px;height:4px;border:1px white solid;} #h,#m,#s{width:102px;height:360px;border:1px white solid;} #container{width:312px;} #txt{font-family:微软雅黑;font-size:77px;} </style> </head> <body onLoad="timeDisplay()"> <div id="container"> <div id="h"></div> <div id="m"></div> <div id="s"></div> <p id="txt"></p> </div> </body> </html> |
目前还没有评论