用途
新着
履歴
分類



JS アナログ時計を作る

JS アナログ時計を作る
JS アナログ時計を作る
今回は時間のデータを使ってアナログの時計を作ってみたサンプルです。

JSで時間を扱うことはよくあります。

そんなときMoment.jsというライブラリを使うと年月日のフォーマットや時差の扱いなどが簡単にできます。

時間を数値として計算し、角度に変換して回転させるCSSを実装します。

実装サンプルはこちら。

以下解説です。

まず、moment.jsを読み込みます。

詳しくはこちら「Moment.js」をご確認ください。

そしてHTMLはこちら

<div id="clock">
    <div id="hour"><div></div></div>
    <div id="minute"><div></div></div>
    <div id="second"><div></div></div>
</div>
    
<div id="demo_time"></div>

デザインを調整するためにDIVを多用してますが、特にこうしないといけないわけではないです。

そしたらJSはこちら

function timeRefresh () {
    updateClock();
    updateText();
    setTimeout(timeRefresh, 1000);
    //1秒おきに繰り返し実行
}

function updateClock(){
    var now = moment();

    //秒
    var second = now.seconds() * 6;
    //60を6倍すると360になるので。

    //分
    var minute = now.minutes() * 6 + second / 60;
    //一回転を60で割ってさらに60で割ると分の針の動きになる。

    //時
    var hour = ((now.hours() % 12) / 12) * 360 + minute / 12;
    //12が0になるように計算し、時の角度に過ぎた分の角度分を足す。

    $('#hour').css("transform", "rotate(" + hour + "deg)");
    $('#minute').css("transform", "rotate(" + minute + "deg)");
    $('#second').css("transform", "rotate(" + second + "deg)");
}

function updateText(){
    //今の時間をデジタルで表示
    a = moment().format('YYYY/MM/DD, h:mm:ss a');
    $("#demo_time").html(a);
}

timeRefresh();

毎秒角度を書き換えて、DIVが回転しています。

CSSはこちら

#clock{
    margin:10px auto;
    width: 200px;
    height:200px;
    position: relative;
    border-radius: 30px;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
    border:solid 1px #EEE;
    background-color:#CCC;
}
#hour {
    width: 1px;
    height:200px;
    position: absolute;
    top:0%;
    left:100px;
    padding-top:50px;
    box-sizing: border-box;
}
#hour div{
    height:50px;
    position: absolute;
    width:8px ;
    left:-4px;
    border-radius: 4px;
    background-color:#EEF;
}

#minute {
    width: 1px;
    height:200px;
    position: absolute;
    top:0%;
    left:100px;
    padding-top:20px;
    box-sizing: border-box;
}
#minute div{
    height:80px;
    width:6px;
    left:-3px;
    border-radius: 3px;
    position:absolute;
    background-color:#FEE;
}
#second {
    width: 1px;
    height:200px;
    position: absolute;
    top:0%;
    left:100px;
    padding-top:0px;
    box-sizing: border-box;
}
#second div{
    height:100px;
    width:1px ;
    background-color:#900;
}

#demo_time {
    margin:10px auto;
    width:200px;
    background-color:#223;
    color:#FFF;
    text-align:center;
    padding:10px 20px;
}
公開 : 2020-02-02 12:54:04
更新 : 2020-02-02 13:07:52
このエントリーをはてなブックマークに追加
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2020 kipure
Top