設定に従って毎回ランダムな時間を生成してカウントダウンするタイマーです。以下URLで実際に動作するものにアクセスできます。
- https://kolmas-tech.github.io/random-timer/
- （古めのブラウザ用）https://kolmas-tech.github.io/random-timer/index.legacy.html
横長画面で利用することを想定していますが、そうでなくても動作します。
画面最上部に残り時間の文字表示、中央に残り時間を示すバーが表示されます。残り時間がなくなるとアラームが鳴動します。
制御は、その下に表示される五種類のボタンにより行います。これらは左から順に以下の通りです。その時々で利用できないボタンはグレーアウトされます。
タイマーのカウントダウンを開始もしくは再開します。
タイマーが初期状態である場合（ページの読み込み時または「停止」ボタン押下後）は、タイマーの時間を決定するランダム表示を行った後、アラーム音一回の鳴動と共に決定したタイマー時間を表示します。その後、一拍置いてからカウントダウンが開始されます。
「一時停止」ボタンによりカウントダウンが一時停止されていた場合は、その状態から再びカウントダウンを再開します。
動作中のタイマーのカウントダウンを一時停止します。再開するには「開始」ボタンを押下します。
動作中及び一時停止中、またカウントダウンが終了してアラーム鳴動中のタイマーの動作を全て停止し、初期状態に戻します。
タイマーの設定ダイアログを開きます。タイマーが初期状態である時のみ押下可能です。
ここで設定できる項目は以下の通りです。「設定を閉じる」ボタン押下によりダイアログを閉じると、その設定値が保存されます。
保存された設定値はページ再読み込み時にも維持されます。（設定値の保存にlocalStorageを利用します。）
- ランダムステップ：ランダム生成される時間の間隔を秒単位で設定します。例えば10を指定すると、ランダム生成される時刻は10秒の倍数になります。
- 最小時間：ランダム生成される時間の最小値を秒単位で指定します。
- 最大時間：ランダム生成される時間の最大値を秒単位で指定します。
- 残り時間表示方法：残り時間の文字表示の形式を「分秒表示（例→03:00）」と「秒表示（例→180）」から選択します。
初回アクセス時の設定はランダムステップ=10、最小時間=30、最大時間=90、残り時間表示方法=分秒表示、になっています。 この設定だと、ランダム生成されるタイマー時間は30秒・40秒・50秒・60秒・70秒・80秒・90秒のいずれかになります。
利用している素材類（画像・音声）に関するライセンス情報を表示するダイアログを開きます。ダイアログは「閉じる」ボタン押下により閉じます。