聽到計時器之後或許大家認為只有在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'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;
}登入後複製
【相关推荐】
1. HTML5免费视频教程
2. 通过H5实现拍照功能的实例详解
3. H5制作一个注册页面的代码实例
4. 教你用H5绘图的基础方法
5. 详解H5和HTML4的区别
以上是H5製作一個計時器的程式碼示範的詳細內容。更多資訊請關注PHP中文網其他相關文章！
