HTML5計時器小範例_html5教學技巧

html:

複製程式碼

程式碼如下：

countDownSeconds = 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 = "center";
context.textBaseline = "中";
context.fillText(canvasText, xPos, yPos);
}
函數updateCanvas(theContext, width, height) {
if (countDownSeconds clearInterval(handle);
句柄= null;
clearInterval(handle);
句柄= null;
嘿;時間到了！ ");
回傳0;
}
minStr = Math.floor(countDownSeconds / 60);
secStr = countDownSeconds % 60;
if (minStr = "0" minStr;
}
if (secStr secStr = "0" secStr;
}
context.clearRect(0, 0, 寬度, 高度);
context.font = "24pt 世紀哥德式";
context.fillText(minStr " : " secStr, 寬度/ 2, 高度/ 2);
countDownSeconds--;
}
function startWorkCountDown() {
if (handle != null) {
clearInterval(handle);
}
countDownSeconds = document.getElementById("workIntervalInput").value *600"). 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( 🎜>clearInterval(handle);
}
countDownSeconds = document.getElementById("restIntervalInput").value * 60;
timeDisplayCanvas = document.getElementById("count3vasy); getContext("2d");
updateCanvas(timeDisplayContext2D, timeDisplayCanvas.width, timeDisplayCanvas.height);
handle = setInterval(function() { pplayupdateCan.Dupplayupdate)
}, 1000);
}
腳本>
頭>


;

工作與生活平衡計時器

標題>
請選擇工作間隔：
>
分鐘

請選擇休息間隔：

分鐘



這是畫布




努力工作


休息一下

;

&複製；版權所有

頁腳>

身體>



css3:

複製程式碼

程式碼如下:

/*
* HTML5 ✰ 樣板
*
* 以下是對跨瀏覽器樣式進行大量研究的結果。
* 感謝 Nicolas Gallagher、Jonathan Neal、
* Kroc Camen 以及 H5BP 開發社群和團隊。
*
* 有關此CSS 的詳細資訊：h5bp.com/css
*
* ==|== 規範化================ = ===========================================
*/

