溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了HTML5實現計時器的代碼怎么寫的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇HTML5實現計時器的代碼怎么寫文章都會有所收獲，下面我們一起來看看吧。
代碼如下：
<！DOCTYPE html>
<html lang =“ zh-CN”>
<head>
<meta charset =“ utf-8”>
<！-始終強制使用最新的IE渲染引擎（即使在Intranet中也是如此）和Chrome瀏覽器內嵌框架
如果您使用.htaccess->
<meta http-equiv =“ X-UA-Compatible” content =“ IE = edge，chrome = 1”>
<title>用于放松工作平衡的HTML5計時器</ title>
<meta name =“ description “ content =”“>
<meta name =” author“ content =” kevin“>
<meta name =” viewport“ content =” width = device-width; initial-scale = 1.0“>
<！-替換favicon.ico ＆apple-touch-icon.png在您域的根目錄中，并刪除這些引用->
<link rel =“快捷方式圖標” 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;
//窗口加載
函數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）;
clearInterval（handle）;
handle = null;
alert（“嘿，時間到了！”）;
返回0;
}
minStr = Math.floor（countDownSeconds / 60）;
secStr = countDownSeconds％60;
如果（minStr <10）{
minStr =“ 0” + minStr;
}
如果（secStr <10）{
secStr =“ 0” + secStr;
}
context.clearRect（0，0，width，height）;
context.font =“ 24pt世紀哥特式”;
context.fillText（minStr +“：” + secStr，寬度/ 2，高度/ 2）;
countDownSeconds--;
}
函數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）;
}
函數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（）”>
<div align =“ center”>
<header>
<h2>工作與生活平衡計時器</ h2>
</ header>
請選擇工作間隔：
<input name =“ workIntervalInput” id =“ workIntervalInput” type =“ number” value =“ 25” min =“ 15” max =“ 45” step =“ 5”
<input name =“ restIntervalInput” id =“ restIntervalInput” type =“ number” value =“ 5” min =“ 3” max =“ 10” step =“ 1” />
分鐘
<canvas id =“ countdownCanvas” width =“ 300“ height =” 50“ style =” border：2px純黑色“>
這是畫布
</ canvas>
<button onclick =” startWorkCountDown（）“>
努力工作
</ button>
<button onclick =” startRestCountDown（）“ >
休息一下
</ button>
<footer>
<p>
＆copy; 保留版權
</ p>
</ footer>
</ div>
</ body>
</ html>
css3：
復制代碼
代碼如下：
/ *
* HTML5?樣板
*
*以下是對跨瀏覽器樣式的大量研究的結果。
*感謝Nicolas Gallagher，Jonathan Neal，
* Kroc Camen以及H5BP開發人員社區和團隊，對我們的工作給予了極大的感謝。
*
*關于此CSS的詳細信息：h6bp.com/css
*
* == | ==規范化============================= ===========================
* /
/ * ================== ================================================== ==========
HTML5顯示定義
==================================== ===================================== * /
條，放在一邊，細節，figcaption，人物，頁腳，標題，hgroup，導航，部分{display：block; }
標題{text-shadow：＃220000 0px 0px 10px 10px;}
音頻，畫布，視頻{display：inline-block; *顯示：內聯；*縮放：1；}
audio：not（[controls]）{display：none; }
[隱藏] {顯示：無；}
/ * =============================================== ============================
基地
==================== ================================================== ===== * /
/ *
* 1.當使用em單位設置正文字體大小時，在IE6 / 7中更正文本的大小調整
* 2.在非IE中強制垂直滾動條
* 3.防止在設備上調整iOS文本大小更改方向，但不禁用用戶縮放：h6bp.com/g
* /
html {font-size：100％; 溢出-y：滾動；-webkit-text-size-adjust：100％; -ms-text-size-adjust：100％；}
body {margin：0; font-size：24px; 行高：1.231;}
正文，按鈕，輸入，選擇，文本區域{font-family：“ Century Gothic”; color：＃008000}
/ *
*刪除選擇突出顯示區域中的文本陰影：h6bp.com/i
*這些選擇聲明必須分開使用
*另外：粉色！（或自定義背景顏色以匹配您的設計）
* /
::-moz-selection {background：＃fe57a1; 顏色：#fff; 文本陰影：無；}
:: selection {背景：＃fe57a1; 顏色：#fff; 文本陰影：無；}
/ * =============================================== =============================
鏈接
================================================== * /
a {color：＃00e; }
a：visited {color：＃551a8b; }
a：hover {color：＃06e; }
a：focus {輪廓：細點綴；}
/ *當在所有瀏覽器中集中和
懸浮時，提高可讀性：h6bp.com/h * / a：hover，a：active {輪廓：0; }
/ * =============================================== ============================
排版
=================== ================================================== ===== * /
abbr [title] {border-bottom：點綴1像素；}
b，強{字體粗細：粗體；}
blockquote {margin：1em 40px; }
dfn {font-style：italic; }
hr {display：block; 高度：1px；邊界：0; border-top：1px實心#ccc; 保證金：1em 0; 填充：0; }
ins {背景：＃ff9; 顏色：＃000; 文字修飾：無；}
標記{背景：＃ff0; 顏色：＃000; 字體樣式：斜體；font-weight：粗體; }
/ *重新聲明等寬字體家族：h6bp.com/j * /
pre，code，kbd，samp { _font-family：“速遞”，等寬；字號：1em；}
/ *提高所有瀏覽器中預格式化文本的可讀性* /
pre {空白：pre; 空白：預包裝；自動換行：斷詞；}
q {引號：無；}
q：之前，q：之后{content：“”; 內容：無；}
小{字體大小：85％；}
/ *在不影響行高的情況下定位下標和上標內容：h6bp.com/k * /
sub，sup {font-size：75％; 行高：0 職位：相對 垂直對齊：基線；}
sup {top：-0.5em; }
sub {bottom：-0.25em; }
/ * =============================================== =============================
列表
=================== ================================================== ===== * /
ul，{{margin：1em 0; 填充：0 0 0 40px; }
dd {margin：0 0 0 40px; }
nav ul，nav ol {list-style：none; list-style-image：無；邊距：0; 填充：0; }
/ * =============================================== =============================
內嵌內容
================================================== * /
/ *
* 1.在IE7中縮放時提高圖像質量：h6bp.com/d
* 2.消除差距在圖像和圖像容器上的邊框之間：h6bp.com/e
* /
img {border：0; -ms-interpolation-mode：雙三次；垂直對齊：中間；}
/ *
*糾正未在IE9中隱藏的溢出
* /
svg：not（：root）{ }
/ * =============================================== ============================
數字
=================== ================================================== ===== * /
數字{邊距：0; }
/ * =============================================== =============================
形式
================================================= * /
形式{邊距：0; }
fieldset {border：0; 邊距：0; 填充：0; }
/ *指示“標簽”會將焦點轉移到關聯的表單元素
上。}
/ *
* 1.糾正在IE6 / 7/8/9中不繼承的顏色
* 2.糾正在IE6 / 7中奇怪地顯示的對齊方式
* /
圖例{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按鈕，表輸入{* overflow：auto; }
/ *
* 1.顯示可點擊表單元素的手形光標
* 2.允許在iOS中設置可點擊表單元素的樣式
* /
按鈕，輸入[type =“ button”]，輸入[type =“ reset”]，輸入[type =“ submit”] {光標：指針；-webkit-appearance：按鈕；}
/ *
*一致的框大小和外觀
* /
input [type =“ checkbox”]，input [type =“ radio”] {box-sizing：border-box; }
input [type =“ search”] {-webkit-appearance：textfield; -moz-box-sizing：內容框；-webkit-box-sizing：內容框；框大小：內容框；}
input [type =“ search”] ::-webkit-search-decoration {-webkit-appearance：none; }
/ *
*刪除FF3 / 4中的內部填充和邊框：h6bp.com/l
* /
button ::-moz-focus-inner，輸入：:-moz-focus-inner {border：0; 填充：0; }
/ *
* 1。
* 2.僅允許垂直調整大小
* /
textarea { 垂直對齊：頂部；調整大小：垂直；}
/ *表單有效性的顏色* /
輸入：valid，textarea：valid {}
輸入：invalid，textarea：invalid {background-color：＃f0dddd; }
/ * =============================================== =============================
表格
==================== ================================================== ===== * /
表{border-collapse：崩潰; 邊框間距：0；}
td {vertical-align：top; }
/ * == | ==主要樣式======================================== =============
作者：
==================================== ====================================== /
/ * == | ==非語義助手類===================================== ==
請在本節之前定義您的樣式。
================================================== * /
/ *用于圖像替換* /
.ir {display：block; 邊界：0; 文字縮進：-999em；溢出：隱藏；背景色：透明；背景重復：不重復；文字對齊：左；方向：ltr; }
.ir br {display：none; }
/ *對屏幕閱讀器和瀏覽器都隱藏：h6bp.com/u * / .hidden
{display：none！important; 可見性：隱藏；}
/ *僅在視覺上隱藏，但可供屏幕閱讀器使用：h6bp.com/v * /
.visuallyhidden {邊界：0; 剪輯：rect（0 0 0 0）; 高度：1px；邊距：-1px; 溢出：隱藏；填充：0; 位置：絕對；寬度：1px；}
/ *擴展.visuallyhidden類，以使該元素在通過鍵盤導航時可聚焦：h6bp.com/p * /
.visuallyhidden.focusable：active，.visuallyhidden.focusable：focus {clip：auto; 高度：自動；邊距：0; 溢出：可見；位置：靜態；寬度：自動; }
/ *視覺上和向
屏幕閱讀器隱藏，但保持布局* / .invisible {可見性：隱藏；}
/ *包含浮點數：h6bp.com/q * /
.clearfix：before，.clearfix：after {content：“”; 顯示：表；}
.clearfix：after {clear：both; }
.clearfix {zoom：1; }
/ * == | ==媒體查詢========================================== =============
PLACEHOLDER響應式設計的媒體查詢。
這些將覆蓋主要樣式（“移動優先”），并
根據內容需要進行修改。
================================================== * / @
僅限于媒體的屏幕和（最小寬度：480px）{
/ *視口的樣式調整為480px及以上* /
}
@media only屏幕和（最小寬度：768px）{
/ *視口768px及以上的樣式調整請轉到此處* /
}
/ * == | ==打印樣式=========== ===========================================
打印樣式。
內聯以避免必需的HTTP連接：h6bp.com/r
================================================== * /
@media print {
* {background：transparent！important; 顏色：黑色！重要；文本陰影：無！重要；過濾器：無！重要；-ms-filter：無！重要; } / *黑色打印速度更快：h6bp.com/s * /
a，a：已訪問{文本修飾：下劃線；}
a [href]：在{content：“（” attr（href）“）”之后；}
abbr [title]：之后{content：“（” attr（title）“）”; }
.ir a：after，a [href ^ =“ javascript：”]：after，a [href ^ =“＃”]：after {content：“”; } / *不顯示圖片鏈接，或顯示javascript /內部鏈接* /
前置，框引號{border：1px solid＃999; page-break-inside：避免；}
thead {display：table-header-group; } / * h6bp。
tr，img {page-break-inside：避免; }
img {max-width：100％！important; }
@page {邊距：0.5厘米；}
p，h3，h4 {孤兒：3；寡婦：3; }
h3，h4 {page-break-after：避免; }
}
#startTimer {
position：inherit
width：75px;
高度：20px；
頂部：35px；
左：25px;
cursor：pointer
}
#stopTimer {
position：inherit;
寬度：75px;
高度：20px；
頂部：10px;
左：25px;
cursor：pointer
}
#countdownCanvas {
border-radius：25px;
box-shadow：10px 10px 5px＃888888;
}
關于“HTML5實現計時器的代碼怎么寫”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“HTML5實現計時器的代碼怎么寫”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
