ความคิดเห็น: หลังจากได้ยินตัวจับเวลาคุณอาจคิดว่ามันสามารถนำไปใช้ใน JS เท่านั้น ในความเป็นจริงความคิดนี้ยังคงถูกต้องหากคุณไม่ทราบว่ามี HTML5 นี่คือคำอธิบายว่าตัวจับเวลาถูกนำไปใช้อย่างไรใน HTML5 เพื่อนที่สนใจไม่ควรพลาด
html:<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<!- บังคับใช้เอ็นจิ้นการแสดงผลล่าสุดเสมอ (แม้ในอินทราเน็ต) และเฟรมโครเมี่ยม
ลบสิ่งนี้หากคุณใช้. htaccess ->
<meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "ie = edge, chrome = 1">
<tite> ตัวจับเวลา HTML5 สำหรับยอดคงเหลือในการทำงานของ Relax </title>
<meta content = "">
<meta content = "kevin">
<meta content = "width = ความกว้างของอุปกรณ์; ระดับเริ่มต้น = 1.0">
<!-แทนที่ favicon.ico & apple-touch-icon.png ในรากของโดเมนของคุณและลบการอ้างอิงเหล่านี้->
<link href = "/favicon.ico"/>
<link href = "/apple-touch-icon.png"/>
<link type = "text/css" href = "css/style.css">
<script>
COUNTDOWNSECONDS = 60;
var handle = null;
// โหลดหน้าต่าง
ฟังก์ชั่น onloadwindow () {
acanvas = document.getElementById ("countdowncanvas");
บริบท = acanvas.getContext ("2d");
var canVastext = "กดเพื่อเริ่ม ... ";
var xpos = acanvas.width / 2;
var ypos = acanvas.height / 2;
Context.font = "ศตวรรษที่ 12pt Gothic";
Context.fillstyle = "#008000;";
Context.TextAlign = "Center";
context.textBaseline = "กลาง";
Context.fillText (CanVastext, XPOS, YPOS);
-
ฟังก์ชั่น updateCanvas (thecontext, ความกว้าง, ความสูง) {
if (countdownseconds <0) {
ClearInterval (ด้ามจับ);
มือจับ = null;
การแจ้งเตือน ("เฮ้เวลาขึ้นแล้ว!");
กลับ 0;
-
minstr = math.floor (Countdownseconds / 60);
secstr = countdownseconds % 60;
ถ้า (minstr <10) {
minstr = "0" + minstr;
-
ถ้า (secstr <10) {
secstr = "0" + secstr;
-
context.clearRect (0, 0, ความกว้าง, ความสูง);
Context.font = "24pt Century Gothic";
Context.fillText (minstr + ":" + secstr, ความกว้าง / 2, ความสูง / 2);
การนับถอยหลังวินาที-;
-
ฟังก์ชั่น StartWorkCountDown () {
if (handle! = null) {
ClearInterval (ด้ามจับ);
-
countdownseconds = document.getElementById ("workInterValInput") ค่า * 60;
timeDisplayCanvas = document.getElementById ("CountdownCanvas");
timeDisplayContext2d = timedisplaycanvas.getContext ("2d");
updateCanvas (timedisplaycontext2d, timedisplaycanvas.width, timedisplaycanvas.height);
handle = setInterval (function () {
updateCanvas (timedisplaycontext2d, timedisplaycanvas.width, timedisplaycanvas.height);
}, 1,000);
-
ฟังก์ชั่น StartRestCountDown () {
if (handle! = null) {
ClearInterval (ด้ามจับ);
-
countdownseconds = document.getElementById ("RESTINTINVALINPUT") ค่า * 60;
timeDisplayCanvas = document.getElementById ("CountdownCanvas");
timeDisplayContext2d = timedisplaycanvas.getContext ("2d");
updateCanvas (timedisplaycontext2d, timedisplaycanvas.width, timedisplaycanvas.height);
handle = setInterval (function () {
updateCanvas (timedisplaycontext2d, timedisplaycanvas.width, timedisplaycanvas.height);
}, 1,000);
-
</script>
</head>
<body>
<div>
<ส่วนหัว>
<h1> ตัวจับเวลายอดคงเหลือชีวิตการทำงาน </h1>
</header>
โปรดเลือกช่วงเวลาการทำงาน:
<input type = "number" value = "25" min = "15" max = "45" step = "5"/>
นาที
โปรดเลือกช่วงเวลาที่เหลือ:
<อินพุต type = "number" value = "5" min = "3" max = "10" step = "1"/>
นาที
<Canvas>
นี่คือผืนผ้าใบ
</sanvas>
<ปุ่ม>
ทำงานหนัก
</kout>
<ปุ่ม>
พัก
</kout>
<footer>
<p>
&สำเนา; สงวนลิขสิทธิ์
</p>
</footer>
</div>
</body>
</html>
CSS3:
-
* HTML5 ✰หม้อไอน้ำ
-
* สิ่งต่อไปนี้เป็นผลมาจากการวิจัยมากมายเกี่ยวกับสไตล์ข้ามเบราว์เซอร์
* เครดิตที่เหลือในอินไลน์และขอบคุณมากสำหรับ Nicolas Gallagher, Jonathan Neal,
* Kroc Camen และชุมชนและทีมงาน H5BP DEV
-
* ข้อมูลรายละเอียดเกี่ยวกับ CSS นี้: h5bp.com/css
-
* == | == ปกติ ===========================================================================================
-
-
คำจำกัดความการแสดงผล HTML5
-
บทความ, นอกเหนือจากรายละเอียด, figcaption, รูป, ส่วนท้าย, ส่วนหัว, hgroup, nav, ส่วน {display: block; -
ส่วนหัว {text-shadow: #220000 0px 0px 10px 10px 10px;}
เสียง, ผ้าใบ, วิดีโอ {display: inline-block; *แสดง: อินไลน์; *ซูม: 1; -
เสียง: ไม่ใช่ ([ควบคุม]) {แสดง: ไม่มี; -
[ซ่อน] {แสดง: ไม่มี; -
-
ฐาน
-
-
* 1. การปรับขนาดข้อความที่ถูกต้องใน IE6/7 เมื่อตั้งค่าตัวอักษรขนาดร่างกายโดยใช้หน่วย EM
* 2. บังคับให้แถบเลื่อนแนวตั้งใน non-ie
* 3. ป้องกันขนาดข้อความ iOS ปรับเปลี่ยนการเปลี่ยนทิศทางของอุปกรณ์โดยไม่ปิดใช้งานการซูมผู้ใช้: h5bp.com/g
-
HTML {ขนาดตัวอักษร: 100%; Overflow-y: Scroll; -webkit-text-size-size: 100%; -ms-text-size-adjust: 100%; -
ร่างกาย {มาร์จิ้น: 0; ขนาดตัวอักษร: 24px; ความสูงของสาย: 1.231;}
ร่างกาย, ปุ่ม, อินพุต, เลือก, textarea {font-family: "ศตวรรษโกธิค"; สี:#008000}
-
* ลบ text-shadow ในไฮไลต์การเลือก: h5bp.com/i
* การประกาศการเลือกเหล่านี้จะต้องแยกจากกัน
* ยัง: สีชมพูร้อน! (หรือปรับแต่งสีพื้นหลังเพื่อให้ตรงกับการออกแบบของคุณ)
-
::-Moz-selection {พื้นหลัง: #fe57a1; สี: #FFFF; Text-Shadow: ไม่มี; -
:: การเลือก {พื้นหลัง: #fe57a1; สี: #FFF; Text-Shadow: ไม่มี; -
-
ลิงค์
-
A {color: #00e; -
A: เยี่ยมชม {color: #551a8b; -
A: โฮเวอร์ {สี: #06E; -
A: โฟกัส {โครงร่าง: ประบาง ๆ ; -
/ * ปรับปรุงความสามารถในการอ่านเมื่อมุ่งเน้นและวางตัวในเบราว์เซอร์ทั้งหมด: h5bp.com/h *//
A: Hover, A: Active {โครงร่าง: 0; -
-
การพิมพ์
-
abbr [title] {border-bottom: 1px dotted; -
B, Strong {Font-Weight: Bold; -
blockquote {margin: 1em 40px; -
dfn {รูปแบบฟอนต์: ตัวเอียง; -
HR {display: block; ความสูง: 1px; ชายแดน: 0; ชายแดนด้านบน: 1px Solid #CCC; มาร์จิ้น: 1em 0; Padding: 0; -
ins {พื้นหลัง: สี: #000; การตกแต่งข้อความ: ไม่มี; -
Mark {background: #ff0; สี: #000; แบบฟอนต์: ตัวเอียง; Font-Weight: ตัวหนา; -
/ * redeclare monospace font family: h5bp.com/j */
ก่อน, รหัส, kbd, samp {font-family: monospace, monospace; _font-family: 'Courier ใหม่', Monospace; ขนาดตัวอักษร: 1EM; -
/ * ปรับปรุงความสามารถในการอ่านข้อความที่จัดรูปแบบล่วงหน้าในเบราว์เซอร์ทั้งหมด */
pre {space สีขาว: pre; อวกาศสีขาว: พรีทู; Word-wrap: break-word; -
Q {Quotes: None; -
ถาม: ก่อนหน้า, Q: หลังจาก {เนื้อหา: ""; เนื้อหา: ไม่มี; -
ขนาดเล็ก {ขนาดตัวอักษร: 85%; -
/ * เนื้อหา subscript และ superscript โดยไม่ส่งผลกระทบต่อความสูงของบรรทัด: h5bp.com/k *//
sub, sup {ขนาดตัวอักษร: 75%; ความสูงบรรทัด: 0; ตำแหน่ง: ญาติ; แนวตั้ง-แนว: พื้นฐาน; -
sup {top: -0.5em; -
sub {Bottom: -0.25em; -
-
รายการ
-
ul, ol {margin: 1em 0; Padding: 0 0 0 40px; -
dd {margin: 0 0 0 40px; -
nav ul, nav ol {list-style: none; ภาพสไตล์รายการ: ไม่มี; มาร์จิ้น: 0; Padding: 0; -
-
เนื้อหาที่ฝังอยู่
-
-
* 1. ปรับปรุงคุณภาพของภาพเมื่อปรับขนาดใน IE7: h5bp.com/D
* 2. ลบช่องว่างระหว่างภาพและเส้นขอบบนคอนเทนเนอร์รูปภาพ: h5bp.com/e
-
img {ชายแดน: 0; -ms-interpolation-mode: Bicubic; แนวตั้ง-แนว: กลาง; -
-
* ถูกต้องล้นที่ไม่ได้ซ่อนอยู่ใน IE9
-
SVG: ไม่ (: รูท) {ล้น: ซ่อน; -
-
รูป
-
รูป {มาร์จิ้น: 0; -
-
รูปแบบ
-
แบบฟอร์ม {มาร์จิ้น: 0; -
Fieldset {Border: 0; มาร์จิ้น: 0; Padding: 0; -
/ * ระบุว่า 'ฉลาก' จะเปลี่ยนโฟกัสไปยังองค์ประกอบฟอร์มที่เกี่ยวข้อง */
ฉลาก {เคอร์เซอร์: ตัวชี้; -
-
* 1. สีที่ถูกต้องไม่ได้รับมรดกใน IE6/7/8/9
* 2. การจัดตำแหน่งที่ถูกต้องแสดงอย่างผิดปกติใน IE6/7
-
ตำนาน {ชายแดน: 0; *ระยะขอบซ้าย: -7px; Padding: 0; -
-
* 1. แก้ไขขนาดตัวอักษรไม่ได้รับการสืบทอดในเบราว์เซอร์ทั้งหมด
* 2. ลบระยะขอบใน Chrome FF3/4 S5
* 3. กำหนดแสดงการจัดตำแหน่งแนวตั้งที่สอดคล้องกันในเบราว์เซอร์ทั้งหมด
-
ปุ่ม, อินพุต, เลือก, textarea {ขนาดตัวอักษร: 100%; มาร์จิ้น: 0; แนวตั้ง-แนว: พื้นฐาน; *แนวตั้ง-แนว: กลาง; -
-
* 1. กำหนดความสูงของสายตามปกติเพื่อให้ตรงกับ FF3/4 (ตั้งค่าโดยใช้! สำคัญในรูปแบบ UA)
* 2. การเว้นระยะห่างด้านในที่ถูกต้องแสดงอย่างผิดปกติใน IE6/7
-
ปุ่ม, อินพุต {line-height: ปกติ; *ล้น: มองเห็นได้; -
-
* reintroduce ระยะห่างภายในใน 'ตาราง' เพื่อหลีกเลี่ยงปัญหาการทับซ้อนและช่องว่างใน IE6/7
-
ปุ่มตาราง, อินพุตตาราง { *ล้น: อัตโนมัติ; -
-
* 1. แสดงเคอร์เซอร์มือสำหรับองค์ประกอบแบบฟอร์มที่คลิกได้
* 2. อนุญาตให้จัดแต่งทรงผมขององค์ประกอบแบบฟอร์มที่คลิกได้ใน iOS
-
ปุ่ม, อินพุต [type = "ปุ่ม"], อินพุต [type = "รีเซ็ต"], อินพุต [type = "ส่ง"] {เคอร์เซอร์: ตัวชี้; -webkit-appearance: ปุ่ม; -
-
* การปรับขนาดและรูปลักษณ์ที่สอดคล้องกัน
-
อินพุต [type = "ช่องทำเครื่องหมาย"], input [type = "Radio"] {การปรับขนาดกล่อง: border-box; -
อินพุต [type = "search"] {-webkit -appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; การปรับขนาดกล่อง: เนื้อหา-กล่อง; -
อินพุต [type = "search"] ::-webkit-search-decoration {-webkit-ispearance: ไม่มี; -
-
* ลบช่องว่างภายในและเส้นขอบใน FF3/4: h5bp.com/l
-
ปุ่ม ::-moz-focus-inner, อินพุต ::-moz-focus-inner {border: 0; Padding: 0; -
-
* 1. ลบแถบเลื่อนแนวตั้งเริ่มต้นใน IE6/7/8/9
* 2. อนุญาตเฉพาะการปรับขนาดแนวตั้ง
-
Textarea {overflow: auto; แนวตั้ง-แนว: ด้านบน; ปรับขนาด: แนวตั้ง; -
/ * สีสำหรับความถูกต้องแบบฟอร์ม */
อินพุต: ถูกต้อง, textarea: ถูกต้อง {}
อินพุต: ไม่ถูกต้อง, textarea: ไม่ถูกต้อง {พื้นหลังสี: #f0dddd; -
-
โต๊ะ
-
ตาราง {การล่มสลายของชายแดน: การล่มสลาย; ระยะห่างชายแดน: 0; -
TD {แนวตั้ง-แนว: ด้านบน; -
/* == | == รูปแบบหลัก =========================================================================================
ผู้เขียน:
-
/* == | = คลาส Helper ที่ไม่เป็นความหมาย ==============================================================================================
โปรดกำหนดสไตล์ของคุณก่อนส่วนนี้
-
/ * สำหรับการเปลี่ยนรูปภาพ */
.ir {display: block; ชายแดน: 0; Text -Indent: -999EM; ล้น: ซ่อน; พื้นหลังสี: โปร่งใส; พื้นหลังซ้ำ: ไม่ทำซ้ำ; TEXT-ALIGN: ซ้าย; ทิศทาง: ltr; -
.ir br {display: none; -
/ * ซ่อนจากทั้ง screenReaders และเบราว์เซอร์: h5bp.com/u */
. hidden {display: none! สำคัญ; ทัศนวิสัย: ซ่อน; -
/ * ซ่อนสายตาเท่านั้น แต่มีให้สำหรับ ScreenReaders: h5bp.com/v *//
.Visualerhided {Border: 0; คลิป: rect (0 0 0 0); ความสูง: 1px; มาร์จิ้น: -1px; ล้น: ซ่อน; Padding: 0; ตำแหน่ง: สัมบูรณ์; ความกว้าง: 1px; -
/ * ขยายคลาส. Visualual Hidden เพื่อให้องค์ประกอบที่จะเน้นเมื่อนำทางไปยังผ่านแป้นพิมพ์: h5bp.com/p *//
.Visualerhidden.focusable: active, .visualyhidden.focusable: โฟกัส {clip: auto; ความสูง: อัตโนมัติ; มาร์จิ้น: 0; ล้น: มองเห็นได้; ตำแหน่ง: คงที่; ความกว้าง: อัตโนมัติ; -
/ * ซ่อนสายตาและจาก screenReaders แต่รักษาเลย์เอาต์ */
.invisible {การมองเห็น: ซ่อน; -
/ * มี floats: h5bp.com/q */
.ClearFix: ก่อนหน้า. clearfix: หลังจาก {เนื้อหา: ""; แสดง: ตาราง; -
.ClearFix: หลังจาก {เคลียร์: ทั้งสอง; -
.ClearFix {ซูม: 1; -
/* == | == การสอบถามสื่อ ===============================================================================================
ตัวสอบถามสื่อตัวยึดสำหรับการออกแบบที่ตอบสนอง
สิ่งเหล่านี้แทนที่รูปแบบหลัก ('มือถือก่อน'))
แก้ไขเป็นเนื้อหาที่ต้องการ
-
หน้าจอ @media เท่านั้นและ (Min-Width: 480px) {
/ * การปรับสไตล์สำหรับ Viewports 480px และไปที่นี่ *//
-
หน้าจอ @media เท่านั้นและ (ขั้นต่ำสุด: 768px) {
/ * การปรับสไตล์สำหรับ Viewports 768px และไปที่นี่ *//
-
/* == | == รูปแบบการพิมพ์ ============================================================================================================
รูปแบบการพิมพ์
Inlined เพื่อหลีกเลี่ยงการเชื่อมต่อ http ที่จำเป็น: h5bp.com/r
-
@media print {
* {พื้นหลัง: โปร่งใส! สำคัญ; สี: สีดำ! สำคัญ; Text-Shadow: ไม่มี! สำคัญ; ตัวกรอง: ไม่มี! สำคัญ; -ms-filter: ไม่มี! สำคัญ; }/ * พิมพ์สีดำเร็วขึ้น: h5bp.com/s */
A, A: เยี่ยมชม {การกำหนดข้อความ: ขีดเส้นใต้; -
A [href]: หลังจาก {content: "(" attr (href) ")"; -
abbr [title]: หลังจาก {content: "(" attr (title) ")"; -
.ir A: หลังจาก, [href^= "JavaScript:"]: หลังจาก, [href^= "#"]: หลังจาก {เนื้อหา: ""; }/ * อย่าแสดงลิงก์สำหรับรูปภาพหรือลิงก์ JavaScript/ภายใน *//
Pre, Blockquote {Border: 1px Solid #999; Page-Break-Inside: หลีกเลี่ยง; -
Thead {display: table-header-group; }/ * h5bp.com/t */
tr, img {หน้า-การทำลายล้าง: หลีกเลี่ยง; -
img {ความกว้างสูงสุด: 100%! สำคัญ; -
@Page {มาร์จิ้น: 0.5 ซม.; -
P, H2, H3 {เด็กกำพร้า: 3; หญิงม่าย: 3; -
H2, H3 {หน้าเว็บ-หลังจาก: หลีกเลี่ยง; -
-
#StartTimer {
ตำแหน่ง: สืบทอด
ความกว้าง: 75px;
ความสูง: 20px;
ด้านบน: 35px;
ซ้าย: 25px;
เคอร์เซอร์: ตัวชี้
-
#stoptimer {
ตำแหน่ง: สืบทอด;
ความกว้าง: 75px;
ความสูง: 20px;
ด้านบน: 10px;
ซ้าย: 25px;
เคอร์เซอร์: ตัวชี้
-
#CountDownCanvas {
แนวชายแดน: 25px;
Box-Shadow: 10px 10px 5px #888888;
-