นาฬิกา
วิธีที่ง่ายที่สุดในการสร้างนาฬิกาคือการใช้วิธีการ EXEC () ของนิพจน์ทั่วไปเพื่อสกัดกั้นส่วนเวลาของสตริงของวัตถุเวลาและรีเฟรชด้วยตัวจับเวลา
<div id = "mydiv"> </div> <script> mydiv.innerhtml = //d/d:/d/d/d/d/d/.exec( วันที่ (). toString ()) [0]; setInterval (function () {mydiv.innerhtml = //d/d/d/d/d/d/d/d/d วันที่ (). ToString ()) [0];}, 500);การนับถอยหลัง
【 1 】การนับถอยหลังอย่างง่าย
การนับถอยหลังอย่างง่ายคือการลบเวลาที่กำหนดโดยการกำหนดช่วงเวลาทุก ๆ 1 วินาทีเพื่อให้เป็นไปตามข้อกำหนด
<div id = "mydiv"> <label for = "set"> <input type = "number" id = "set" step = "1" value = "0"> วินาที </label> <button id = "btn"> ยืนยัน </button> <button id = "รีเซ็ต"> รีเซ็ต </button> </div> function () {ถ้า (ตัวจับเวลา) return; set.setAttribute ('ปิดใช้งาน', 'ปิดใช้งาน'); timer = setInterval (ฟังก์ชัน () {ถ้า (number (set.value) === 0) {clearInterval (ตัวจับเวลา); timer = 0; 1;}, 1000);} </script>【 2 】การนับถอยหลังที่แม่นยำ
จากกลไกการทำงานของตัวจับเวลาเรารู้ว่าการเปลี่ยนเวลาทุก ๆ 1,000ms ไม่น่าเชื่อถือ แม่นยำยิ่งขึ้นควรใช้เพื่ออ้างถึงเวลาทำงานของระบบและการเปลี่ยนแปลงเวลาในการนับถอยหลังจะถูกซิงโครไนซ์กับการเปลี่ยนแปลงเวลาของระบบเพื่อให้ได้ผลของการนับถอยหลังที่แม่นยำ
[หมายเหตุ] ในส่วนนี้คุณต้องคำนวณเวลานาทีและครั้งที่สองผ่านการดำเนินการโมดูลัสและการแบ่ง รายละเอียดถูกย้ายมาที่นี่
<div id = "mydiv"> <label for = "hour"> <อินพุต type = "number" id = "ชั่วโมง" min = "0" max = "23" step = "1" value = "0" /> เวลา < /label> <label for = "นาที"> type = "number" id = "second" min = "0" max = "23" step = "1" value = "0"/> วินาที </label> <button id = "btn"> ยืนยัน </button> <button id = "รีเซ็ต"> รีเซ็ต </button> </div> this.value = 0; if (this.value> 23) this.value = 23; ถ้า (this.value <0) this.value = 0;} second.onchange = minute.onchange = function () {if (number (this.value)! 59; ถ้า (this.value <0) this.value = 0;} reset.onclick = function () {history.go ();} btn.onclick = function () {ถ้า (ตัวจับเวลา) กลับ; สำหรับ (var i = 0; i <3; i ++) {mydiv.getElementsByTagname ('input') [i] .setAttribute ('ปิดใช้งาน', 'ปิดใช้งาน');} // ค่าที่เก็บไว้ดิบ var setori = ชั่วโมง. value*3600 + minute.value*60 + second.value*1; SetNow; CancelanimationFrame (ตัวจับเวลา); timer = RequestAnimationFrame (ฟังก์ชั่น fn () {// ค่าเวลาของระบบปัจจุบัน var timenow = (วันที่ใหม่ ()). getTime (); // ความแตกต่างในเวลาของระบบเท่ากับความแตกต่างในเวลาที่กำหนด math.floor ((setnow%86400)/3600); minute.value = math.floor ((setnow%3600)/60); second.value = math.floor (setnow%60) timer = requestanimationframe (fn); ถ้า (setnow == 0) end '; สำหรับ (var i = 0; i <3; i ++) {mydiv.getElementByTagname (' อินพุต ') [i] .removeattribute (' ปิดใช้งาน ');} settimeout (ฟังก์ชัน () {btn.innerhtml =' ตกลง ';}, 1000)นาฬิกาจับเวลา
【 1 】นาฬิกาจับเวลาง่ายๆ
นาฬิกาจับเวลามีความคิดเช่นเดียวกับการนับถอยหลังและมันง่ายกว่าในการเปรียบเทียบ เพิ่ม 100ms ต่อช่วงเวลา
<div id = "mydiv"> <label for = "set"> <input id = "set" value = "0"> </label> <button id = "btn"> เริ่มต้น </button> <button id = "รีเซ็ต"> รีเซ็ต </button> </div> function () {ถ้า (con === 'ปิด') {set.setAttribute ('ปิดใช้งาน', 'ปิดใช้งาน'); con = 'on'; btn.innerhtml = 'หยุดชั่วคราว'; timer = setInterval (ฟังก์ชัน () {num+= 100; Math.floor (num%1000) /100; set.value = นาที + ':' + วินาที + ' }} </script>【 2 】นาฬิกาจับเวลาที่แม่นยำ
เช่นเดียวกับการนับถอยหลังมันไม่ถูกต้องที่จะใช้ช่วงเวลาของตัวจับเวลาเป็นข้อมูลอ้างอิงสำหรับการเปลี่ยนแปลงเวลา วิธีการที่แม่นยำยิ่งขึ้นควรใช้การเปลี่ยนแปลงเวลาของระบบเป็นข้อมูลอ้างอิงสำหรับการเปลี่ยนแปลงในนาฬิกาจับเวลา
<div id = "mydiv"> <label for = "set"> <input id = "set" value = "0"> </label> <button id = "btn"> เริ่มต้น </button> <button id = "รีเซ็ต"> รีเซ็ต </button> </div> = 0; // ล่าสุดเก็บจำนวนวินาทีที่หยุดชั่วคราว (คงที่) var สุดท้าย = 0; reset.onclick = function () {history.go ();} btn.onclick = function () {ถ้า (con === 'ปิด') จากจำนวนวินาทีที่ผ่าน ori = (วันที่ใหม่ ()). getTime () - สุดท้าย; timer = requestanimationFrame (ฟังก์ชั่น fn () {dis = (วันที่ใหม่ ()). getTime () - ori; cancelanimationFrame (ตัวจับเวลา); timer = requestanimationFrame (fn); var minute = math.floor (dis/1000/60); var second = math.floor (dis/1000) '.' + ms;}); con = 'ปิด'; last = dis;}} </script>นาฬิกาปลุก
นาฬิกาปลุกกำลังเพิ่มการตั้งค่าเวลาที่กำหนดไว้ในนาฬิกา การตั้งค่านาฬิกาปลุกต้องแปลงเวลาที่กำหนดเป็นจำนวนมิลลิวินาทีตั้งแต่วันที่ 1 มกราคม 1970 จากนั้นคำนวณความแตกต่างกับเวลาปัจจุบัน เมื่อเวลาปัจจุบันยังคงเพิ่มขึ้นเมื่อความแตกต่างคือ 0 นาฬิกาปลุกดังขึ้น
<div id = "mydiv"> </div> <div id = "con"> <label for = "hour"> <อินพุตประเภท = "number" id = "ชั่วโมง" min = "0" max = "23" ขั้นตอน = "1" value = "0"/> time </label> /> min </label> <label for = "second"> <input type = "number" id = "second" min = "0" max = "23" step = "1" value = "0"/> วินาที </label> <button id = "btn"> ยืนยัน </button> dis; mydiv.innerhtml = //d/d/d/d/d:/d/d/d/.exec( วันที่ (). toString ()) [0]; setInterval (ฟังก์ชั่น () {mydiv.innerhtml = //d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d }, 100); reset.onclick = function () {history.go ();} btn.onclick = function () {// ค่าดั้งเดิมที่เก็บไว้ var setori = ชั่วโมง. value*3600 + minute.value*60 + second.value*1; // ค่าดั้งเดิม +setori*1000; // ถ้าเวลาที่ตั้งไว้เร็วกว่าเวลาปัจจุบันการตั้งค่าไม่ถูกต้องถ้า (setms < +วันที่ใหม่ ()) {return;} สำหรับ (var i = 0; i <3; i ++) {con.getElementSByTagname ('อินพุต') [i] fn () {// เฟรมความแตกต่างระหว่างเวลาที่กำหนดและเวลาปัจจุบัน dis = math.ceil ((setms - (วันที่ใหม่ ()). getTime ())/1000); var showhour = math.floor ((DIS%86400)/3600); RequestanimationFrame (fn); show.innerhtml = 'ยังคงมีระยะทางจากเวลาที่กำหนด' + showhour + 'ชั่วโมง' + showminute + 'minus' + showsecond + 'วินาที'; // เมื่อความแตกต่างคือ 0 3; i ++) {con.getElementsByTagname ('อินพุต') [i] .RemoVeattribute ('ปิดใช้งาน');ในที่สุด
ในฐานะที่เป็นตัวจับเวลาสิ่งที่ลำบากที่สุดคือการจัดการตัวจับเวลา หากตัวจับเวลาเปิดใช้งานเท่านั้น แต่ไม่ปิดมันจะทำให้เอฟเฟกต์การซ้อนทับตัวจับเวลาทำให้การทำงานเร็วขึ้นและเร็วขึ้น ดังนั้นจึงเป็นนิสัยที่ดีที่จะปิดและเปิดใช้งานตัวจับเวลา
ด้านบนเป็นแอปพลิเคชันตัวจับเวลาที่สาม (นาฬิกา, การนับถอยหลัง, นาฬิกาจับเวลาและนาฬิกาปลุก) แนะนำให้คุณรู้จักโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!