<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Analog clock</title> <script> function clock(){ //calculate angle var d, h, m, s; d = new Date; h = 30 * ((d.getHours() % 12) + d.getMinutes() / 60); m = 6 * d.getMinutes(); s = 6 * d.getSeconds(); //move hands setAttr('h-hand', h); setAttr('m-hand', m); setAttr('s-hand', s); setAttr('s-tail', s+180); //display time h = d.getHours(); m = d.getMinutes(); s = d.getSeconds(); if(h >= 12){ setText('suffix', 'PM'); } else{ setText('suffix', 'AM'); } if(h != 12){ h %= 12; } setText('sec', s); setText('min', m); setText('hr', h); //call every second setTimeout(clock, 1000); }; function setAttr(id,val){ var v = 'rotate(' + val + ', 70, 70)'; document.getElementById(id).setAttribute('transform', v); }; function setText(id,val){ if(val < 10){ val = '0' + val; } document.getElementById(id).innerHTML = val; }; window.onload=clock; </script> <style> *{ margin:0; padding:0; font-family:sans-serif; font-size:14px; font-weight:bold; } .analog-clock{ width:140px; height:140px; position:relative; } #clock-face{ stroke:red; stroke-width:2px; fill:white; } #h-hand, #m-hand, #s-hand, #s-tail{ stroke-linecap:round; } #h-hand{ stroke:blue; stroke-width:5px; } #m-hand{ stroke:green; stroke-width:2px; } #s-hand, #s-tail{ stroke:purple; stroke-width:1px; } .aa{ stroke:black; stroke-linecap:round; stroke-width:2px; } .time-text{ text-align:center; border:3px double green; } div{ color:blue; } #myclock{ position:absolute; left:50px; top:35px; font-size:12px; text-align:center; color:#C30; } #myname{ position:absolute; left:34px; top:85px; font-size:10px; text-align:center; color:#F90; } </style> </head> <body> <div class="analog-clock"> <!-- <div id="myclock"><br>Analog<br>Clock</div> --> <svg width="140" height="140"> <circle id="clock-face" cx="70" cy="70" r="65" /> <line id="h-hand" x1="70" y1="70" x2="70" y2="30" /> <line id="m-hand" x1="70" y1="70" x2="70" y2="20" /> <line id="s-hand" x1="70" y1="70" x2="70" y2="12" /> <line id="s-tail" x1="70" y1="70" x2="70" y2="56" /> <text x="62" y="18">12</text> <text x="94" y="26">1</text> <text x="116" y="45">2</text> <text x="126" y="76">3</text> <text x="116" y="104">4</text> <text x="94" y="125">5</text> <text x="66" y="130">6</text> <text x="38" y="125">7</text> <text x="16" y="104">8</text> <text x="7" y="76">9</text> <text x="14" y="48">10</text> <text x="34" y="27">11</text> </svg> <div class="time-text"> <span id="hr">00</span> <span>:</span> <span id="min">00</span> <span>:</span> <span id="sec">00</span> <span id="suffix">--</span> </div> </div> </body> </html>
დააკოპირეთ
