H5 でタイマーを作成するコードのデモ-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

Y2J

May 23, 2017 pm 01:59 PM

html5タイマー

タイマーについて聞くと、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 id="work-life-nbsp-balance-nbsp-timer">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; 
}

【相关推荐】

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5の理解：意味と重要性May 11, 2025 am 12:19 AM

H5はHTML5、HTMLの5番目のバージョンです。 HTML5は、Webページの表現力と相互作用を向上させ、セマンティックタグ、マルチメディアサポート、オフラインストレージ、キャンバス描画などの新しい機能を導入し、Webテクノロジーの開発を促進します。

H5：アクセシビリティとWeb標準のコンプライアンスMay 10, 2025 am 12:21 AM

ネットワーク標準へのアクセシビリティとコンプライアンスは、Webサイトにとって不可欠です。 1）アクセシビリティは、すべてのユーザーがウェブサイトに平等にアクセスできるようにします。2）ネットワーク標準は、ウェブサイトのアクセシビリティと一貫性を改善するために続きます。3）アクセシビリティには、セマンティックHTML、キーボードナビゲーション、色コントラスト、代替テキストの使用が必要です。

HTMLのH5タグは何ですか？May 09, 2025 am 12:11 AM

HTMLのH5タグは、小さいタイトルまたはサブタイトルのタグを付けるために使用される5番目のタイトルです。 1）H5タグは、コンテンツの階層を改良し、読みやすさとSEOを改善するのに役立ちます。 2）CSSと組み合わせて、スタイルをカスタマイズして視覚効果を強化できます。 3）H5タグを合理的に使用して、乱用を避け、論理コンテンツ構造を確保します。

H5コード：Web構造に関する初心者向けガイドMay 08, 2025 am 12:15 AM

HTML5にWebサイトを構築する方法には、次のものが含まれます。1。セマンティックタグを使用して、などのWebページ構造を定義します。 2。マルチメディアコンテンツ、使用、タグを埋め込みます。 3.フォーム検証やローカルストレージなどの高度な機能を適用します。これらの手順を通じて、明確な構造と豊富な機能を備えた最新のWebページを作成できます。

H5コード構造：読みやすさのためのコンテンツの整理May 07, 2025 am 12:06 AM

合理的なH5コード構造により、ページは多くのコンテンツの中で際立っています。 1）コンテンツなどのセマンティックラベルを使用して、構造を明確にするためにコンテンツを整理します。 2）FlexBoxやグリッドなどのCSSレイアウトを介して、さまざまなデバイスでのページのレンダリング効果を制御します。 3）レスポンシブデザインを実装して、ページがさまざまな画面サイズに適応するようにします。

H5対古いHTMLバージョン：比較May 06, 2025 am 12:09 AM

HTML5（H5）以降のバージョンのHTMLの主な違いには、次のものが含まれます。1）H5はセマンティックタグを導入し、2）マルチメディアコンテンツをサポートし、3）オフラインストレージ機能を提供します。 H5は、新しいタグやタグなどのAPIを介してWebページの機能と表現力を高め、ユーザーエクスペリエンスやSEO効果を改善しますが、互換性の問題に注意を払う必要があります。

H5対HTML5：用語と関係を明確にするMay 05, 2025 am 12:02 AM

H5とHTML5の違いは次のとおりです。1）HTML5は、構造とコンテンツを定義するWebページ標準です。 2）H5は、迅速な開発とマーケティングに適したHTML5に基づくモバイルWebアプリケーションです。

HTML5機能：H5のコアMay 04, 2025 am 12:05 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、フォームエンハンスメント、オフラインストレージ、ローカルストレージが含まれます。 1。コードの読みやすさやSEO効果を改善するなどのセマンティックタグ。 2.マルチメディアサポートは、メディアコンテンツを埋め込むプロセスとタグを簡素化します。 3.フォームエンハンスメント新しい入力タイプと検証プロパティを導入し、フォーム開発を簡素化します。 4.オフラインストレージとローカルストレージは、ApplicationCacheとLocalStorageを通じてWebページのパフォーマンスとユーザーエクスペリエンスを改善します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 中国語版

中国語版、とても使いやすい

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。