JavaScriptを使用してのアナログ時計の作成

こちらのサイトを参考にしてアナログ時計の実装を目指していたのですが
https://kuroeveryday.blogspot.com/2018/07/how-to-create-an-analog-clock.html

javascriptが動きません

コードとしては

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<link rel="stylesheet" type="text/css" href="style.css">
6 <script type="text/javascript" src="clock.js"></script>
7<title>時計</title>
8</head>
9<body>
10<section class="clock">
11  <div class="dials">
12    <div></div>
13    <div></div>
14    <div></div>
15    <div></div>
16    <div></div>
17    <div></div>
18    <div></div>
19    <div></div>
20    <div></div>
21    <div></div>
22    <div></div>
23    <div></div>
24  </div>
25  <div class="hour hand"></div>
26  <div class="minute hand"></div>
27  <div class="second hand"></div>
28</section>
29</body>
30</html>

css
1.clock {
2  position: relative;
3  width: 300px;
4  height: 300px;
5  border-radius: 50%;
6  border: solid 2px silver;
7}
8
9.clock::after {
10  content: "";
11  position: absolute;
12  top: calc(50% - 8px);
13  left: calc(50% - 8px);
14  border-radius: 50%;
15  width: 16px;
16  height: 16px;
17  background-color: silver;
18}
19
20.dials {
21  position: relative;
22  width: 100%;
23  height: 100%;
24}
25
26.dials > div {
27  position: absolute;
28  top: 0;
29  left: calc(50% - 3px);
30  width: 6px;
31  height: 50%;
32  transform-origin: bottom;
33}
34.dials > div::after {
35  position: absolute;
36  top: 0;
37  content: "";
38  width: 6px;
39  height: 15px;
40  background-color: silver;
41}
42
43.dials div:nth-child(1) { transform: rotate(30deg); }
44.dials div:nth-child(2) { transform: rotate(60deg); }
45.dials div:nth-child(3) { transform: rotate(90deg); }
46.dials div:nth-child(4) { transform: rotate(120deg); }
47.dials div:nth-child(5) { transform: rotate(150deg); }
48.dials div:nth-child(6) { transform: rotate(180deg); }
49.dials div:nth-child(7) { transform: rotate(210deg); }
50.dials div:nth-child(8) { transform: rotate(240deg); }
51.dials div:nth-child(9) { transform: rotate(270deg); }
52.dials div:nth-child(10) { transform: rotate(300deg); }
53.dials div:nth-child(11) { transform: rotate(330deg); }
54.dials div:nth-child(12) { transform: rotate(360deg); }
55
56.hand {
57  position: absolute;
58  bottom: 50%;
59  left: 50%;
60  background-color: silver;
61  transform-origin: 50% 100%;
62}
63
64.hour.hand {
65  width: 6px;
66  height: 90px;
67}
68
69.minute.hand {
70  width: 4px;
71  height: 140px;
72}

javascript
1const hour = document.querySelector(".hour.hand");
2const minute = document.querySelector(".minute.hand");
3const second = document.querySelector(".second.hand");
4
5setInterval(() => {
6  const date = new Date();
7  const s = (360 / 60) * date.getSeconds();
8  const m = (360 / 60) * date.getMinutes() + (s / 60);
9  const h = (360 / 24) * date.getHours() + (m / 24);
10  
11  second.style.transform = `rotate(${s}deg)`;
12  minute.style.transform = `rotate(${m}deg)`;
13  hour.style.transform = `rotate(${h}deg)`;
14}, 1000);
15

となっております。
よろしくお願いします。

m.ts10806

2020/01/13 02:57

>Javascriptに関して全くの初心者なので教えていただいです。ひとまず質問に「初心者アイコン」つけましょう。質問内にわざわざ書かなくて良いです

m.ts10806

2020/01/13 02:57

あと >javascriptが動きませんこれをどのように確認したのか具体的に記載してください。間違っているのか合っているのか誰にも分からないので。

rails_

2020/01/13 07:52

作成後index.htmlを押して開いても針が動きませんでした second.style.transform = `rotate(${s}deg)`;の部分で Uncaught TypeError: Cannot read property 'style' of null エラーがでてしまい動かないです

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

回答1件

ベストアンサー

一応動いています。
足りないのはCSSです。
以下のCSSのコピペ忘れです。

CSS
1
2.second.hand {
3  width: 2px;
4  height: 130px;
5}
6

投稿2020/01/12 17:23

kyoya0819

総合スコア10429

rails_

2020/01/13 07:55

CSSを修正しても動作しませんでした。 second.style.transform = `rotate(${s}deg)`;の部分で Uncaught TypeError: Cannot read property 'style' of null エラーがでてしまい動かないです

kyoya0819

2020/01/13 08:47

window.onloadで発火するようにしていますか？

rails_

2020/01/16 08:47

サイトにあったコメントのほうのjsを試してみても同じところでエラーがでてしまい動きませんでした。。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

JavaScriptを使用してのアナログ時計の作成

関連した質問