svgもjavascriptも初心者なのですが、好奇心に負けアナログ時計作成に足を踏み入れてしまいました。
私には沼が少し深過ぎたようです。。。
でもここまで来たら意地でも作りたいのでご教授お願いします。
html
1<!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>clock</title> 5 6 <script type="text/javascript"> 7 8 const hour = document.querySelector('hourhand'); 9 const minute = document.querySelector('minutehand'); 10 const second = document.querySelector('secondhand'); 11 12 13 const date = new Date(); 14 const sec = date.getSeconds()/60*360; 15 const min = date.getMinutes()/60*360+(s/60); 16 const hour = date.getHours()/12*360+(m/12); 17 18 second.style.transform='rotate(${sec}deg)'; 19 second.style.transform-origin='100 100'; 20 21 minute.style.transform='rotate(${min}deg)'; 22 minute.style.transform-origin='100 100'; 23 24 hour.style.transform='rotate(${hour}deg)'; 25 hour.style.transform-origin='100 100'; 26 27 28 </script> 29 </head> 30 <body> 31 32 33 <svg width="200" height="200"> 34 <g> 35 <circle id="center" 36 style="fill:#128A86; stroke: #C1EFED; 37 stroke-width: 2px;" 38 cx="100" cy="100" r="3" /> 39 <circle id="circle" 40 style="fill:#20B7AF" stroke: #FFF; 41 stroke-width: 12px; 42 cx="100" cy="100" r="80" /> 43 </g> 44 <g > 45 <line x1="100" y1="100" 46 x2="100" y2="60" 47 style="stroke-width: 6px; stroke: #fffbf9;" 48 id="hourhand" /> 49 </line> 50 <line x1="100" y1="100" 51 x2="100" y2="40" 52 style="stroke-width: 4px; stroke: #fdfdfd;" 53 id="minutehand" /> 54 55 <line x1="100" y1="100" 56 x2="100" y2="25" 57 style="stroke-width: 2px; stroke: #ff8400;" 58 id="secondhand"/> 59 </g> 60 <circle id="center" 61 style="fill:#128A86; stroke: #C1EFED; stroke-width: 2px;" 62 cx="100" cy="100" r="3" /> 63 </svg> 64 </body> 65</html> 66
css
1svg { 2 display: block; 3 position: absolute; 4 top: 100px; 5 left: 100px; 6 transform: translate(-50%, -50%);}
まず形にすらなっていないかもしれませんがお願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/07 14:14 編集