HTML,CSS,jQueryでタイムタイマーを作る方法

こんにちはtonです。

Web画面上で[タイムタイマー]を作っていきます。

そもそもタイムタイマーというのは以下のようなものです。色で直感的に残り時間がわかります。

【正規品】TIME TIMER タイムタイマー モッド (カバー付き) 9cm 60分 チャコールグレイ TTM9-W 時間管理

Javascriptライブラリを探したのですが、ちょうど良いものが無かったので実際に作ってみました。出来上がりイメージはこちら。gifなので少しカクカクして見えますが実際はもっとスムーズに動きます

作成方法を以降で説明します。