コメント：タイマーを聞いた後、JSでのみ実装できると思われるかもしれません。実際、HTML5があることがわからない場合、このアイデアはまだ有効です。 HTML5でタイマーがどのように実装されているかの説明を次に示します。興味のある友達はそれを見逃すべきではありません。
HTML：<！doctype html>
<html lang = "en">
<head>
<メタcharset = "utf-8">
<！ - 常に最新のIEレンダリングエンジン（イントラネットでも）とクロムフレームを強制します
.htaccess->を使用する場合はこれを削除します
<meta http-equiv = "x-ua-compatible" content = "ie = edge、chrome = 1">
<Title> Work-RelaxバランスのHTML5タイマー</title>
<Meta content = "">
<メタコンテンツ= "kevin">
<Meta content = "width = device-width; initial-scale = 1.0">
<！ - favicon.ico＆apple-touch-icon.pngをドメインのルートに置き換えて、これらの参照を削除します - >
<link href = "/favicon.ico"/>
<link href = "/apple-touch-icon.png"/>
<link type = "text/css" href = "css/style.css">
<スクリプト>
CountDownSeconds = 60;
varハンドル= null;
//ウィンドウロード
function onloadWindow（）{
acanvas = document.getElementById（ "CountDowncanvas"）;
Context = acanvas.getContext（ "2d"）;
var canvastext = "プレスして開始...";
var xpos = acanvas.width / 2;
var ypos = acanvas.height / 2;
Context.font = "12pt Century Gothic";
context.fillstyle = "＃008000;";
context.textalign = "center";
Context.TextBaseLine = "Middle";
context.filltext（canvastext、xpos、ypos）;
}
関数updatecanvas（thecontext、width、height）{
if（countdownseconds <0）{
ClearInterval（ハンドル）;
ハンドル= null;
アラート（「ねえ、時間が増えました！」）;
0を返します。
}
minstr = math.floor（countdownseconds / 60）;
secstr = countdownseconds％60;
if（minstr <10）{
minstr = "0" + minstr;
}
if（secstr <10）{
secstr = "0" + secstr;
}
Context.ClearRect（0、0、幅、高さ）;
Context.font = "24pt Century Gothic";
context.filltext（minstr + "：" + secstr、width / 2、height / 2）;
CountDownSeconds-;
}
function startworkcountdown（）{
if（handle！= null）{
ClearInterval（ハンドル）;
}
CountDownSeconds = document.getElementById（ "workintervalinput"）。value * 60;
TimeDisPlayCanvas = document.getElementById（ "CountDownCanvas"）;
TimeDisPlayContext2D = TimeDisPlayCanvas.getContext（ "2d"）;
updatecanvas（timedisplaycontext2d、timedisplaycanvas.width、timedisplaycanvas.height）;
handle = setInterval（function（）{
updatecanvas（timedisplaycontext2d、timedisplaycanvas.width、timedisplaycanvas.height）;
}、1000）;
}
function strestcountdown（）{
if（handle！= null）{
ClearInterval（ハンドル）;
}
CountDownSeconds = document.getElementById（ "restintervalinput"）。value * 60;
TimeDisPlayCanvas = document.getElementById（ "CountDownCanvas"）;
TimeDisPlayContext2D = TimeDisPlayCanvas.getContext（ "2d"）;
updatecanvas（timedisplaycontext2d、timedisplaycanvas.width、timedisplaycanvas.height）;
handle = setInterval（function（）{
updatecanvas（timedisplaycontext2d、timedisplaycanvas.width、timedisplaycanvas.height）;
}、1000）;
}
</script>
</head>
<body>
<div>
<ヘッダー>
<h1>ワークライフバランスタイマー</h1>
</header>
作業間隔を選択してください。
<入力型= "number" value = "25" min = "15" max = "45" step = "5"/>
分
残りの間隔を選択してください：
<入力型= "number" value = "5" min = "3" max = "10" step = "1"/>
分
<canvas>
これはキャンバスです
</canvas>
<ボタン>
一生懸命働きます
</button>
<ボタン>
休憩してください
</button>
<フッター>
<p>
＆コピー;著作権は予約されています
</p>
</footer>
</div>
</body>
</html>
CSS3：
/*
* HTML5✰ボイラープレート
*
*以下は、クロスブラウザースタイリングに関する多くの研究の結果です。
*ニコラス・ギャラガー、ジョナサン・ニールに感謝します。
* Kroc Camen、およびH5BP Dev Community and Team。
*
*このCSSに関する詳細情報：h5bp.com/css
*
* == | == remormize =============================================================================================================
*/
/* ===========================================================================================================
HTML5は定義を表示します
=============================================================================================
記事はさておき、詳細、フィギュート、フィギュア、フッター、ヘッダー、hgroup、nav、セクション{display：block; }
Header {Text-Shadow：＃220000 0px 0px 10px 10px 10px;}
オーディオ、キャンバス、ビデオ{display：inline-block; *表示：インライン; *ズーム：1; }
オーディオ：not（[controls]）{display：none; }
[hidden] {展示：なし; }
/* ===========================================================================================================
ベース
=============================================================================================
/*
* 1。emユニットを使用してボディフォントサイズが設定されている場合、ie6/7で奇妙にサイズを変更するテキストを修正します
* 2。非IEの垂直スクロールバーを強制します
* 3。ユーザーズームを無効にすることなく、IOSテキストサイズをデバイスの向きの変更で調整することを防ぐ：h5bp.com/g
*/
html {font-size：100％;オーバーフロー-Y：スクロール; -webkit-text-size-adjust：100％; -ms-text-size-adjust：100％; }
ボディ{マージン：0;フォントサイズ：24px;ラインハイト：1.231;}
ボディ、ボタン、入力、select、textarea {font-family： "Century Gothic";色：＃008000}
/*
*選択でテキストシャドウを削除しますハイライト：h5bp.com/i
*これらの選択宣言は別々にする必要があります
*また：ホットピンク！ （または、デザインに合わせて背景色をカスタマイズします）
*/
:: -Moz-Selection {background：＃fe57a1;色：#ffff;テキストシャドウ：なし; }
:: selection {background：＃fe57a1;色：#fff;テキストシャドウ：なし; }
/* ===========================================================================================================
リンク
=============================================================================================
{color：＃00e; }
A：訪問{色：＃551A8B; }
A：Hover {color：＃06e; }
A：Focus {outline：Thin Dotted; }
/ *すべてのブラウザに焦点を合わせてホバリングするときに読みやすさを向上させる：h5bp.com/h */
A：Hover、A：Active {outline：0; }
/* ===========================================================================================================
タイポグラフィ
=============================================================================================
abbr [title] {border-bottom：1px点線; }
b、strong {font-weight：bold; }
blockquote {マージン：1EM 40px; }
dfn {font-style：Italic; }
HR {display：block;高さ：1px;ボーダー：0;ボーダートップ：1pxソリッド#ccc;マージン：1EM 0;パディング：0; }
ins {背景：色：＃000;テキスト装置：なし; }
マーク{背景：＃ff0;色：＃000;フォントスタイル：イタリック; font-weight：bold; }
/ * Redeclare Monospace Fontファミリ：h5bp.com/j */
pre、code、kbd、samp {font-family：monospace、monospace; _font-family： 'Courier New'、Monospace; font-size：1em; }
/ *すべてのブラウザで事前にフォーマットされたテキストの読みやすさを向上させる */
pre {White-Space：pre;ホワイトスペース：プレラップ。ワードラップ：ブレークワード; }
Q {引用：なし; }
Q：前、Q：after {content： "";コンテンツ：なし; }
Small {font-size：85％; }
/ * line-heightに影響を与えることなく、添え字と上付き文字の内容を位置付けます：h5bp.com/k */
sub、sup {font-size：75％; Line-Height：0;位置：相対;垂直アライイン：ベースライン; }
sup {top：-0.5em; }
sub {bottom：-0.25em; }
/* ===========================================================================================================
リスト
=============================================================================================
ul、ol {マージン：1em 0;パディング：0 0 0 40px; }
dd {マージン：0 0 0 40px; }
nav ul、nav ol {list-style：none;リストスタイルイメージ：なし;マージン：0;パディング：0; }
/* ===========================================================================================================
組み込みコンテンツ
=============================================================================================
/*
* 1。IE7：h5bp.com/dでスケーリングされたら画質を向上させる
* 2。画像コンテナの画像と境界の間のギャップを削除：h5bp.com/e
*/
IMG {Border：0; -ms-interpolation-mode：bicubic;垂直アライイン：中央; }
/*
* IE9に隠されていない正解オーバーフロー
*/
svg：not（：root）{オーバーフロー：hidden; }
/* ===========================================================================================================
図
=============================================================================================
図{マージン：0; }
/* ===========================================================================================================
フォーム
=============================================================================================
フォーム{マージン：0; }
fieldset {border：0;マージン：0;パディング：0; }
/ *「ラベル」が関連するフォーム要素にフォーカスをシフトすることを示します */
ラベル{cursor：pointer; }
/*
* 1. IE6/7/8/9で継承しない色を正しい色
* 2。IE6/7で奇妙に表示された正しいアライメント
*/
legend {border：0; *マージン左：-7px;パディング：0; }
/*
* 1.すべてのブラウザで継承しないフォントサイズを修正します
* 2。FF3/4 S5クロムのマージンを取り外します
* 3。すべてのブラウザで一貫した垂直アライメントディスプレイを定義します
*/
ボタン、入力、select、textarea {font-size：100％;マージン：0;垂直アライイン：ベースライン; *垂直アライイン：中央; }
/*
* 1。FF3/4に一致するように通常のようにラインハイトを定義します（UA StyleSheetで重要です！
* 2。IE6/7で奇妙に表示された正しい内部間隔
*/
ボタン、input {line-height：normal; *オーバーフロー：可視; }
/*
* IE6/7のオーバーラップと空白の問題を避けるために、「テーブル」の内側の間隔を再導入します
*/
テーブルボタン、テーブル入力{ *オーバーフロー：auto; }
/*
* 1.クリック可能なフォーム要素のためにハンドカーソルを表示します
* 2。iOSでクリック可能なフォーム要素のスタイリングを許可する
*/
ボタン、input [type = "button"]、input [type = "reset"]、input [type = "submit"] {cursor：pointer; -Webkit-Appearance：ボタン; }
/*
*一貫したボックスの大きさと外観
*/
input [type = "checkbox"]、input [type = "Radio"] {box-sizing：border-box; }
input [type = "search"] {-webkit -appearance：textfield; -moz-box-sizing：content-box; -webkit-box-sizing：content-box;ボックスサイズ：コンテンツボックス; }
input [type = "search"] :: -webkit-search-decoration {-webkit-appearance：none; }
/*
* ff3/4：h5bp.com/lの内側のパディングと境界線を取り外します
*/
ボタン:: -Moz-focus-inner、input ::-moz-focus-inner {border：0;パディング：0; }
/*
*1。IE6/7/8/9でデフォルトの垂直スクロールバーを削除します
* 2。垂直方向のサイズのみを許可します
*/
Textarea {Overflow：auto;垂直アライイン：トップ;サイズ：垂直; }
/ *フォームの妥当性の色 */
入力：有効、textarea：valid {}
入力：Invalid、Textarea：Invalid {background-color：＃f0dddd; }
/* ===========================================================================================================
テーブル
=============================================================================================
表{境界線崩壊：崩壊;境界面：0; }
td {vertical-align：top; }
/* == | ==プライマリスタイル===========================================================================================================
著者：
=============================================================================================
/* == | =非セマンティックヘルパークラス======================================================================================
このセクションの前にスタイルを定義してください。
=============================================================================================
/ *画像交換用 */
.ir {display：block;ボーダー：0;テキストインデント：-999EM;オーバーフロー：隠し;背景色：透明;バックグラウンドリピート：ノーリピート。テキストアライグ：左;方向：LTR; }
.ir br {display：none; }
/ *スクリーンリーダーとブラウザの両方から隠す：h5bp.com/u */
.hidden {展示：なし！重要;可視性：隠された; }
/ *視覚的にのみ非表示になりますが、スクリーンリーダーで使用できます：h5bp.com/v */
.viseallyhidden {border：0;クリップ：rect（0 0 0 0）;高さ：1px;マージン：-1px;オーバーフロー：隠し;パディング：0;位置：絶対;幅：1px; }
/ * .VisealyHiddenクラスを拡張して、キーボードを介してナビゲートするときに要素を集中させることができます：H5BP.com/p */
.viseallyhidden.focusable：Active、.viselyhidden.focusable：focus {clip：auto;高さ：自動;マージン：0;オーバーフロー：可視;位置：静的;幅：auto; }
/ *視覚的に、およびスクリーンリーダーから非表示になりますが、レイアウトを維持します */
.Invisible {visibility：hidden; }
/ *フロートを含む：h5bp.com/q */
.clearfix：before、.clearfix：after {content： "";表示：テーブル; }
.ClearFix：後{clear：blote; }
.ClearFix {Zoom：1; }
/* == | ==メディアクエリ===========================================================================
レスポンシブデザインのプレースホルダーメディアクエリ。
これらは、プライマリ（「モバイルファースト」）スタイルをオーバーライドします
コンテンツが必要に応じて変更します。
=============================================================================================
@mediaのみの画面と（min-width：480px）{
/ *ビューポート480px以降のスタイルの調整
}
@mediaのみの画面と（最小：768px）{
/ *ビューポート768px以降のスタイルの調整をここに移動します */
}
/* == |=印刷スタイル=================================================================================
印刷スタイル。
必要なHTTP接続を回避するためにインラインド：H5BP.com/r
=============================================================================================
@media print {
* {背景：透明！重要;色：黒！重要。 Text-Shadow：なし！重要。フィルター：なし！重要。 -ms-filter：なし！重要; }/ *ブラックプリントが高速：h5bp.com/s */
a、a：訪問{テキスト装飾：下線; }
a [href]：after {content： "（" attr（href） "）"; }
abbr [title]：after {content： "（" attr（title） "）"; }
.ir a：後、a [href^= "javascript："]：後、a [href^= "＃"]：after {content： ""; }/ *画像のリンク、またはjavaScript/内部リンクを表示しないでください */
pre、blockquote {border：1px solid＃999;ページブレイクインスサイド：避けてください。 }
thead {display：table-header-group; }/ * h5bp.com/t */
tr、img {page-break-inside：回避; }
img {max-width：100％！fality; }
@Page {マージン：0.5cm; }
P、H2、H3 {孤児：3;未亡人：3; }
H2、h3 {page-break-after：避けてください。 }
}
#starttimer {
位置：継承
幅：75px;
高さ：20px;
トップ：35px;
左：25px;
カーソル：ポインター
}
#stoptimer {
位置：継承;
幅：75px;
高さ：20px;
トップ：10px;
左：25px;
カーソル：ポインター
}
#countdowncanvas {
ボーダーラジウス：25px;
Box-Shadow：10px 10px 5px＃888888;
}