コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > H5 でタイマーを作成するコードのデモ

H5 でタイマーを作成するコードのデモ

Y2J
リリース： 2017-05-23 13:59:16
オリジナル
4856 人が閲覧しました

タイマーについて聞くと、js でのみ実装できると思うかもしれません。実際、html5 の存在を知らなくても、この考え方は当てはまります。以下では、タイマーを

js で実装する方法を紹介します。 html5、興味のある友人は見逃さないでください。 html:

コードは次のとおりです:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>HTML5 Timer for work-relax balance</title> 
<meta name="description" content=""> 
<meta name="author" content="kevin"> 
<meta name="viewport" content="width=device-width; initial-scale=1.0"> 
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> 
<link rel="shortcut icon" href="/favicon.ico"/> 
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
<script> 
countDownSeconds = 60; 
var handle = null; 
//window load 
function onLoadWindow() { 
aCanvas = document.getElementById("countdownCanvas"); context = aCanvas.getContext("2d"); 
var canvasText = "Press to Start..."; 
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); 
} 
function updateCanvas(theContext, width, height) { 
if (countDownSeconds < 0) { 
clearInterval(handle); 
handle = null; 
alert("hey, time is up!"); 
return
 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, width, height); 
context.font = "24pt Century Gothic"; 
context.fillText(minStr + " : " + secStr, width / 2, height / 2); 
countDownSeconds--; 
} 
function startWorkCountDown() { 
if (handle != null) { 
clearInterval(handle); 
} 
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 startRestCountDown() { 
if (handle != null) { 
clearInterval(handle); 
} 
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 onload="onLoadWindow()"> 
<p align="center"> 
<header> 
<h1>work-life balance timer</h1> 
</header> 
Please choose the work interval: 
<input name="workIntervalInput" id="workIntervalInput" type="number" value="25" min="15" max="45" step="5"/> 
minutes 
Please choose the rest interval: 
<input name="restIntervalInput" id="restIntervalInput" type="number" value="5" min="3" max="10" step="1"/> 
minutes 
<canvas id="countdownCanvas" width="
300
" height="50" style="border:2px solid black"> 
This is a canvas 
</canvas> 
<button 
onclick
="startWorkCountDown()"> 
Work Hard 
</button> 
<button onclick="startRestCountDown()"> 
Take A 
Break
 
</button> 
<footer> 
<p> 
&
copy
; Copyright Reserved 
</p> 
</footer> 
</p> 
</body> 
</html>
ログイン後にコピー

css3:

コードは次のとおりです:🎜

/*
* HTML5 ✰ 定型文
*
* 以下は、クロスブラウザーのスタイルに関する多くの研究の結果です。
* インライン左のクレジット。Nicolas Gallagher、Jonathan Neal、
* Kroc Camen、そして H5BP 開発コミュニティとチームに感謝します。
*
* この CSS の詳細情報: h5bp.com/css
*
* ==|== 正規化 ========================= =================================
*/

/* ========== ================================================= =================
HTML5 表示定義
============================ ============================================== */
記事、余談、詳細、figcaption、figure、footer、header、hgroup、nav、section {display:block; }
header {text-shadow: #220000 0px 0px 10px 10px;}
オーディオ、キャンバス、ビデオ { 表示: インラインブロック; *表示: インライン; *ズーム: 1; }
audio:not([コントロール]) { 表示: なし; }
[非表示] { 表示: なし; }
/* ============================================= ===============================
ベース
================ ================================================= ======== */
/*
* 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; line-height: 1.231;}
body、ボタン、入力、選択、テキストエリア {font-family:"Century Gothic"; color:#008000}
/*
* 選択範囲のハイライトの text-shadow を削除します: h5bp.com/i
* これらの選択宣言は個別にする必要があります
* また: ホット ピンク! (または、デザインに合わせて背景色をカスタマイズします)
*/
::-moz-selection {background: #fe57a1;色: #fff;テキストシャドウ: なし。 }
::selection {背景: #fe57a1;色: #fff;テキストシャドウ: なし。 }

/* ============================================ ================================
リンク
=============== ================================================= ========= */
a { color: #00e; }
a:訪問済み { color: #551a8b; }
a:hover { color: #06e; }
a:focus { アウトライン: 細い点線。 }
/* すべてのブラウザでフォーカスしてホバーしたときの読みやすさを向上させます: h5bp.com/h */
a:hover, a:active {outline: 0; }

/* ============================================ ================================
タイポグラフィー
=============== ================================================= ========= */
abbr[title] { border-bottom: 1px 点線; }
b、strong { font-weight: 太字; }
blockquote { margin: 1em 40px; }
dfn { フォントスタイル: イタリック; }
hr { 表示: ブロック;高さ: 1px;境界線: 0;ボーダートップ: 1px ソリッド #ccc;マージン: 1em 0;パディング: 0; }
ins {背景: #ff9;色: #000;テキスト装飾: なし。 }
マーク {背景: #ff0;色: #000;フォント スタイル: イタリック体。フォントの太さ: 太字; }
/* 等幅フォント ファミリを再宣言します: h5bp.com/j */
pre、code、kbd、samp { font-family: 等幅、等幅; _font-family: 'courier new'、等幅;フォントサイズ: 1em; }
/* すべてのブラウザで事前にフォーマットされたテキストの読みやすさを向上させます */
pre {white-space: pre;ホワイトスペース: ラップ前;ワードラップ: ブレークワード; }
q { 引用符: なし; }
q:前、q:後 {コンテンツ: "";内容：なし。 }
small { フォントサイズ: 85%; }
/* 行の高さに影響を与えずに下付き文字と上付き文字のコンテンツを配置します: h5bp.com/k */
sub, sup { font-size: 75%;行の高さ: 0;位置: 相対的;垂直整列: ベースライン; }
sup {トップ: -0.5em; }
sub {下: -0.25em; }

/* ============================================ ================================
リスト
=============== ================================================= ========= */
ul, ol { margin: 1em 0;パディング: 0 0 0 40px; }
dd {マージン: 0 0 0 40px; }
nav ul、nav ol {リストスタイル: なし;リストスタイルイメージ: なし;マージン: 0;パディング: 0; }

/* ============================================ ================================
埋め込みコンテンツ
============== ================================================= ========== */
/*
* 1. IE7 で拡大縮小したときの画質を向上させる: h5bp.com/d
* 2. 画像コンテナー上の画像と境界線の間のギャップを削除する: h5bp.com /e
*/
img { ボーダー: 0; -ms-interpolation-mode: バイキュービック;垂直配置: 中央; }
/*
* IE9 で隠されていない正しいオーバーフロー
*/
svg:not(:root) { overflow: hidden; }

/* ============================================ ================================
数字
=============== ================================================= ========= */
図 { マージン: 0; }

/* ============================================ ================================
フォーム
=============== ================================================= ========= */
form { margin: 0;
フィールドセット { ボーダー: 0;マージン: 0;パディング: 0; }
/* 'label' が関連付けられたフォーム要素にフォーカスを移動することを示します */
label { カーソル: ポインター; }
/*
* 1. IE6/7/8/9 で正しい色が継承されない
* 2. IE6/7 で奇妙に表示される位置合わせを修正
*/
legend { border: 0; *マージン左: -7px;パディング: 0; }
/*
* 1. すべてのブラウザで継承されない正しいフォントサイズ
* 2. FF3/4 S5 Chrome でマージンを削除
* 3. すべてのブラウザで一貫した垂直方向の配置表示を定義
*/
ボタン、入力、選択、テキストエリア { フォントサイズ: 100%;マージン: 0;垂直整列: ベースライン; *垂直配置: 中央; }
/*
* 1. FF3/4 に一致するように通常どおり行の高さを定義します (UA スタイルシートの ! important を使用して設定)
* 2. IE6/7 で奇妙に表示される内部スペースを修正します
*/
button, input {行の高さ: 通常; *オーバーフロー: 表示されます。 }
/*
* IE6/7 での重複と空白の問題を回避するために、「テーブル」の内部スペースを再導入します
*/
テーブル ボタン、テーブル入力 { *overflow: auto; }
/*
* 1. クリック可能なフォーム要素にハンドカーソルを表示します
* 2. iOS でクリック可能なフォーム要素のスタイルを許可します
*/
button, input[type="button"], input[type="reset"] , input[type="submit"] { カーソル: ポインタ; -webkit-外観: ボタン; }
/*
* 一貫したボックスのサイズと外観
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-Appearance: テキストフィールド; -moz-box-sizing: コンテンツボックス; -webkit-box-sizing: コンテンツボックス;ボックスのサイズ設定: コンテンツボックス; }
input[type="search"]::-webkit-search-decoration { -webkit-Appearance: none; }
/*
* FF3/4 の内部パディングとボーダーを削除: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0;パディング: 0; }
/*
* 1. IE6/7/8/9 のデフォルトの垂直スクロールバーを削除します
* 2. 垂直方向のサイズ変更のみを許可します
*/
textarea { overflow: auto;垂直配置: 上;サイズ変更: 垂直; }
/* フォームの有効性の色 */
input:valid, textarea:valid { }
input:invalid, textarea:invalid {background-color: #f0dddd; }

/* ============================================ ================================
テーブル
=============== ================================================= ========= */
table { border-collapse: 折りたたむ;境界線の間隔: 0; }
td {垂直方向に整列: 上; }

/* ==|== プライマリ スタイル ====================================== ===============
作者:
=============================== =========================================== */

/* = =|== 非セマンティックヘルパークラス ========================================
このセクションの前にスタイルを定義してください。
================================================ ========================= */
/* 画像置換用 */
.ir { display: block;境界線: 0;テキストインデント: -999em;オーバーフロー: 非表示;背景色: 透明;背景リピート: リピートなし;テキスト整列: 左;方向: ltr; }
.ir br {表示: なし; }
/* スクリーンリーダーとブラウザの両方から非表示にします: h5bp.com/u */
.hidden { 表示: なし !重要;可視性: 非表示; }
/* 視覚的にのみ非表示にしますが、スクリーンリーダーで利用できるようにします: h5bp.com/v */
.visuallyhidden { border: 0;クリップ：rect(0 0 0 0);高さ: 1px;マージン: -1px;オーバーフロー: 非表示;パディング: 0;位置: 絶対;幅: 1px; }
/* .visuallyhidden クラスを拡張して、キーボード経由で移動したときに要素にフォーカスできるようにします: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { Clip: auto;高さ: 自動;マージン: 0;オーバーフロー: 表示;位置: 静的;幅: 自動; }
/* 視覚的にもスクリーンリーダーからも非表示にしますが、レイアウトは維持されます */
.invisible { 可視性: 非表示; }
/* フロートを含む: h5bp.com/q */
.clearfix:before, .clearfix:after { content: "";表示: テーブル;
.clearfix:after {クリア:両方; }
.clearfix {ズーム: 1; }

/* ==|== メディアクエリ ====================================== ================
PLACEHOLDER レスポンシブ デザインのメディア クエリ。
これらはプライマリ (「モバイル ファースト」) スタイルをオーバーライドします。
コンテンツの必要に応じて変更します。
================================================ ========================= */
@media のみの画面と (min-width: 480px) {
/* ビューポート 480px のスタイル調整ここに移動 */
}
@media のみの画面と (min-width: 768px) {
/* ビューポート 768 ピクセルのスタイル調整はここに移動 */
}

/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */ 

@media print { 
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ 
a, a:visited { text-decoration: underline; } 
a[href]:after { content: " (" attr(href) ")"; } 
abbr[title]:after { content: " (" attr(title) ")"; } 
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don&#39;t show links for images, or javascript/internal links */ 
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } 
thead { display: table-header-group; } /* h5bp.com/t */ 
tr, img { page-break-inside: avoid; } 
img { max-width: 100% !important; } 
@page { margin: 0.5cm; } 
p, h2, h3 { orphans: 3; widows: 3; } 
h2, h3 { page-break-after: avoid; } 
} 
#startTimer{ 
position:inherit 
width:75px; 
height:20px; 
top:35px; 
left:25px; 
cursor:pointer 
} 
#stopTimer{ 
position:inherit; 
width:75px; 
height:20px; 
top:10px; 
left:25px; 
cursor:pointer 
} 
#countdownCanvas{ 
border-radius:25px; 
box-shadow:10px 10px 5px #888888; 
}
ログイン後にコピー

【相关推荐】

1. HTML5免费视频教程

2. 通过H5实现拍照功能的实例详解

3. H5制作一个注册页面的代码实例

4. 教你用H5绘图的基础方法

5. 详解H5和HTML4的区别

以上がH5 でタイマーを作成するコードのデモの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
html5 タイマー
ソース：php.cn
前の記事：H5とHTML4の違いを詳しく解説 次の記事：H5の28の非常に重要な新機能、新技術、新技術を詳しく解説
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート