htmlとJavaScriptだけでストップウォッチを作る。円で時間表現。

投稿日：2019年6月17日

同じ時間を視覚的に測りつずけられるストップウォッチ（カウントダウンタイマー？）があると良いなと思い、簡単に作ってみた。

使った言語はhtmlとCSS、JavaScriptのみ。

仕組みとしては、

CSSの@keyframesで一定時間かけて変化する円を用意
formで円一周にかかる時間を設定
JSで時間を取得して円にかかるCSSを追記
ついでに普通のストップウォッチを同時に作動させる
Resetボタンが押されたら、円にかかっているクラスを一旦削除して付け直すことで、ストップウォッチは止めずに円の動きだけリセットする

単純に手書きしているだけなので、デベロッパーツールを調べればすぐに分かるけども、円の動かし方でちょっと迷ったのでメモ書き。
円グラフを使った時間の表現。かっこいい円グラフの出し方みたいなアニメーションをつけたかった。棒グラフなら端から順番に色を変えたり、棒の長さを変えるだけなんだけど、円グラフは・・・？

まずはhtmlで円を描くベースを作る。

&lt;div class="pie"&gt;&lt;/div&gt;

1	<div class="pie"></div>

このdiv要素を円にするCSSがこちら。
縦、横の長さを同じにした上で、border-radiusで丸みをつける。

.pie {
  width: 300px;
  height: 300px;
  border-radius: 50%;
}

.pie {

width: 300px;

height: 300px;

border-radius: 50%;

}

結論から述べると、上のような円の動かし方をしているCSSはこれだ

.pie {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 30px auto;
  border-radius: 50%;
  background: #28344e;
  background: linear-gradient(to right, #28344e 50%, #cf9134 0);/*左が紺色、右が黄色*/
}
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: #28344e;/*紺色*/
transform-origin: left;
animation: spin 10s linear infinite,color 20s step-end infinite;/*半円が反転するのにかかる時間は10秒。20秒の半分で半円の色を変える*/
}
@keyframes spin {
to { transform: rotate(.5turn); }
}
@keyframes color {
50% { background: #cf9134; }/*黄色*/
}

.pie {

position: relative;

width: 300px;

height: 300px;

margin: 30px auto;

border-radius: 50%;

background: #28344e;

background: linear-gradient(to right, #28344e 50%, #cf9134 0);/*左が紺色、右が黄色*/

}

.pie::before {

content: '';

display: block;

margin-left: 50%;

height: 100%;

border-radius: 0 100% 100% 0 / 50%;

background-color: #28344e;/*紺色*/

transform-origin: left;

animation: spin 10s linear infinite,color 20s step-end infinite;/*半円が反転するのにかかる時間は10秒。20秒の半分で半円の色を変える*/

}

@keyframes spin {

to { transform: rotate(.5turn); }

}

@keyframes color {

50% { background: #cf9134; }/*黄色*/

}

元の円はこれ

ここに、pie::beforeをつける。
pie::beforeの動きを赤で表す。

この円は20秒で一周するのだが、pie::beforeの半円は、10秒かけて反転する。最初の10秒間、pie::beforeは紺色で、pieの黄色部分を徐々に露わにする。次の10秒間、pie::beforeは黄色になり、pieの紺色部分を飛び出したpie::beforeが徐々に広がっていく。

Loop Countdownでは、アニメーションの秒数を決めるCSS（今回は10秒と20秒）をJSで計算し、CSSを追記している。

　Loop Countdown（このストップウォッチのデモ）

分かってしまえばなるほどって感じ。
この円の動き、なんて表現すればいいんだろうね。