SVG, JavaScriptで時計作成中

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%);}

まず形にすらなっていないかもしれませんがお願いします。

行動規範の内容に同意します

回答2件

https://codepen.io/vaskopetrov/pen/yVEXjz

自分はcodepen でいくつか検索して、それを参考につくったことあります。
直接的な回答でなくてすいません。

投稿2020/04/05 16:14

may88seiji

総合スコア79

Tnmk

2020/04/07 14:14 編集

svgへの理解が欠けているので今度はまずこの形で自作してみようと思います。ご回答ありがとうございました。

行動規範の内容に同意します

なんとなくフルスクラッチで書いてみました

codepen

※ざっと書いたのでバグってたらすみません

投稿2020/04/06 03:26

編集2020/04/06 03:29

yambejp

総合スコア114775

yambejp

2020/04/06 03:32 編集

ちなみにこれは正しく円周上を針が回っているわけではなく 60角形の外周上を針の先端が移動しています（つまり針がびみょーに伸び縮みしている）ポイントは・座標を求めるのにラジアンでcos/sinすること・マイナス90度から6度ずつ270度まで60回処理することこれがわかれば後はなんとでもなります

Tnmk

2020/04/07 14:13

何とか動きましたが、ほぼ丸写し… 分からないところを調べながら作成したので以前よりは動かし方の全容が掴めた気がします。 JavaScriptに関してもsvgに関しても分からないことが多いのでもう少し理解を深めた後再チャレンジしてみようと思います。ちなみに時計って難易度でいうとどれ位なんでしょうか？

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

SVG, JavaScriptで時計作成中

関連した質問