กุญแจสำคัญในการใช้เอฟเฟกต์นี้คือการใช้วัตถุวันที่และ settimeout
มีสามตัวอย่างทั้งหมด โครงสร้าง HTML มีดังนี้ดังนั้นจึงไม่มีการเพิ่มสไตล์ CSS
<body> เวลาปัจจุบัน: <p id = "p1"> </p> การสอบเข้าวิทยาลัยนับถอยหลัง: <p id = "p2"> </p> เวลาที่ จำกัด การเร่งด่วน: <p id = "p3"> </p> </body>
ส่วนใหญ่เข้าใจการใช้งาน JavaScript
window.onload = function () {var p1 = document.getElementById ("p1"), p2 = document.getElementById ("p2"); p3 = document.getElementById ("P3"); Showtime1 (); Showtime2 (); showtime3 ();}1. การใช้งานการแสดงเวลาปัจจุบันอย่างง่าย
ฟังก์ชั่น showtime1 () {var nowdate = new date (); // สร้างวัตถุวันที่ตอนนี้เพื่อให้ได้เวลาปัจจุบัน var year = nowdate.getlyear (), // รับเดือน = nowdate.getMonth ()+1, // รับเดือน, getMonth () ได้รับ 0-11 สัปดาห์ = ["วันอาทิตย์", "วันจันทร์", "วันอังคาร", "วันพฤหัสบดี", "วันศุกร์", "วันเสาร์", h = nowdate.getHours (), m = nowdate.getMinutes (), s = nowdate.getSeconds (), h = เวลาตรวจสอบเวลาตรวจสอบ p1.innerhtml = ปี+"ปี"+เดือน+"เดือน"+วันที่+"วัน"+สัปดาห์ [วัน]+h+":"+m+":"+s; settimeout (showtime1, 1000); // ทำซ้ำฟังก์ชันเอง}ฟังก์ชั่น ตรวจสอบ เวลาดังนี้:
ฟังก์ชั่นตรวจสอบเวลา (i) {ถ้า (i <10) {i = "0"+i; } return i;}เนื่องจากรูปแบบเวลาที่คุณเห็นโดยทั่วไปคือ 00:00:01 และ gethours, getminutes, getseconds ได้รับรูปแบบ 0 ถึง 9 ไม่ใช่ 00 ถึง 09 ดังนั้นในกระบวนการเปลี่ยนจาก 9 เป็น 10 มีหลักเดียวที่กลายเป็นสองหลัก
ตัวอย่างเช่น 23:59:59 ควรเปลี่ยนเป็น 00:00:00 ในวินาทีถัดไป หากฟังก์ชั่นตรวจสอบเวลาไม่ได้ใช้สำหรับการประมวลผลมันจะเปลี่ยนเป็น 0: 0: 0 ซึ่งจะทำให้รูปแบบไม่สอดคล้องกันเล็กน้อยและยังมีการกลายพันธุ์ที่มองเห็นได้ของการเพิ่มขึ้นหรือลดจำนวนคำ (สองตัวอย่างถัดไปไม่ใช้ฟังก์ชั่นตรวจสอบเวลาเพื่อประมวลผลเวลานาทีและวินาที !!!)
2. การนับถอยหลังของการสอบเข้าวิทยาลัยได้รับการรับรู้
ฟังก์ชั่น showtime2 () {var nowtime = new date (), // รับเวลา endtime = วันที่ใหม่ ("2017/6/6"); // กำหนดเวลาสิ้นสุด var lefttime = endtime.getTime ()-NOWTIME.TIME (), // มิลลิวินาที) leftth = math.floor (lefttime/(1,000*60*60)%24), // จำนวนชั่วโมงซ้าย = math.floor (lefttime/(1000*60)%60), // จำนวนนาทีซ้าย = math.floor (ซ้าย/1000%60); // จำนวนวินาที p2.innerhtml = ซ้าย Settimeout (Showtime2, 1,000); -ในหมู่พวกเขาประเด็นที่สำคัญกว่า:
①กำหนดเวลาสิ้นสุดเวลาสิ้นสุด = วันที่ใหม่ ("2017/6/6") คือการใช้วัตถุวันที่ใหม่กับพารามิเตอร์และวันที่ใหม่โดยตรง () คือการรับเวลาปัจจุบันโดยตรง
②วิธีการ getTime () ได้รับจำนวนมิลลิวินาทีตั้งแต่วันที่ 1 มกราคม 1970
③การคำนวณของวันชั่วโมงนาทีและวินาที, % (การทำงานของโมดูโล) รับมิลลิวินาที (มิลลิวินาทีที่เหลือ) จากเวลาสิ้นสุดหารด้วย 1,000 เพื่อให้ได้วินาทีที่เหลือแบ่ง 60 เพื่อรับนาทีที่เหลือและหารด้วย 60 เพื่อให้ได้ชั่วโมงที่เหลือ หารด้วย 24 เพื่อให้ได้วันที่เหลือ วินาทีที่เหลืออยู่ทางซ้าย/1000 โมดูล 60 ได้รับจำนวนวินาทีที่เหลือเวลาเหลือทางซ้าย/(1,000*60) โมดูล 60 ได้รับจำนวนนาทีที่เหลือชั่วโมงซ้าย/(1,000*60*60) โมดูล 24 ได้รับจำนวนชั่วโมง
3. ผลการนับถอยหลังของการซื้อเร่งด่วนที่ จำกัด
ฟังก์ชั่น showtime3 () {var nowtime = new date (), endtime = วันที่ใหม่ ("2020/1/1,00: 00: 00"), // ตั้งเวลาสิ้นสุดเวลาซ้าย = parseInt ((endtime.time.getTime ()-ตอนนี้ getTime ()/1000), d = math.floor m = math.floor (lefttime/60%60), s = math.floor (lefttime%60); p3.innerhtml = d+"วัน"+h+"ชั่วโมง"+m+"นาที"+s+"วินาที"; settimeout (showtime3, 1,000); -ในความเป็นจริงมันคล้ายกับตัวอย่างที่สองความแตกต่างคือเวลาสิ้นสุดถูกตั้งค่าวันที่ใหม่ ("2020/1/1,00: 00: 00")))
ด้านล่างเป็นรหัสที่สมบูรณ์
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> การนับถอยหลัง </title> <script type = "text/javaScript"> ฟังก์ชั่น checktime (i) {if (i <10) {i = "0"+i; } return i; } window.onload = function () {var p1 = document.getElementById ("p1"), p2 = document.getElementById ("p2"); Showtime1 (); Showtime2 (); Showtime3 (); } function showtime1 () {var nowdate = new date (); var year = nowdate.getlyear (), // year month = nowdate.getMonth ()+1, // วันที่ = nowdate.getDate (), // วันสัปดาห์ = ["วันอาทิตย์", "วันจันทร์", "วันอังคาร", "วันพฤหัสบดี", "วันศุกร์", "วันเสาร์", วัน = วันที่ m = nowdate.getMinutes (), m = checktime (m), s = nowdate.getSeconds (), s = เวลาตรวจสอบ (s); p1.innerhtml = ปี+"ปี"+เดือน+"เดือน"+วันที่+"วัน"+สัปดาห์ [วัน]+h+":"+m+":"+s; settimeout (showtime1, 1,000); } function showtime2 () {var nowtime = new Date (), endtime = วันที่ใหม่ ("2017/6/6"); var lefttime = endtime.getTime ()-ตอนนี้ getTime (), ซ้าย = math.floor (lefttime/(1,000*60*60*24)), ซ้าย = math.floor (lefttime/(1,000*60*60*60)%24), ซ้าย = math.floor (ซ้าย/(1000*60) p2.innerhtml = ซ้าย+"วัน"+lefth+":"+ซ้าย+":"+ซ้าย; Settimeout (Showtime2, 1,000); } function showtime3 () {var nowtime = new date (), endtime = วันที่ใหม่ ("2020/1/1,00: 00: 00"), lefttime = parseint ((endtime.gettime ()-nowtime.time ())/1000), d = math.floor (ซ้าย/60*240*24) m = math.floor (lefttime/60%60), s = math.floor (lefttime%60); p3.innerhtml = d+"วัน"+h+"ชั่วโมง"+m+"นาที"+s+"วินาที"; settimeout (showtime3, 1,000); } </script> </head> <body> เวลาปัจจุบัน: <p id = "p1"> </p> การสอบเข้าวิทยาลัยนับถอยหลัง: <p id = "p2"> </p> เวลาเร่งด่วน: <p id = "p3"> </p> </body> </html>การใช้งานเอฟเฟกต์พิเศษ JavaScript ด้านบน - ตัวอย่างง่ายๆของเวลาและเอฟเฟกต์การนับถอยหลังเป็นเนื้อหาทั้งหมดที่ฉันได้แชร์กับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น