/* =========================================== ===== ===============================
HTML5 顯示定義
===== ===== =============================================== ====== ============== */
article、aside、details、figcaption、figure、footer、header、hgroup、nav、section { display: block; }
標題{text-shadow: #220000 0px 0px 10px 10px;}
音訊、畫布、視訊{ display: inline-block; *顯示：內嵌； *縮放：1； }
音訊:not ([controls]) { 顯示: 無; }
[隱藏] { 顯示：無； }
/* ====================== ==================================================== =========
基礎
========== ======================== =========================== ============== */
/*
* 1. 修正在IE6/7 中使用em 單位設定正文字體大小時奇怪的文字調整
* 2 . 在非IE 中強制垂直滾動條
* 3. 防止iOS 文字大小在裝置方向更改時調整，而不停用使用者縮放：h5bp.com/g
*/
html { font-size: 100% ;溢出-y：滾動; -webkit-文字大小調整：100%; -ms-文字大小調整：100%; }
正文{ 邊距：0;字體大小：24px； line-height: 1.231;}
body, 按鈕, input, select, textarea {font-family:"Century Gothic "; color:#008000}
/*
* 刪除選擇突出顯示中的文字陰影：h5bp.com/i
* 這些選擇宣告必須分開
* 另外：亮粉色！ （或自訂背景顏色以符合您的設計）
*/
::-moz-selection { background: #fe57a1;顏色：#fff；文字陰影：無； }
::selection {背景：#fe57a1;顏色：#fff；文字陰影：無； }

/* ============================ ================= =================================== =====
連結
======= =============================== ==================== ================= */
a { 顏色：#00e; }
a:訪問過{ color: #551a8b; }
a:hover { 顏色: #06e; }
a:focus { 輪廓：細點； }
/* 提高在所有瀏覽器中聚焦與懸停時的可讀性：h5bp.com/h */
a:hover, a:active { Outline: 0; }

/* ========= ================================== ================== ======================
排版
===================== ===================================== =============== ==== */
abbr[title] { border-bottom: 1px dotted; }
b, 強{ 字體粗細: 粗體; }
塊引用{ 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: '快遞新'，等寬字體；字體大小：1em； }
/* 提高預先格式化文字在所有瀏覽器中的可讀性*/
pre { white-space: pre;空白：預換行；自動換行：斷詞； }
q { 引號：無； }
q:之前, q:之後{ 內容: "";內容：無； }
小{ 字體大小：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 { border: 0; -ms-插值模式：雙三次；垂直對齊：居中； }
/*
* 修正IE9 中未隱藏的溢出
*/
svg:not(:root) { Overflow: hide; }

/* =========================================== ===== =================================
數字
======= === ==================================================== =============== */
figure { margin: 0; }

/* ================================================== ==== =============================
表格
========== ==== ================================================ ===== ========== */
形式 { margin: 0; }
fieldset { 邊框：0;保證金：0；填充：0; }
/*指示'label' 將焦點轉移到關聯的表單元素*/
label {cursor:pointer; }
/*
* 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: 正常; *溢位：可見； }
/*
* 在'table' 中重新引入內部間距，以避免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: textfield; -moz-box-sizing：內容框； -webkit-box-sizing：內容框； box-sizing：內容框; }
input[type="search"] ::-webkit-search-decoration { -webkit-appearance: none; }
/*
* 刪除FF3/4 中的內邊距與邊框：h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus -內部{邊框：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 { display: none !important; 可見性：隱藏； }
/* 僅在視覺上隱藏，但可供螢幕閱讀器使用：h5bp.com/v */
.visuallyhidden { border: 0;剪輯：矩形（0 0 0 0）；高度：1px；邊距：-1px；溢出：隱藏;填充：0；位置：絕對；寬度：1 像素； }
/* 擴展.visuallyhidden 類，以允許元素在通過鍵盤導航到時可聚焦：h5bp.com/p */
.visuallyhidden. focusable:active, .visuallyhidden.focusable:focus { Clip ：汽車; 高度：自動；保證金：0;溢出：可見；位置：靜態；寬度：自動； }
/* 在視覺上隱藏且不被螢幕閱讀器看到，但保持佈局*/
.invisible {visibility:hidden; }
/* 包含浮動：h5bp.com/q */
.clearfix:before, .clearfix:after { content: "";顯示：表； }
.clearfix:after { 清除：兩者； }
.clearfix { 縮放：1; }

/* ==|== 媒體查詢== ================================== ================== ====
用於響應式設計的佔位符媒體查詢。
這些會覆蓋主要（「行動優先」）樣式
根據內容需求進行修改。
=============================================== === =========================== */
@media only 螢幕和（最小寬度：480px）{
/* 480px 以上視窗的樣式調整請移至此處*/
}
@media only screen and (min-width: 768px) {
/* 768px 以上視窗的樣式調整請移至此處*/
}

/* ==|== 列印樣式========================== ========== ===================== 列印樣式。 內聯以避免所需的HTTP 連線：h5bp.com/r
================================== ====== ========================================= */
@media print {
* { 背景：透明！重要；顏色：黑色！重要；文字陰影：無！重要；濾鏡：無！重要； -ms-filter：無！重要; } /* 黑色列印速度更快：h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr (href) ")"; }
abbr[標題]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:" ]:after, a[href^="#"]:after { content: ""; } /* 不顯示影像連結或javascript/內部連結*/
pre, blockquote { border: 1pxsolid #999;內部分頁：避免； }
thead { 顯示：表頭組； } /* h5bp.com/t */
tr, img { page-break-inside: 避免; }
img { 最大寬度：100 %！重要; }
@page { 邊距：0.5cm; }
p, h2, h3 { 孤兒：3;寡婦：3; }
h2, h3 { 分頁後：避免； }
}
#startTimer{
位置：繼承
寬度：75px;
高度：20px;
上方：35px;
左：25px；
遊標：指標：指標 #stopTimer{
位置：繼承；
寬度：75px;
高度：20px;
上方：10px;
左：25px;
頂：10px;
左：25px；
光標：指針
}
#countdownCanvas{
邊框半徑：25px;
盒子陰影：10px 10px 5px #888888;
}