ホームページ > 記事 > ウェブフロントエンド > H5 でタイマーを作成するコードのデモ
H5 でタイマーを作成するコードのデモ
- Y2Jオリジナル
- 2017-05-23 13:59:164795ブラウズ
タイマーについて聞くと、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'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免费视频教程
4. 教你用H5绘图的基础方法
以上がH5 でタイマーを作成するコードのデモの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。