您現在的位置是:電腦技術吧?>? 基礎知識 ??>??小計時器,小型計時器??>??正文詳情

小計時器,小型計時器

貳興言2019-11-13 23:41:09 人圍觀
簡介科學小制作計時器在聽過計時器之后,你可能認為它只能在JS中實現,但事實上,當你不知道有HTML5的時候,這個想法就可以建立起來。以下是如何在HTML5中實現計時器。不要錯過HT簡易計

聽到計時器之后或許大家認為只有在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 titleHTML5 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() div align=center header h1work-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 /div /body /html css3: 復制代碼代碼如下:/* * HTML5 Boilerplate * * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. * * Detailed information about this CSS: h5bp.com/css * * ==|== normalize ========================================================== */ /* ============================================================================= HTML5 display definitions ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } header {text-shadow: #220000 0px 0px 10px 10px;} audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } /* ============================================================================= Base ========================================================================== */ /* * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units * 2. Force vertical scrollbar in non-IE * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g */ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; font-size: 24px; line-height: 1.231;} body, button, input, select, textarea {font-family:Century Gothic; color:#008000} /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection declarations have to be separate * Also: hot pink! (or customize the background color to match your design) */ ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } ::selection { background: #fe57a1; color: #fff; text-shadow: none; } /* ============================================================================= Links ========================================================================== */ a { color: #00e; } a:visited { color: #551a8b; } a:hover { color: #06e; } a:focus { outline: thin dotted; } /* Improve readability when focused and hovered in all browsers: h5bp.com/h */ a:hover, a:active { outline: 0; } /* ============================================================================= Typography ========================================================================== */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } /* Redeclare monospace font family: h5bp.com/j */ pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } /* Improve readability of pre-formatted text in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ; content: none; } small { font-size: 85%; } /* Position subscript and superscript content without affecting line-height: h5bp.com/k */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= Lists ========================================================================== */ ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } /* ============================================================================= Embedded content ========================================================================== */ /* * 1. Improve image quality when scaled in IE7: h5bp.com/d * 2. Remove the gap between images and borders on image containers: h5bp.com/e */ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* * Correct overflow not hidden in IE9 */ svg:not(:root) { overflow: hidden; } /* ============================================================================= Figures ========================================================================== */ figure { margin: 0; } /* ============================================================================= Forms ========================================================================== */ form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } /* Indicate that 'label' will shift focus to the associated form element */ label { cursor: pointer; } /* * 1. Correct color not inheriting in IE6/7/8/9 * 2. Correct alignment displayed oddly in IE6/7 */ legend { border: 0; *margin-left: -7px; padding: 0; } /* * 1. Correct font-size not inheriting in all browsers * 2. Remove margins in FF3/4 S5 Chrome * 3. Define consistent vertical alignment display in all browsers */ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } /* * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) * 2. Correct inner spacing displayed oddly in IE6/7 */ button, input { line-height: normal; *overflow: visible; } /* * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 */ table button, table input { *overflow: auto; } /* * 1. Display hand cursor for clickable form elements * 2. Allow styling of clickable form elements in iOS */ button, input[type=button], input[type=reset], input[type=submit] { cursor: pointer; -webkit-appearance: button; } /* * Consistent box sizing and appearance */ input[type=checkbox], input[type=radio] { box-sizing: border-box; } input[type=search] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } /* * Remove inner padding and border in FF3/4: h5bp.com/l */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Remove default vertical scrollbar in IE6/7/8/9 * 2. Allow only vertical resizing */ textarea { overflow: auto; vertical-align: top; resize: vertical; } /* Colors for form validity */ input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } /* ============================================================================= Tables ========================================================================== */ table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } /* ==|== primary styles ===================================================== Author: ========================================================================== */ /* ==|== non-semantic helper classes ======================================== Please define your styles before this section. ========================================================================== */ /* For image replacement */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } .ir br { display: none; } /* Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* Contain floats: h5bp.com/q */ .clearfix:before, .clearfix:after { content: ; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* ==|== media queries ====================================================== PLACEHOLDER Media Queries for Responsive Design. These override the primary ('mobile first') styles Modify as content requires. ========================================================================== */ @media only screen and (min-width: 480px) { /* Style adjustments for viewports 480px and over go here */ } @media only screen and (min-width: 768px) { /* Style adjustments for viewports 768px and over go here */ } /* ==|== 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; }

版權聲明:本文由 貳興言 整理編輯。

原標題:計時器小窗口,計時器比秒還小的單位

轉載注明出處:http://www.dn9ww09s.icu/basics/11979.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦桌面圖標變大了,電腦桌面圖標變大了怎么辦

    電腦桌面圖標變大了,電腦桌面圖標變大了怎么辦 相關圖片電腦桌面圖標變大了怎么還原有些用戶不習慣win10系統。重新安裝win7系統后,他們發現桌面圖標變大了。屏幕已經小到可以容納幾個圖標。我該怎么辦?如果我放大桌面圖標,它會非常...

  • 電腦一直黑屏開不了機,win10怎么跳過自動修復

    電腦一直黑屏開不了機,win10怎么跳過自動修復 相關圖片電腦電壓不夠開不了機無論是在辦公室還是在游戲中,計算機已經成為我們生活中不可缺少的技術產品。如果電腦不能打開,工作就不能進行,游戲也不能玩。高清視頻見。那么如何解...

  • 技術開發有哪些,技術開發屬于什么部門

    技術開發有哪些,技術開發屬于什么部門 相關圖片軟件開發屬于技術開發您可能已經看到許多使用jQuery/JS開發的顏色選擇器。今天,我們將使用HTML5技術來實現更好的顏色選擇器。希望你喜歡它復制代碼如下:!--preview元技術開發屬于什...

  • 電腦底部菜單欄不見了,電腦的菜單欄不見了

    電腦底部菜單欄不見了,電腦的菜單欄不見了 相關圖片電腦桌面菜單欄不見了當我們使用電腦時,電腦窗口的頂部會有一個菜單欄,非常方便,但有時我們不知道如何消失。一些用戶認為是中毒。他們想在那里殺死毒藥,但沒用。如果電腦...

  • 網站網頁布局,怎么布局網頁

    網站網頁布局,怎么布局網頁 相關圖片網頁左右布局代碼縮減采用div CSS布局,使代碼非常簡單。我相信所有熟悉這種方法的朋友都知道,只要調用CSS文件,就可以在每個web頁面中使用它們。用table tabl網頁布局有幾種...

  • 電腦上所有word打不開怎么辦,電腦里word打不開怎么回事

    電腦上所有word打不開怎么辦,電腦里word打不開怎么回事 相關圖片為啥word文檔打不開了在使用word文檔進行編輯時,經常會遇到文檔半編輯時的一些異常情況,導致文檔無法打開。什么情況?一個我們努力寫的word文檔就這么結束了?有辦法解決這個問...

  • 不會玩電腦教我怎么玩,教我學電腦

    不會玩電腦教我怎么玩,教我學電腦 相關圖片n卡筆記本Win7具有系統還原功能。如果系統損壞,可以使用此功能恢復系統。但是,在使用win7系統的過程中,有時需要關閉系統還原功能。win7如何關閉系統還原?現在讓我們有沒有教電...

  • css控件,css時間控件

    css控件,css時間控件 相關圖片js控件在用CSS刷新頁面時,我們很容易保存頁面控件的輸入值。例如,某些頁面意外刷新了頁面表單值,因此不再需要重新輸入。所以我們可以使用CSS來定義要保存的頁面刷新值。居中對...

  • 網絡視頻,網絡視頻分類

    網絡視頻,網絡視頻分類 相關圖片無網絡視頻怎么解決想必,用戶一定遇到過網絡視頻看不到的情況。一些網友如果不理解,會在網上查閱教程。然而,他們發現他們無法解釋網絡視頻無法看到的問題。他們認為這真的...

  • 表格怎么標記紅色,表格的標簽是什么

    表格怎么標記紅色,表格的標簽是什么 相關圖片excel標記這是網絡教學網提供的一系列教程,主要為初學者講解表單在網頁中的應用,包括最基本的知識、一些表單技巧等,希望大家能支持網絡教學。表是安排內容的最佳方式。在HT...

熱評文章

  • wifi網絡受限,wifi網絡受限怎么辦

    wifi網絡受限,wifi網絡受限怎么辦 相關圖片wifi連接上不能上網怎么辦WiFi是一種允許電子設備連接到無線局域網(WLAN)的技術,通常使用2.4G UHF或5g SHF ism射頻頻段。連接到WLAN通常受密碼保護。下面是小編收wifi可以連接但不能上網...

  • 背景,展示背景圖

    背景,展示背景圖 相關圖片企業文化背景圖片展示! DOCTYPE HTML head metahttp equiv=content type content=text/HTML;charset=UTF-8/產品展示背景圖片...

  • 電腦虛擬內存不足,電腦顯示虛擬內存不足

    電腦虛擬內存不足,電腦顯示虛擬內存不足 相關圖片電腦虛擬內存不足是什么原因一個用戶在使用win10系統的過程中,電腦總是提示“虛擬內存不足,會關閉應用程序”,怎么回事?此用戶應將虛擬內存設置得太低。在這種情況下,我們只...

  • ai怎么讓畫布和圖片一樣大,如何讓畫布和圖片一樣大

    ai怎么讓畫布和圖片一樣大,如何讓畫布和圖片一樣大 相關圖片cdr怎么讓畫布和內容一樣大以下是10個HTML5畫布技術效果的演示,絕對會讓你大吃一驚。當然,你也可能認為,在過去,flash技術可以在老瀏覽器中實現這種效果。但是,以下演示僅使用...

  • 開機進不了安全模式,安全模式也進不去系統

    開機進不了安全模式,安全模式也進不去系統 相關圖片筆記本電腦怎么按f8如果計算機無法正常啟動,可以使用“安全模式”或其他啟動選項啟動計算機。電腦啟動時按F8鍵,然后在“啟動模式”菜單中選擇“安全模式”。然而,有時我們發...

  • 導航條,如何做導航條

    導航條,如何做導航條 相關圖片橫向導航條第一步是創建一個新的my.html文件。按如下所示填寫內容。此HTML文件在結束之前不需要移動。它是內容:CSS代碼將內容復制到剪貼板!Doctypehtmlp導航條隱藏...

  • 0xc0000001怎么修復,hp z4 g4安裝win7

    0xc0000001怎么修復,hp z4 g4安裝win7 相關圖片bios取消raid現在,重新安裝系統也是一件非常簡單的事情。安裝win7系統時遇到一些問題是最麻煩的事情。安裝win7系統時,系統會提示您找不到硬盤驅動器。通常會有兩種錯誤消息:安裝...

  • 手機導航安裝,怎么用手機導航

    手機導航安裝,怎么用手機導航 相關圖片手機導航哪個好現在手機已經成為我們生活中最不可或缺的一部分,手機的發展速度也日新月異。旅行,旅行不知道怎么走,移動導航是那么重要,更重要的是,也可以離線使用,是不...

  • html required,html用require

    html required,html用require 相關圖片html input默認值CSS3提示只適用于高級瀏覽器:Chrome Firefox Safari IE9 有效、無效和必需。定義代碼如下:input:required,input:Vhtmlinput中文驗證...

  • USB共享網絡,usb共享網絡是什么意思

    USB共享網絡,usb共享網絡是什么意思 相關圖片小米usb共享網絡有網友說,USB共享網絡意味著我出差時經常沒有WiFi網絡。如果我能插上電腦上網,那就太好了,但是如何使用USB共享網絡呢?無論您的手機是通過流量還是WiFi,usb共享網...

關注微信

变脸官网查询