Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

トップ > HTMLなど > 【JavaScript】アナログ時計を作ってみました

【JavaScript】アナログ時計を作ってみました

HTMLなど

　どうも！LSSです！！

 

ちょっときっかけがあり、急遽、JavaScript（とCSS）で「アナログ時計」を作る事に挑戦してみました！

 

 

アナログ時計

 

 

コード

<style>
#tokei{
position:relative;
width:300px;
height:300px;
background-color:#eeeedd;
}
#tokeih,#tokeim,#tokeis{position:absolute;transform-origin:10px 50%;left:140px;}
#tokeih{background-color:black;width:70px;height:20px;top:140px;}
#tokeim{background-color:gray;border:3px solid black;width:120px;height:16px;top:142px;}
#tokeis{background-color:red;width:110px;height:10px;top:145px;}
#tokeic{position:absolute;background-image:radial-gradient(#00000080 40%,#00000000 50%);width:8px;height:8px;top:146px;left:146px;}
</style>
<div id="tokei">
<div id="tokeih"></div>
<div id="tokeim"></div>
<div id="tokeis"></div>
<div id="tokeic"></div>
</div>
<p>
<script>
tokeitm=setInterval(function(){
tokein=Math.floor(((Date.now()-(new Date()).getTimezoneOffset()*60000)%86400000)/1000);
tokeih.style.transform='rotate('+(((tokein%43200)/43200)*360-90)+'deg)';
tokeim.style.transform='rotate('+(((tokein%3600)/3600)*360-90)+'deg)';
tokeis.style.transform='rotate('+(((tokein%60)/60)*360-90)+'deg)';
},1000);
</script>
</p>

 

 

きっかけ

友人からTwitterでこんなメッセージが飛んできました。

 

要は盤面の画像さえ用意すれば、あとは普通のアナログ時計と同じかな。

作れるだろうし、そう難しくはないハズ、と思いましたが、そういえば今までに作った事がなかった…ので、スマホアプリじゃないけど今のところ馴染みのあるJavaScriptで作ってみたのが今回のチャレンジでした^^

 

なお、その後、

との返信が。

なるほど、盤面を変えるアナログ時計アプリなら探せばすでにあるかもですが、ちょっと特殊なんですね。

 

ちなみに今回作ったこの時計は一般的な１２時間時計ですが、

tokeih.style.transform='rotate('+(((tokein%43200)/43200)*360-90)+'deg)';

この「43200」をどちらも「86400」に変更するだけで２４時間時計になります。

 

 

コード解説（CSS部分）

<div id="tokei">
<div id="tokeih"></div>
<div id="tokeim"></div>
<div id="tokeis"></div>
<div id="tokeic"></div>
</div>

この部分が、HTMLで時計盤となります。

全体を囲む、<div id="tokei">中略</div>が時計盤面全体。
<div id="tokeih"></div>が時計の短針（時）
<div id="tokeim"></div>が時計の長針（分）
<div id="tokeis"></div>が時計の秒針（秒）
<div id="tokeic"></div>が時計の中心を示すポッチです。

 

盤面や針のデザインはもっぱらCSSで作っています。

#tokei{
position:relative;
width:300px;
height:300px;
background-color:#eeeedd;
}

が時計の盤面で、幅300px、横300pxで定義。
背景色を#eeeeddとしています。
盤面に画像を用いるなら、
background-image:url('画像ファイルのURL');
を追加し、赤字部分を置き換えるだけでＯＫです。

 

時計の針＋中心を定義しているのは、

#tokeih,#tokeim,#tokeis{position:absolute;transform-origin:10px 50%;left:140px;}
#tokeih{background-color:black;width:70px;height:20px;top:140px;}
#tokeim{background-color:gray;border:3px solid black;width:120px;height:16px;top:142px;}
#tokeis{background-color:red;width:110px;height:10px;top:145px;}
#tokeic{position:absolute;background-image:radial-gradient(#00000080 40%,#00000000 50%);width:8px;height:8px;top:146px;left:146px;}

の部分です。

この時点では、針は３本とも３時方向に向いた状態で描いている事になります。

 

↑こういう配置、というですね。

 

１行目は３本の針で共通の指定となるものをまとめています。

position:absolute;で配置を盤面の中での絶対位置指定。

transform-origin:10px 50%;で回転の中心を「針自体の左端から10px、縦は中心位置」という指定をしています。

left:140px;で針の表示位置を「左から140px」の位置にしています。

 

盤面が300×300なので、中心位置は(150,150)となりますが、反対側に少し飛び出していた方がリアルかな？と中心位置と配置を10pxずらしている、という状態です。

 

各針の配置も、heightで指定した針の幅にあわせてtopの位置をずらしています。

 

 

追記：一部コード修正（2021/9/28）

<script>
tokeitm=setInterval(function(){
tokein=Math.floor(((Date.now()-(new Date()).getTimezoneOffset()*60000)%86400000)/1000);

 

↑上記赤字部分（２か所）を追加しました！
これがないと秒針の位置が不正確になるので^^;

 

 

 

という感じで、アナログ時計を作ってみました^^

これをスマホアプリに移植するかは…謎ですｗ

 

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^