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 までご連絡ください。

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

html5是什么意思Apr 26, 2021 pm 03:02 PM

html5是指超文本标记语言（HTML）的第五次重大修改，即第5代HTML。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。

html5为什么只需要写doctypeJun 07, 2022 pm 05:15 PM

因为html5不基于SGML（标准通用置标语言），不需要对DTD进行引用，但是需要doctype来规范浏览器的行为，也即按照正常的方式来运行，因此html5只需要写doctype即可。“!DOCTYPE”是一种标准通用标记语言的文档类型声明，用于告诉浏览器编写页面所用的标记的版本。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

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

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。