溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了HTML5實(shí)現(xiàn)計(jì)時(shí)器的代碼怎么寫的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇HTML5實(shí)現(xiàn)計(jì)時(shí)器的代碼怎么寫文章都會(huì)有所收獲，下面我們一起來看看吧。
代碼如下：
<！DOCTYPE html>
<html lang =“ zh-CN”>
<head>
<meta charset =“ utf-8”>
<！-始終強(qiáng)制使用最新的IE渲染引擎（即使在Intranet中也是如此）和Chrome瀏覽器內(nèi)嵌框架
如果您使用.htaccess->
<meta http-equiv =“ X-UA-Compatible” content =“ IE = edge，chrome = 1”>
<title>用于放松工作平衡的HTML5計(jì)時(shí)器</ 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 =“快捷方式圖標(biāo)” 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;
//窗口加載
函數(shù)onLoadWindow（）{
aCanvas = document.getElementById（“ countdownCanvas”）;
context = aCanvas.getContext（“ 2d”）;
var canvasText =“按開始...”;
var xPos = aCanvas.width / 2;
var yPos = aCanvas.height / 2;
context.font =“ 12pt世紀(jì)哥特式”;
context.fillStyle =“＃008000;”;
context.textAlign =“中心”;
context.textBaseline =“中間”;
context.fillText（canvasText，xPos，yPos）;
clearInterval（handle）;
handle = null;
alert（“嘿，時(shí)間到了！”）;
返回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世紀(jì)哥特式”;
context.fillText（minStr +“：” + secStr，寬度/ 2，高度/ 2）;
countDownSeconds--;
}
函數(shù)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）;
}
函數(shù)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>工作與生活平衡計(jì)時(shí)器</ h2>
</ header>
請(qǐng)選擇工作間隔：
<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; 保留版權(quán)
</ p>
</ footer>
</ div>
</ body>
</ html>
css3：
復(fù)制代碼
代碼如下：
/ *
* HTML5?樣板
*
*以下是對(duì)跨瀏覽器樣式的大量研究的結(jié)果。
*感謝Nicolas Gallagher，Jonathan Neal，
* Kroc Camen以及H5BP開發(fā)人員社區(qū)和團(tuán)隊(duì)，對(duì)我們的工作給予了極大的感謝。
*
*關(guān)于此CSS的詳細(xì)信息：h6bp.com/css
*
* == | ==規(guī)范化============================= ===========================
* /
/ * ================== ================================================== ==========
HTML5顯示定義
==================================== ===================================== * /
條，放在一邊，細(xì)節(jié)，figcaption，人物，頁腳，標(biāo)題，hgroup，導(dǎo)航，部分{display：block; }
標(biāo)題{text-shadow：＃220000 0px 0px 10px 10px;}
音頻，畫布，視頻{display：inline-block; *顯示：內(nèi)聯(lián)；*縮放：1；}
audio：not（[controls]）{display：none; }
[隱藏] {顯示：無；}
/ * =============================================== ============================
基地
==================== ================================================== ===== * /
/ *
* 1.當(dāng)使用em單位設(shè)置正文字體大小時(shí)，在IE6 / 7中更正文本的大小調(diào)整
* 2.在非IE中強(qiáng)制垂直滾動(dòng)條
* 3.防止在設(shè)備上調(diào)整iOS文本大小更改方向，但不禁用用戶縮放：h6bp.com/g
* /
html {font-size：100％; 溢出-y：滾動(dòng)；-webkit-text-size-adjust：100％; -ms-text-size-adjust：100％；}
body {margin：0; font-size：24px; 行高：1.231;}
正文，按鈕，輸入，選擇，文本區(qū)域{font-family：“ Century Gothic”; color：＃008000}
/ *
*刪除選擇突出顯示區(qū)域中的文本陰影：h6bp.com/i
*這些選擇聲明必須分開使用
*另外：粉色?。ɑ蜃远x背景顏色以匹配您的設(shè)計(jì)）
* /
::-moz-selection {background：＃fe57a1; 顏色：#fff; 文本陰影：無；}
:: selection {背景：＃fe57a1; 顏色：#fff; 文本陰影：無；}
/ * =============================================== =============================
鏈接
================================================== * /
a {color：＃00e; }
a：visited {color：＃551a8b; }
a：hover {color：＃06e; }
a：focus {輪廓：細(xì)點(diǎn)綴；}
/ *當(dāng)在所有瀏覽器中集中和
懸浮時(shí)，提高可讀性：h6bp.com/h * / a：hover，a：active {輪廓：0; }
/ * =============================================== ============================
排版
=================== ================================================== ===== * /
abbr [title] {border-bottom：點(diǎn)綴1像素；}
b，強(qiáng){字體粗細(xì)：粗體；}
blockquote {margin：1em 40px; }
dfn {font-style：italic; }
hr {display：block; 高度：1px；邊界：0; border-top：1px實(shí)心#ccc; 保證金：1em 0; 填充：0; }
ins {背景：＃ff9; 顏色：＃000; 文字修飾：無；}
標(biāo)記{背景：＃ff0; 顏色：＃000; 字體樣式：斜體；font-weight：粗體; }
/ *重新聲明等寬字體家族：h6bp.com/j * /
pre，code，kbd，samp { _font-family：“速遞”，等寬；字號(hào)：1em；}
/ *提高所有瀏覽器中預(yù)格式化文本的可讀性* /
pre {空白：pre; 空白：預(yù)包裝；自動(dòng)換行：斷詞；}
q {引號(hào)：無；}
q：之前，q：之后{content：“”; 內(nèi)容：無；}
小{字體大?。?5％；}
/ *在不影響行高的情況下定位下標(biāo)和上標(biāo)內(nèi)容：h6bp.com/k * /
sub，sup {font-size：75％; 行高：0 職位：相對(duì) 垂直對(duì)齊：基線；}
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; }
/ * =============================================== =============================
內(nèi)嵌內(nèi)容
================================================== * /
/ *
* 1.在IE7中縮放時(shí)提高圖像質(zhì)量：h6bp.com/d
* 2.消除差距在圖像和圖像容器上的邊框之間：h6bp.com/e
* /
img {border：0; -ms-interpolation-mode：雙三次；垂直對(duì)齊：中間；}
/ *
*糾正未在IE9中隱藏的溢出
* /
svg：not（：root）{ }
/ * =============================================== ============================
數(shù)字
=================== ================================================== ===== * /
數(shù)字{邊距：0; }
/ * =============================================== =============================
形式
================================================= * /
形式{邊距：0; }
fieldset {border：0; 邊距：0; 填充：0; }
/ *指示“標(biāo)簽”會(huì)將焦點(diǎn)轉(zhuǎn)移到關(guān)聯(lián)的表單元素
上。}
/ *
* 1.糾正在IE6 / 7/8/9中不繼承的顏色
* 2.糾正在IE6 / 7中奇怪地顯示的對(duì)齊方式
* /
圖例{border：0; *左邊距：-7px; 填充：0; }
/ *
* 1.糾正并非在所有瀏覽器中都繼承的字體大小
* 2.刪除FF3 / 4 S5 Chrome中的頁邊距
* 3.在所有瀏覽器中定義一致的垂直對(duì)齊顯示
* /
按鈕，輸入，選擇，文本區(qū)域{字體大?。?00％；邊距：0; 垂直對(duì)齊：基線；*垂直對(duì)齊：中間；}
/ *
* 1.將線高定義為正常值以匹配FF3 / 4（在UA樣式表中使用！important進(jìn)行設(shè)置）
* 2.糾正IE6 / 7中奇怪顯示的內(nèi)部間距
* /
按鈕，輸入{ ; *溢出：可見；}
/ *
*在'table'中重新引入內(nèi)部間距，以避免IE6 / 7中的重疊和空白問題
* /
table按鈕，表輸入{* overflow：auto; }
/ *
* 1.顯示可點(diǎn)擊表單元素的手形光標(biāo)
* 2.允許在iOS中設(shè)置可點(diǎn)擊表單元素的樣式
* /
按鈕，輸入[type =“ button”]，輸入[type =“ reset”]，輸入[type =“ submit”] {光標(biāo)：指針；-webkit-appearance：按鈕；}
/ *
*一致的框大小和外觀
* /
input [type =“ checkbox”]，input [type =“ radio”] {box-sizing：border-box; }
input [type =“ search”] {-webkit-appearance：textfield; -moz-box-sizing：內(nèi)容框；-webkit-box-sizing：內(nèi)容框；框大?。簝?nèi)容框；}
input [type =“ search”] ::-webkit-search-decoration {-webkit-appearance：none; }
/ *
*刪除FF3 / 4中的內(nèi)部填充和邊框：h6bp.com/l
* /
button ::-moz-focus-inner，輸入：:-moz-focus-inner {border：0; 填充：0; }
/ *
* 1。
* 2.僅允許垂直調(diào)整大小
* /
textarea { 垂直對(duì)齊：頂部；調(diào)整大?。捍怪?；}
/ *表單有效性的顏色* /
輸入：valid，textarea：valid {}
輸入：invalid，textarea：invalid {background-color：＃f0dddd; }
/ * =============================================== =============================
表格
==================== ================================================== ===== * /
表{border-collapse：崩潰; 邊框間距：0；}
td {vertical-align：top; }
/ * == | ==主要樣式======================================== =============
作者：
==================================== ====================================== /
/ * == | ==非語義助手類===================================== ==
請(qǐng)?jiān)诒竟?jié)之前定義您的樣式。
================================================== * /
/ *用于圖像替換* /
.ir {display：block; 邊界：0; 文字縮進(jìn)：-999em；溢出：隱藏；背景色：透明；背景重復(fù)：不重復(fù)；文字對(duì)齊：左；方向：ltr; }
.ir br {display：none; }
/ *對(duì)屏幕閱讀器和瀏覽器都隱藏：h6bp.com/u * / .hidden
{display：none！important; 可見性：隱藏；}
/ *僅在視覺上隱藏，但可供屏幕閱讀器使用：h6bp.com/v * /
.visuallyhidden {邊界：0; 剪輯：rect（0 0 0 0）; 高度：1px；邊距：-1px; 溢出：隱藏；填充：0; 位置：絕對(duì)；寬度：1px；}
/ *擴(kuò)展.visuallyhidden類，以使該元素在通過鍵盤導(dǎo)航時(shí)可聚焦：h6bp.com/p * /
.visuallyhidden.focusable：active，.visuallyhidden.focusable：focus {clip：auto; 高度：自動(dòng)；邊距：0; 溢出：可見；位置：靜態(tài)；寬度：自動(dòng); }
/ *視覺上和向
屏幕閱讀器隱藏，但保持布局* / .invisible {可見性：隱藏；}
/ *包含浮點(diǎn)數(shù)：h6bp.com/q * /
.clearfix：before，.clearfix：after {content：“”; 顯示：表；}
.clearfix：after {clear：both; }
.clearfix {zoom：1; }
/ * == | ==媒體查詢========================================== =============
PLACEHOLDER響應(yīng)式設(shè)計(jì)的媒體查詢。
這些將覆蓋主要樣式（“移動(dòng)優(yōu)先”），并
根據(jù)內(nèi)容需要進(jìn)行修改。
================================================== * / @
僅限于媒體的屏幕和（最小寬度：480px）{
/ *視口的樣式調(diào)整為480px及以上* /
}
@media only屏幕和（最小寬度：768px）{
/ *視口768px及以上的樣式調(diào)整請(qǐng)轉(zhuǎn)到此處* /
}
/ * == | ==打印樣式=========== ===========================================
打印樣式。
內(nèi)聯(lián)以避免必需的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 /內(nèi)部鏈接* /
前置，框引號(hào){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;
}
關(guān)于“HTML5實(shí)現(xiàn)計(jì)時(shí)器的代碼怎么寫”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“HTML5實(shí)現(xiàn)計(jì)時(shí)器的代碼怎么寫”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
