【JavaScript】アナログ時計の作り方【サンプル】

こんにちは。先日JavaScriptでカウントダウンタイマーを作成してみました！
詳しくはこちらをご欄ください。

今回はDateオブジェクトを使用して、アナログ時計を作成してみました。
良かったら試してみてください。

HTML
CSS
JavaScript
デモ
まとめ

HTML

まずは、HTMLからです。
それぞれの役割はこちらです。

wrapperクラス：ラッパー
clockクラス：時計全体
scaleクラス：時計のメモリの枠
　※ JavaScriptでそれぞれのメモリを設定します。
hourクラス：時針
minクラス：分針
secクラス：秒針

<body>
    <div class="wrapper">
        <div class="clock">
            <div class="scale"></div>
            <div class="hour line"></div>
            <div class="min line"></div>
            <div class="sec line"></div>
        </div>
    </div>
</body>

CSS

こちらがスタイルの設定です。

@charset "utf-8";

.wrapper {
    width: 100%;
    padding: 40px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    flex-direction: column;
}

.clock {
    background-color: rgba(255, 243, 217, 0.2);
    border: 3px solid #C6A35B;
    width: 400px;
    height: 400px;
    position: relative;
    border-radius: 50%;
}

.clock::after {
    width: 16px;
    height: 16px;
    background: #C6A35B;
    content: "";

    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    border-radius: 50%;
}

.line {
    position: absolute;
    transform-origin: bottom;
}

.hour {
    width: 8px;
    height: 140px;
    background: #C6A35B;
    top: calc(50% - 140px);
    left: calc(50% - 4px);
}

.min {
    width: 4px;
    height: 180px;
    background: #C6A35B;
    top: calc(50% - 180px);
    left: calc(50% - 2px);
}

.sec {
    width: 1px;
    height: 180px;
    background: #D4BB92;
    top: calc(50% - 180px);
    left: calc(50% - 0.5px);
}

.scale {
    position: relative;
    width: 100%;
    height: 100%;
}

.scale > div {
    position: absolute;
    top: 0;
    left: calc(50% - 2px);
    width: 4px;
    height: 50%;
    transform-origin: bottom;
}

.scale > div::after {
    position: absolute;
    top: 0;
    content: "";
    width: 4px;
    height: 12px;
    background-color: #C6A35B;
}

JavaScript

JavaScriptで針の動きと、時計のメモリを設定しています。

・setIntervalは1秒ごとなので1000でも良いですが、起動後に1秒待つ必要があるため、100で設定しています。
・針やメモリはstyle.transformでrotateを指定して角度を設定しています。
・window.onloadの関数内では、scaleクラスの要素の最後にdiv要素を追加しています。

setInterval(function () {
    // 時間を取得
    var now = new Date();

    // 針の角度
    var deg_h = now.getHours() * (360 / 12) + now.getMinutes() * (360 / 12 / 60);
    var deg_m = now.getMinutes() * (360 / 60);
    var deg_s = now.getSeconds() * (360 / 60);

    // それぞれの針に角度を設定
    document.querySelector(".hour").style.transform = `rotate(${deg_h}deg)`;
    document.querySelector(".min").style.transform = `rotate(${deg_m}deg)`;
    document.querySelector(".sec").style.transform = `rotate(${deg_s}deg)`;
}, 100);

window.onload = function () {
    // メモリを追加
    for (let i = 1; i <= 12; i++) {
        // scaleクラスの要素の最後にdiv要素を追加
        let scaleElem = document.querySelector(".scale");
        let addElem = document.createElement("div");
        scaleElem.appendChild(addElem);

        // 角度をつける
        document.querySelector(".scale div:nth-child(" + i + ")").style.transform = `rotate(${i * 30}deg)`;
    }
}