HTML5 タイマーの小さな example_html5 チュートリアルのスキル

WBOY
リリース: 2016-05-16 15:48:52
オリジナル
1561 人が閲覧しました

html:

复制代码
代码如下:







仕事とリラックスのバランスを保つための HTML5 タイマー
<メタ名="説明" コンテンツ="">



<リンク rel="ショートカット アイコン" href="/favicon.ico"/>



カウントダウン秒 = 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 センチュリー ゴシック";
context.fillStyle = "#008000;";
context.textAlign = "センター";
context.textBaseline = "中間";
context.fillText(canvasText, xPos, yPos);
}
function updateCanvas(theContext, width, height) {
if (countDownSeconds clearInterval(handle);
ハンドル = null;
alert("おい、時間切れ!");
0 を返す;
}
minStr = Math.floor(countDownSeconds / 60);
secStr = countDownSeconds % 60;
if (minStr minStr = "0" minStr;
}
if (secStr secStr = "0" secStr;
}
context.clearRect(0, 0, width, height);
context.font = "24pt センチュリー ゴシック";
context.fillText(minStr " : " secStr, width / 2, height / 2);
カウントダウン秒--;
}
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);
}





ワークライフバランスタイマー



作業間隔を選択してください:



休憩間隔を選択してください:





これはキャンバスです



<ボタン onclick="startWorkCountDown()">
頑張ってください

<ボタン onclick="startRestCountDown()">
休憩



&コピー;著作権所有







css3:

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

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

/* ============================================= ===============================
HTML5 表示定義
========== ================================================= ============== */
記事、余談、詳細、図キャプション、図、フッター、ヘッダー、hgroup、ナビゲーション、セクション { 表示: ブロック; }
header {text-shadow: #220000 0px 0px 10px 10px;}
オーディオ、キャンバス、ビデオ {display: inline-block; *表示: インライン; *ズーム: 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;}
ボディ、ボタン、入力、選択、テキストエリア {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: monospace、monospace; _font-family: 'courier new'、等幅;フォントサイズ: 1em; }
/* すべてのブラウザで事前にフォーマットされたテキストの読みやすさを向上させます */
pre {white-space: pre;ホワイトスペース: ラップ前;ワードラップ: ブレークワード; }
q { 引用符: なし; }
q:前、q:後 {コンテンツ: "";内容:なし。 }
small { font-size: 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 { list-style: none;リストスタイルイメージ: なし;マージン: 0;パディング: 0; }

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

/* ========================================= ====================================

======= ================================================= ================= */
図 { margin: 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. すべてのブラウザで一貫した垂直方向の配置表示を定義
*/
ボタン、入力、選択、テキストエリア { font-size: 100%;マージン: 0;垂直整列: ベースライン; *垂直配置: 中央; }
/*
* 1. FF3/4 に一致するように通常どおり行の高さを定義します (UA スタイルシートで ! important を使用して設定)
* 2. IE6/7 で奇妙に表示される内部スペースを修正します
*/
ボタン、入力 { line-height:normal; *オーバーフロー: 表示されます。 }
/*
* 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 { ボーダー: 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: 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 : 自動;高さ: 自動;マージン: 0;オーバーフロー: 表示;位置: 静的;幅: 自動; }
/* 視覚的にもスクリーンリーダーからも非表示にしますが、レイアウトは維持します */
.invisible { 可視性: 非表示; }
/* フロートを含む: h5bp.com/q */
.clearfix:before, .clearfix:after { content: "";表示: テーブル; }
.clearfix:after {クリア: 両方; }
.clearfix { ズーム: 1; }

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

/* ==|== 印刷スタイル ================================== =====================
印刷スタイル。
Sebaris untuk mengelakkan sambungan HTTP yang diperlukan: h5bp.com/r
================================================ ======================================== */
@cetakan media {
* { latar belakang: telus !penting; warna: hitam !penting; text-shadow: tiada !penting; penapis:tiada !penting; -ms-filter: tiada !penting; } /* Cetakan hitam lebih cepat: h5bp.com/s */
a, a:dilawati { text-decoration: underline; }
a[href]:selepas { kandungan: " (" attr(href) ")"; }
abbr[tajuk]:selepas { kandungan: " (" attr(tajuk) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Jangan tunjukkan pautan untuk imej, atau pautan javascript/dalaman */
sebelum, petikan blok { border: 1px solid #999; page-break-inside: elakkan; }
kepala { paparan: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: elakkan; }
img { lebar maksimum: 100% !penting; }
@halaman { jidar: 0.5cm; }
p, h2, h3 { anak yatim: 3; balu: 3; }
h2, h3 { page-break-after: elakkan; }
}
#startTimer{
kedudukan:warisi
lebar:75px;
tinggi:20px;
atas:35px;
kiri:25px;
kursor:penunjuk
}
#stopTimer{
kedudukan:warisi;
lebar:75px;
tinggi:20px;
atas:10px;
kiri:25px;
kursor:penunjuk
}
#countdownCanvas{
jejari sempadan:25px;
bayang-kotak:10px 10px 5px #888888;
}
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート