スタイルシート タイマー（7 セグメント表示版） の説明
戻る


「スタイルシート タイマー」では普通の文字で時間を表示していますが，キッチン タイマーの多くは 7 セグメントで時間を表示しています．
そこで，時間の表示を 7 セグメント表示にしてみました．
画面
（これはキャプチャ画像です．これで遊ぶことはできません．）
時間の表示以外の処理は「スタイルシート タイマー」と同じです．その部分の説明は，「スタイルシート タイマー」の方の説明をご覧ください．

「スタイルシート タイマー」では CSS カウンタを使って時間の各桁の数値を文字にして表示していますが，このプログラム（？）では画像を使って表示しています．
‘0’ 〜 ‘9’ の文字を並べた画像を作り，表示する数値によって画像の表示する部分を変えています．
数値の画像