今回はjavascriptでアナログ時計を作ってみました。 なぜ作ったか アナログ時計なので 時間周りの処理が必要なのでそこらへんの勉強になるのと、 あまりwebサイトではアナログ時計を見ないですが、サイトにあったら意外とお洒落かもと思って 作ってみました。 作るアナログ時計の完成イメージ 基本的な丸型の時計です。 コード html まずはアナログ時計の元になるhtmlを書いていきます。 必要なhtmlはごく少量です。 大きく分けて、必要なのは 外枠 時針 分針 秒針 時間の文字 これだけです。 <div class="c-clock"> // 外枠 <span class="c-clock__hour"></span> <!-- 時計 --> <span class="c-clock__min"></span> <!-- 分針 --> <span class="c-clock__sec"
![javascriptでアナログ時計を作成 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ae022d6c33dc8db6829d8c976e6a259fb2199ad8/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9amF2YXNjcmlwdCVFMyU4MSVBNyVFMyU4MiVBMiVFMyU4MyU4QSVFMyU4MyVBRCVFMyU4MiVCMCVFNiU5OSU4MiVFOCVBOCU4OCVFMyU4MiU5MiVFNCVCRCU5QyVFNiU4OCU5MCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YzhmYWU0M2M0M2JmZDU2NTgzNmEwMWY4NjMxMmEzNzg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB3LXRkb24mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWI3NjFlMmFhYTBjOTRjNzgzYmFjZWNiNjEyYzc5ODY4%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D94d34a8f47c89cce42af9ba30bec6b4d)