Last active
August 29, 2015 14:02
-
-
Save 910JQK/993c55522f21405a7a51 to your computer and use it in GitHub Desktop.
SVG Classical Chinese Clock Driven by Javascript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>SVG Clock</title> | |
| <script type="text/javascript"> | |
| /* ------------------------ */ | |
| /* SVG Pointer Clock by JQK */ | |
| /* ------------------------ */ | |
| const Hours = ['子','丑','寅','卯','辰','巳','午','未','申','酉','戌','亥']; | |
| const Quarters = ['初初','初一','初二','初三','正初','正一','正二','正三']; | |
| const Round = Math.PI*2; | |
| const Q = [59, 14, 29, 44]; | |
| var LM; | |
| function Match(val ,arr){ | |
| var i; | |
| for(i=0;i<arr.length;i++){ | |
| if(val === arr[i]) return true; | |
| } | |
| return false; | |
| } | |
| function r_quarters(){ | |
| /* 獲取時間 */ | |
| var d = new Date(); | |
| var min = d.getMinutes() | |
| /* 計算比值，渲染刻針 */ | |
| var Ratio = (min*60+d.getSeconds())/900; | |
| Render(Pointer.quarters, Ratio, 80); | |
| /* 分鐘改變，處理時針 */ | |
| if(LM != min){ | |
| if(Match(LM, Q)) r_hours(); | |
| LM = min; | |
| } | |
| } | |
| function r_hours(){ | |
| /* 獲取時間 */ | |
| var d = new Date(); | |
| /* 計算比值，渲染時針 */ | |
| var Ratio = (d.getHours()*60+d.getMinutes())/1440; | |
| Render(Pointer.hours, Ratio, 70); | |
| /* 變更點色，奇刻為藍，偶刻為紅 */ | |
| var p_color = "#0000FF"; | |
| var I = d.getHours()*2+Math.floor(d.getMinutes()/30)+2; /* 兩刻 */ | |
| var i = d.getHours()*4+Math.floor(d.getMinutes()/15)+4; /* 一刻 */ | |
| var _i = I -1; | |
| if(I == 2){ | |
| /* 子時處理 */ | |
| _i = 49; | |
| } | |
| if(i % 2 == 0) p_color = "#FF0000"; | |
| document.querySelector(".point-"+_i).style.fill = ""; | |
| document.querySelector(".point-"+I).style.fill = p_color; | |
| /* 高亮當前時 */ | |
| var H = Math.floor(I/4); | |
| var HH = H; | |
| var _h = H - 1; | |
| if(H == 12 || H == 0){ | |
| /* 子時處理 */ | |
| H = 0; | |
| _h = 11; | |
| } | |
| document.querySelector(".hTxt-"+_h).style.fill = ""; | |
| document.querySelector(".hTxt-"+H).style.fill = "#BBB"; | |
| /* 文字時間 */ | |
| document.querySelector(".time_text").textContent = Hours[H] + '時・' + Quarters[i-HH*8] + '刻'; | |
| } | |
| function Render(ptr, ratio, len){ | |
| var Theta = Round*ratio; | |
| ptr.x2.baseVal.value = Math.cos(Theta)*len; | |
| ptr.y2.baseVal.value = Math.sin(Theta)*len; | |
| } | |
| function init(){ | |
| Pointer = { | |
| "hours":document.querySelector("#hours_pointer"), | |
| "quarters":document.querySelector("#quarters_pointer") | |
| }; | |
| setInterval(r_quarters, 1000); | |
| r_quarters(); | |
| r_hours(); | |
| } | |
| /* ------------------------ */ | |
| /* Functions of Development */ | |
| /* ------------------------ */ | |
| function DrawTxt(l){ | |
| rdiv = document.createElement("div"); | |
| for(i=0;i<12;i++){ | |
| var Theta = i*(Math.PI/6); | |
| var y = -1*l*Math.cos(Theta); /* Y = -x */ | |
| var x = l*Math.sin(Theta); /* X = y */ | |
| /* Central Vertical Alignment hasn't been well supported yet. */ | |
| y += 5; /* It's a bad fix */ | |
| rdiv.textContent+='<text x="'+x.toFixed(1)+'" y="'+y.toFixed(1)+'" class="hTxt-'+i+'">'+Hours[i]+'</text>'; | |
| } | |
| document.body.appendChild(rdiv); | |
| } | |
| function DrawPoint(l){ | |
| rdiv = document.createElement("div"); | |
| for(i=0;i<48;i++){ | |
| var Theta = i*(Math.PI/24); | |
| var y = -1*l*Math.cos(Theta); /* Y = -x */ | |
| var x = l*Math.sin(Theta); /* X = y */ | |
| var r = 3; | |
| var C = "point-"+(i+2); | |
| if((i+2) % 4 == 0){ | |
| r = 4; | |
| C += " point-int"; | |
| } | |
| rdiv.textContent += '<circle cx="'+x.toFixed(1)+'" cy="'+y.toFixed(1)+'" r="'+r+'" class="'+C+'" />'; | |
| } | |
| document.body.appendChild(rdiv); | |
| } | |
| </script> | |
| <style> | |
| .Group_Global {text-anchor:middle;} | |
| .Group_Points {fill:gray;} | |
| .point-int {fill:#444;} | |
| text {fill:gray;} | |
| </style> | |
| </head> | |
| <body onload="init()"> | |
| <svg width="240" height="240" > | |
| <g class="Group_Global" transform="translate(120,120)" > | |
| <text x="0" y="25" style="text-align:center;font-size:80%;fill:#BBB;" class="time_text" ></text> | |
| <circle cx="0" cy="0" r="115" style="fill:none;stroke:black;stroke-width:4;" /> | |
| <g class="Group_Line" transform="rotate(-90)" > | |
| <line id="hours_pointer" x1="0" y1="0" x2="70" y2="0"style="stroke:rgb(99,99,99);stroke-width:2"/> | |
| <line id="quarters_pointer" x1="0" y1="0" x2="80" y2="0"style="stroke:#AA3333;stroke-width:2"/> | |
| </g> | |
| <circle cx="0" cy="0" r="3" style="fill:gray;" /> | |
| <g class="Group_Points"> | |
| <circle cx="0.0" cy="-105.0" r="3" class="point-2" /><circle cx="13.7" cy="-104.1" r="3" class="point-3" /><circle cx="27.2" cy="-101.4" r="4" class="point-4 point-int" /><circle cx="40.2" cy="-97.0" r="3" class="point-5" /><circle cx="52.5" cy="-90.9" r="3" class="point-6" /><circle cx="63.9" cy="-83.3" r="3" class="point-7" /><circle cx="74.2" cy="-74.2" r="4" class="point-8 point-int" /><circle cx="83.3" cy="-63.9" r="3" class="point-9" /><circle cx="90.9" cy="-52.5" r="3" class="point-10" /><circle cx="97.0" cy="-40.2" r="3" class="point-11" /><circle cx="101.4" cy="-27.2" r="4" class="point-12 point-int" /><circle cx="104.1" cy="-13.7" r="3" class="point-13" /><circle cx="105.0" cy="-0.0" r="3" class="point-14" /><circle cx="104.1" cy="13.7" r="3" class="point-15" /><circle cx="101.4" cy="27.2" r="4" class="point-16 point-int" /><circle cx="97.0" cy="40.2" r="3" class="point-17" /><circle cx="90.9" cy="52.5" r="3" class="point-18" /><circle cx="83.3" cy="63.9" r="3" class="point-19" /><circle cx="74.2" cy="74.2" r="4" class="point-20 point-int" /><circle cx="63.9" cy="83.3" r="3" class="point-21" /><circle cx="52.5" cy="90.9" r="3" class="point-22" /><circle cx="40.2" cy="97.0" r="3" class="point-23" /><circle cx="27.2" cy="101.4" r="4" class="point-24 point-int" /><circle cx="13.7" cy="104.1" r="3" class="point-25" /><circle cx="0.0" cy="105.0" r="3" class="point-26" /><circle cx="-13.7" cy="104.1" r="3" class="point-27" /><circle cx="-27.2" cy="101.4" r="4" class="point-28 point-int" /><circle cx="-40.2" cy="97.0" r="3" class="point-29" /><circle cx="-52.5" cy="90.9" r="3" class="point-30" /><circle cx="-63.9" cy="83.3" r="3" class="point-31" /><circle cx="-74.2" cy="74.2" r="4" class="point-32 point-int" /><circle cx="-83.3" cy="63.9" r="3" class="point-33" /><circle cx="-90.9" cy="52.5" r="3" class="point-34" /><circle cx="-97.0" cy="40.2" r="3" class="point-35" /><circle cx="-101.4" cy="27.2" r="4" class="point-36 point-int" /><circle cx="-104.1" cy="13.7" r="3" class="point-37" /><circle cx="-105.0" cy="0.0" r="3" class="point-38" /><circle cx="-104.1" cy="-13.7" r="3" class="point-39" /><circle cx="-101.4" cy="-27.2" r="4" class="point-40 point-int" /><circle cx="-97.0" cy="-40.2" r="3" class="point-41" /><circle cx="-90.9" cy="-52.5" r="3" class="point-42" /><circle cx="-83.3" cy="-63.9" r="3" class="point-43" /><circle cx="-74.2" cy="-74.2" r="4" class="point-44 point-int" /><circle cx="-63.9" cy="-83.3" r="3" class="point-45" /><circle cx="-52.5" cy="-90.9" r="3" class="point-46" /><circle cx="-40.2" cy="-97.0" r="3" class="point-47" /><circle cx="-27.2" cy="-101.4" r="4" class="point-48 point-int" /><circle cx="-13.7" cy="-104.1" r="3" class="point-49" /> | |
| </g> | |
| <g class="Group_Text"> | |
| <text x="0.0" y="-85.0" class="hTxt-0">子</text><text x="45.0" y="-72.9" class="hTxt-1">丑</text><text x="77.9" y="-40.0" class="hTxt-2">寅</text><text x="90.0" y="5.0" class="hTxt-3">卯</text><text x="77.9" y="50.0" class="hTxt-4">辰</text><text x="45.0" y="82.9" class="hTxt-5">巳</text><text x="0.0" y="95.0" class="hTxt-6">午</text><text x="-45.0" y="82.9" class="hTxt-7">未</text><text x="-77.9" y="50.0" class="hTxt-8">申</text><text x="-90.0" y="5.0" class="hTxt-9">酉</text><text x="-77.9" y="-40.0" class="hTxt-10">戌</text><text x="-45.0" y="-72.9" class="hTxt-11">亥</text> | |
| </g> | |
| </g> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
[140612] 俢復子時問題