這篇文章主要介紹了HTML5實現(xiàn)計時器的代碼怎么寫的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇HTML5實現(xiàn)計時器的代碼怎么寫文章都會有所收獲,下面我們一起來看看吧。
為漣源等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及漣源網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、網(wǎng)站建設(shè)、漣源網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
代碼如下:
<!DOCTYPE html>
<!-始終強(qiáng)制使用最新的IE渲染引擎(即使在Intranet中也是如此)和Chrome瀏覽器內(nèi)嵌框架
如果您使用.htaccess->
<!-替換favicon.ico &apple-touch-icon.png在您域的根目錄中,并刪除這些引用->
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(“嘿,時間到了!”);
返回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>
header>
請選擇工作間隔:
分鐘
這是畫布
canvas>
努力工作
button>
休息一下
button>
&copy; 保留版權(quán)
p>
footer>
div>
body>
html>
css3:
復(fù)制代碼
代碼如下:
/ *
* HTML5?樣板
*
*以下是對跨瀏覽器樣式的大量研究的結(jié)果。
*感謝Nicolas Gallagher,Jonathan Neal,
* Kroc Camen以及H5BP開發(fā)人員社區(qū)和團(tuán)隊,對我們的工作給予了極大的感謝。
*
*關(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è)置正文字體大小時,在IE6 / 7中更正文本的大小調(diào)整
* 2.在非IE中強(qiáng)制垂直滾動條
* 3.防止在設(shè)備上調(diào)整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;}
正文,按鈕,輸入,選擇,文本區(qū)域{font-family:“ Century Gothic”; color:#008000}
/ *
*刪除選擇突出顯示區(qū)域中的文本陰影:h6bp.com/i
*這些選擇聲明必須分開使用
*另外:粉色?。ɑ蜃远x背景顏色以匹配您的設(shè)計)
* /
::-moz-selection {background:#fe57a1; 顏色:#fff; 文本陰影:無;}
:: selection {背景:#fe57a1; 顏色:#fff; 文本陰影:無;}
/ * =============================================== =============================
鏈接
================================================== * /
a {color:#00e; }
a:visited {color:#551a8b; }
a:hover {color:#06e; }
a:focus {輪廓:細(xì)點綴;}
/ *當(dāng)在所有瀏覽器中集中和
懸浮時,提高可讀性:h6bp.com/h * / a:hover,a:active {輪廓:0; }
/ * =============================================== ============================
排版
=================== ================================================== ===== * /
abbr [title] {border-bottom:點綴1像素;}
b,強(qiáng){字體粗細(xì):粗體;}
blockquote {margin:1em 40px; }
dfn {font-style:italic; }
hr {display:block; 高度:1px;邊界:0; border-top:1px實心#ccc; 保證金:1em 0; 填充:0; }
ins {背景:#ff9; 顏色:#000; 文字修飾:無;}
標(biāo)記{背景:#ff0; 顏色:#000; 字體樣式:斜體;font-weight:粗體; }
/ *重新聲明等寬字體家族:h6bp.com/j * /
pre,code,kbd,samp { _font-family:“速遞”,等寬;字號:1em;}
/ *提高所有瀏覽器中預(yù)格式化文本的可讀性* /
pre {空白:pre; 空白:預(yù)包裝;自動換行:斷詞;}
q {引號:無;}
q:之前,q:之后{content:“”; 內(nèi)容:無;}
小{字體大小:85%;}
/ *在不影響行高的情況下定位下標(biāo)和上標(biāo)內(nèi)容: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; }
/ * =============================================== =============================
內(nèi)嵌內(nèi)容
================================================== * /
/ *
* 1.在IE7中縮放時提高圖像質(zhì)量:h6bp.com/d
* 2.消除差距在圖像和圖像容器上的邊框之間:h6bp.com/e
* /
img {border:0; -ms-interpolation-mode:雙三次;垂直對齊:中間;}
/ *
*糾正未在IE9中隱藏的溢出
* /
svg:not(:root){ }
/ * =============================================== ============================
數(shù)字
=================== ================================================== ===== * /
數(shù)字{邊距:0; }
/ * =============================================== =============================
形式
================================================= * /
形式{邊距:0; }
fieldset {border:0; 邊距:0; 填充:0; }
/ *指示“標(biāo)簽”會將焦點轉(zhuǎn)移到關(guān)聯(lián)的表單元素
上。}
/ *
* 1.糾正在IE6 / 7/8/9中不繼承的顏色
* 2.糾正在IE6 / 7中奇怪地顯示的對齊方式
* /
圖例{border:0; *左邊距:-7px; 填充:0; }
/ *
* 1.糾正并非在所有瀏覽器中都繼承的字體大小
* 2.刪除FF3 / 4 S5 Chrome中的頁邊距
* 3.在所有瀏覽器中定義一致的垂直對齊顯示
* /
按鈕,輸入,選擇,文本區(qū)域{字體大?。?00%;邊距:0; 垂直對齊:基線;*垂直對齊:中間;}
/ *
* 1.將線高定義為正常值以匹配FF3 / 4(在UA樣式表中使用!important進(jìn)行設(shè)置)
* 2.糾正IE6 / 7中奇怪顯示的內(nèi)部間距
* /
按鈕,輸入{ ; *溢出:可見;}
/ *
*在'table'中重新引入內(nèi)部間距,以避免IE6 / 7中的重疊和空白問題
* /
table按鈕,表輸入{* overflow:auto; }
/ *
* 1.顯示可點擊表單元素的手形光標(biāo)
* 2.允許在iOS中設(shè)置可點擊表單元素的樣式
* /
按鈕,輸入[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 { 垂直對齊:頂部;調(diào)整大?。捍怪?;}
/ *表單有效性的顏色* /
輸入:valid,textarea:valid {}
輸入:invalid,textarea:invalid {background-color:#f0dddd; }
/ * =============================================== =============================
表格
==================== ================================================== ===== * /
表{border-collapse:崩潰; 邊框間距:0;}
td {vertical-align:top; }
/ * == | ==主要樣式======================================== =============
作者:
==================================== ====================================== /
/ * == | ==非語義助手類===================================== ==
請在本節(jié)之前定義您的樣式。
================================================== * /
/ *用于圖像替換* /
.ir {display:block; 邊界:0; 文字縮進(jìn):-999em;溢出:隱藏;背景色:透明;背景重復(fù):不重復(fù);文字對齊:左;方向: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;}
/ *擴(kuò)展.visuallyhidden類,以使該元素在通過鍵盤導(dǎo)航時可聚焦:h6bp.com/p * /
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {clip:auto; 高度:自動;邊距:0; 溢出:可見;位置:靜態(tài);寬度:自動; }
/ *視覺上和向
屏幕閱讀器隱藏,但保持布局* / .invisible {可見性:隱藏;}
/ *包含浮點數(shù):h6bp.com/q * /
.clearfix:before,.clearfix:after {content:“”; 顯示:表;}
.clearfix:after {clear:both; }
.clearfix {zoom:1; }
/ * == | ==媒體查詢========================================== =============
PLACEHOLDER響應(yīng)式設(shè)計的媒體查詢。
這些將覆蓋主要樣式(“移動優(yōu)先”),并
根據(jù)內(nèi)容需要進(jìn)行修改。
================================================== * / @
僅限于媒體的屏幕和(最小寬度:480px){
/ *視口的樣式調(diào)整為480px及以上* /
}
@media only屏幕和(最小寬度:768px){
/ *視口768px及以上的樣式調(diào)整請轉(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)部鏈接* /
前置,框引號{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實現(xiàn)計時器的代碼怎么寫”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“HTML5實現(xiàn)計時器的代碼怎么寫”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。