[編集モード] 緊張感のあるタイマー（最後にカウントあり）

タイマーです。ただ無音なだけでは緊張感が足りない気がしたので作りました。3分程度で急いで問題を解く場合などに使うといいかもです。下の関連URL先のTwitterに感想、要望などをお願いします

#OtoLogic(https://otologic.jp)さんの音源を使わせていただきました
# --- DOM要素を作成 ---
「時:」のラベル作成
Hup = 「↑」のボタン作成
Hupに{
  "余白": "7px",
  "文字サイズ": "18px"
}をDOMスタイル一括設定
Hdown =「↓」のボタン作成
Hdownに{
  "余白": "7px",
  "文字サイズ": "18px"
}をDOMスタイル一括設定
「分:」のラベル作成
Mup = 「↑」のボタン作成
Mupに{
  "余白": "7px",
  "文字サイズ": "18px"
}をDOMスタイル一括設定
Mdown =「↓」のボタン作成
「秒:」のラベル作成
Mdownに{
  "余白": "7px",
  "文字サイズ": "18px"
}をDOMスタイル一括設定
Sup = 「↑」のボタン作成
Supに{
  "余白": "7px",
  "文字サイズ": "18px"
}をDOMスタイル一括設定
Sdown =「↓」のボタン作成
Sdownに{
  "余白": "7px",
  "文字サイズ": "18px"
}をDOMスタイル一括設定
スタートボタン = 「スタート」のボタン作成
スタートボタンに{
  "余白": "10px",
  "文字サイズ": "30px"
}をDOMスタイル一括設定
ストップボタン = 「ストップ」のボタン作成
ストップボタンに{
  "余白": "10px",
  "文字サイズ": "30px"
}をDOMスタイル一括設定
リセットボタン = 「リセット」のボタン作成
リセットボタンに{
  "余白": "10px",
  "文字サイズ": "30px"
}をDOMスタイル一括設定

# --- 初期化処理 ---
audio=「https://n3s.nadesi.com/image.php?f=38.mp3」をオーディオ開く
H=00
M=00
S=00
T1=システム時間
A=0
話者速度=3

# --- イベント設定 ---
Hupをクリックした時には
	H=H+1
	もし、H >= 60ならば、H=0
	時間変更
ここまで
Hdownをクリックした時には
	H=H-1
	もし、H < 0ならば、H=59
	時間変更
ここまで
Mupをクリックした時には
	M=M+1
	もし、M >= 60ならば、M=0
	時間変更
ここまで
Mdownをクリックした時には
	M=M-1
	もし、M < 0ならば、M=59
	時間変更
ここまで
Supをクリックした時には
	S=S+1
	もし、S >= 60ならば、S=0
	時間変更
ここまで
Sdownをクリックした時には
	S=S-1
	もし、S < 0ならば、S=59
	時間変更
ここまで
スタートボタンをクリックした時には
	もし、H+M+S = 0なら、戻す
	T1=システム時間+S+(M*60)+(H*60*60)
	F=0
	「スタート」と話し終えた時には、
		差表示処理
	ここまで
ここまで
ストップボタンをクリックした時には
	F=1
ここまで
リセットボタンをクリックした時には
	F=1
	H=0
	M=0
	S=0
	時間変更
ここまで

時間変更

# --- 関数定義 ---
●時間変更とは
	S=Sを2でゼロ埋め
	M=Mを2でゼロ埋め
	H=Hを2でゼロ埋め
	描画クリア
	「bold 120px serif」に描画フォント設定して、[30,150]に「{H}:{M}:{S}」を文字描画。
ここまで
●差表示処理とは
	もし、F=1なら、戻す

T2=システム時間。
	もし、(T1−T2)=Aなら、
		「差表示処理」を0.5秒後。
	違えば
		A=T1-T2
		S=A%60
		M=INT(A/60)%60
		H=INT(A/(60*60))
		時間変更
		audioをオーディオ停止
		audioをオーディオ再生
		# --- 音声 ---
		もし、H = 0かつ _
			M = 1かつ _
			S = 0ならば、「あと1分」と話す
		もし、H = 0かつ _
			M = 0かつ _
			S = 30ならば、「あと30秒」と話す。
		もし、H = 0かつ _
			M = 0かつ _
			S <= 10ならば、「{S}」と話す。
		もし、A <= 0ならば、
			「時間です。終了!」と話す
		違えば
			「差表示処理」を0.5秒後。
		ここまで
	ここまで。
ここまで。

デバッグ × キャンバス: 幅 × 高

🍯 プログラム貯蔵庫

[編集モード] 緊張感のあるタイマー（最後にカウントあり）

素材のアップロード