首頁 > 文章 > web前端 > H5製作一個計時器的程式碼示範

H5製作一個計時器的程式碼示範

Y2J原創: 2017-05-23 13:59:164815瀏覽

聽到計時器之後或許大家認為只有在js中可以實現，其實這種想法在你不知道有html5的情況下還能成立，下文為大家介紹下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 ✰ 樣板
*
* 以下是跨瀏覽器樣式進行大量研究的結果。
* 歸功於 left 內聯，非常感謝 Nicolas Gallagher、Jonathan Neal、
* Kroc Camen 以及 H5BP 開發社群和團隊。
*
* 有關此CSS 的詳細資訊：h5bp.com/css
*
* ==|== 規範化================== = ===========================================
*/

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

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

/* =========================================== == =====================================
排版
==== === ================================================= ==== ================= */
abbr[title] { border-bottom: 1px 點線; }
b, 強 { 字型粗細: 粗體; }
blockquote { 邊距：1em 40px; }
dfn { 字體樣式：斜體； }
hr { 顯示：區塊；高度：1px；邊框：0；頂部邊框：1px 實線#ccc；保證金：1em 0；填充：0； }
ins { 背景：#ff9;顏色：#000；文字裝飾：無； }
mark { 背景：#ff0;顏色：#000；字體樣式：斜體；字體粗細：粗體； }
/* 重新宣告等寬字體系列: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: '快遞新'，等寬字體；字體大小：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 { border: 0; -ms-插值模式：雙三次；垂直對齊：居中； }
/*
* 修正 IE9 中未隱藏的溢位
*/
svg:not(:root) {overflow:hidden; }

/* =========================================== == =====================================
人物
==== === ================================================= ==== ================= */
圖{邊距：0； }

/* =========================================== == =====================================
表格
==== === ================================================= ==== ================= */
form { 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. 在所有瀏覽器中定義一致的垂直對齊顯示
*/
按鈕、輸入、選擇、文字區域{ 字體大小：100%；保證金：0；垂直對齊：基線； *垂直對齊：中間； }
/*
* 1. 正常定義行高以符合 FF3/4（在 UA 樣式表中使用 !important 設定）
* 2. 修正 IE6/7 中奇怪顯示的內部間距
*/
按鈕，輸入{ 行高：正常； *溢出：可見； }
/*
* 在'table'中重新引入內部間距，以避免 IE6/7 中的重疊和空白問題
*/
table 按鈕，table 輸入 { *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; }

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

/* ==|== 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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：詳解H5和HTML4的區別下一篇：詳解H5和HTML4的區別

看更多