2020/05/05 22:22

アナログ時計をJavascriptで表現する方法

あまり使う事はないかもですが、WEBサイト案件で1度作った「アナログ時計」の表現方法です。

実装方法の記事は他にもたくさんありますのでコピペすれば簡単なのですが、今回は参考にしたサイト元のやつからちょっとカスタムしたものになります。

どういう時計にしたかったのか

・アナログ時計

・オープン時間～クローズ時間の間が塗りつぶされてる

・もちろん開いた時点での現在時刻が表示

オープン時間～終了時間を表す赤い箇所を作る為、この形にするまでがなかなか計算とかが面倒でした。

ちなみに今回PHPの記述と混ぜて使ってますのでご注意ください。

まずは完成品を確認

取り合えずこんな感じのものが出来上がると思います。

作成方法をざっくりと解説

赤い部分はOPEN～CLOSE時間を表すような表現にしてます。

上記の例で言うと、「お店が15時から22時までやってます」っていう意図があっての表現って事になってます。

もし赤い箇所が不要ならその説明も下記で説明を書いてるので参考にしてください。

で、時針や分針は現在時刻を指してるはずです。

以下、このフォーマットでのアナログ時計の解説です。

【Javascript】

まずはJavascriptの記述例です。


<script>
// 現在時刻の設定
var time = new Date(); //現在日時を取得
var second = time.getSeconds(); //現在時刻（秒）を取得
var minute = time.getMinutes(); //現在時刻（分）を取得
var hour = time.getHours(); //現在時刻（時）を取得
 
// 現在時刻を元にした角度の設定
//円の360度を60分で割ったとして、現在時刻の秒数（second）をかける、それに90（度）を足す。つまり0分なら棒線が90度傾いた00分の位置にくる。
//同様に分の箇所も計算して角度を出す
//時の箇所は60刻みではなく12刻みとなるので12で割って、さらに分数や秒数の進み具合によっても傾ける
var secondDeg = (second * 360 / 60) + 90 ;
var minuteDeg = (minute * 360 / 60) + ((second * 360 / 60) / 60) + 90;
var hourDeg = (hour * 360 / 12) + ((minute * 360 / 60) / 12) + ((second * 360 / 60) / 720) + 90;
 
// style 要素を作り、その中に keyframes アニメーションを入れる
var animation = document.createElement("style");
animation.innerHTML = "@keyframes rotation-s2 {0% {transform: rotate(" + secondDeg + "deg)}100% {transform: rotate(" + (secondDeg + 360) + "deg)}}@keyframes rotation-m2 {0% {transform: rotate(" + minuteDeg + "deg)}100% {transform: rotate(" + (minuteDeg + 360) + "deg)}}@keyframes rotation-h2 {0% {transform: rotate(" + hourDeg + "deg)}100% {transform: rotate(" + (hourDeg + 360) + "deg)}}";
document.head.appendChild(animation);
</script>

JSでやる事は日時の取得と表示させる針の角度なんかを調整する為のものです。

【PHP】

PHP側（表示させたいページ）への記述例はコチラ


<div class="c-clock-body">
<div class="c-clock-hour-hand"></div>
<div class="c-clock-minute-hand"></div>
<div class="c-clock-second-hand"></div>
<?php
$houropen = 3;
$hourclose = 10;
$open = ($houropen * 8.3334); // 100/12で8.334 それをかける事で時間に対してのパーセントが出る
$close = ($hourclose * 8.3334); // 100/12で8.334 それをかける事で時間に対してのパーセントが出る
?>
<div class="c-clock-hour" style="background: conic-gradient(transparent 0% ___PHP1___%, #c00 ___PHP2___% ___PHP3___%, transparent ___PHP4___% 100%);"></div>
</div>

この中で赤く塗りつぶす箇所の指定をしてます。

「$houropen」と「$hourclose」で指定してる数字です。

もしWordpressとか使ってるなら、例えばこれをカスタムフィールドを使って管理画面からすぐに変更できるよう便利にカスタムする事ももちろんできますね。

その後、入力された数字を元に赤い箇所のスタート（$open）からエンド（$close）まで角度を計算します。

もし赤い箇所が不要であれば「c-clock-hour」のclassの1行を削除すればおｋです。同様にPHPで囲った時間指定箇所も不要となります。

【CSS】

次にスタイル（CSS）です。

アニメーションも含まれるので、0から書くよりは一度これをコピーしてからいじっていく方が楽だと思います。


/* 時計本体 */
.c-clock-body {
margin: 10px auto;
width: 100px; /* 幅のレスポンシブ対応 、height 値は JavaScript で決める*/
height: 100px;
position: relative;
border-radius: 50%;
border: 4px solid #000;
padding: 3px 0;
}
 
/* 秒針 */
.c-clock-second-hand {
animation: rotation-s2 60s linear infinite; /* 60秒かけて一周 */
background-color: #000;
border-radius: 2px;
height: 2px; /* 線幅 */
position: absolute;
right: calc(50% - 1px); /* 位置調整 線幅の半分ずらす */
top: calc(50% - 1px); /* 位置調整 線幅の半分ずらす */
transform-origin: calc(100% - 1px) center; /* アニメーションの中心軸 線幅の半分ずらす */
width: 50%;
z-index: 100;
}
 
/* 分針 */
.c-clock-minute-hand {
animation: rotation-m2 3600s linear infinite; /* 3600秒、1時間かけて一周 */
background-color: #000;
border-radius: 5px;
height: 5px; /* 線幅 */
position: absolute;
right: calc(50% - 2px); /* 位置調整 線幅の半分ずらす */
top: calc(50% - 2px); /* 位置調整 線幅の半分ずらす */
transform-origin: calc(100% - 2px) center; /* アニメーションの中心軸 線幅の半分ずらす */
width: 45%;
z-index: 100;
}
 
/* 時針 */
.c-clock-hour-hand {
animation: rotation-h2 86400s linear infinite; /* 86400秒、12時間かけて一周 */
background-color: #000;
border-radius: 5px;
height: 5px; /* 線幅 */
position: absolute;
right: calc(50% - 2px); /* 位置調整 線幅の半分ずらす */
top: calc(50% - 2px); /* 位置調整 線幅の半分ずらす */
transform-origin: calc(100% - 2px) center; /* アニメーションの中心軸 線幅の半分ずらす */
width: 32%;
z-index: 100;
}
 
.c-clock-hour {
width: 86px;
height: 86px;
margin: 0 auto;
display: block;
border-radius: 50%;
padding: 0;
}