مفتاح تنفيذ هذا التأثير هو استخدام كائنات التاريخ و 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 () ؛ // إنشاء كائن التاريخ nowdate للحصول على الوقت الحالي var var = nowdate.getlyear () ، // get year month = nowdate.getmonth ()+1 ، // get month ، getMonth () get-11 ، وتحتاج إلى إضافة 1 تاريخ = الآن. Week = ["Sunday" ، "Monday" ، "Tuesday" ، "Frayder" ، "Friday" ، "Saturday" ، H = Nowdate.gethours () ، M = Nowdate.getMinutes () ، s = nowdate.getSeconds () ، h = checktime (h) ، // checktime يتم استخدام وقت التنسيق ، الدقيقة ، ثانية m = m) p1.innerhtml = year+"year"+month+"month"+date+"day"+week [day]+h+":"+m+":"+s ؛ setTimeout (showtime1 ، 1000) ؛ // كرر الوظيفة نفسها}وظيفة CheckTime هي كما يلي:
وظيفة checkTime (i) {if (i <10) {i = "0"+i ؛ } إرجاع i ؛}نظرًا لأن تنسيق الوقت الذي تراه عادةً ما يكون 00:00:01 ، و gethours ، getMinutes ، getSeconds تحصل على تنسيقات من 0 إلى 9 ، وليس من 00 إلى 09. لذلك ، في عملية التغيير من 9 إلى 10 ، هناك رقم واحد يصبح رقم مزدوج ، ويصبح أيضًا 0 عندما تتراوح التهمة 59 إلى 0 ثانية أو 59 دقيقة إلى 0 دقيقة أو 23.
على سبيل المثال ، يجب أن يتغير 23:59:59 إلى 00:00:00 في الثانية التالية ؛ إذا لم يتم استخدام وظيفة CheckTime للمعالجة ، فستتغير إلى 0: 0: 0 ، مما سيجعل التنسيق غير متسق بعض الشيء ، وهناك أيضًا طفرات مرئية لزيادة أو انخفاض عدد الكلمات. (لا يستخدم المثالان التاليان وظيفة CheckTime لمعالجة الوقت ، الدقيقة والثانية !!!)
2. يتحقق تأثير العد التنازلي لامتحان القبول في الكلية
الوظيفة showtime2 () {var nowtime = new date () ، // احصل على الوقت الحالي للوقت = تاريخ جديد ("2017/6/6") ؛ // تحديد وقت الانتهاء var var lefttime = endtime.gettime ()-nowtime.getTime () ، // millisecond من time time leftd = math.floor (lefttime/(1000*60* اليسار = Math.floor (LeftTime/(1000*60*60) ٪ 24) ، // عدد الساعات LeftM = Math.floor (Left Time/(1000*60) 60) ، // عدد الدقائق اليسار = Math.floor (LeftTime/1000 ٪ 60) ؛ setTimeout (showtime2 ، 1000) ؛ }من بينها ، النقاط الأكثر أهمية:
① تحديد وقت الانتهاء من وقت الانتهاء = تاريخ جديد ("2017/6/6") هو استخدام كائن تاريخ جديد مع معلمات ، والموعد الجديد مباشرة () هو الحصول على الوقت الحالي مباشرة ؛
② طريقة GetTime () تحصل على عدد ميلي ثانية من 1 يناير 1970.
③ حساب الأيام ، الساعات ، الدقائق والثواني ، ٪ (تشغيل modulo). احصل على المللي ثانية (الباقين المتبقية) من الوقت النهائي ، وقسم 1000 على 1000 للحصول على الثواني المتبقية ، وقم بتقسيمها على 60 للحصول على الدقائق المتبقية ، وتقسيمها على 60 للحصول على الساعات المتبقية. مقسوما على 24 للحصول على الأيام المتبقية. الثواني المتبقية في الوقت المناسب/1000 الوحدة 60 تحصل على عدد الثواني ، والدقائق المتبقية في الوقت المناسب/(1000*60) الوحدة النمطية 60 تحصل على عدد الدقائق ، واليسوع المتبقية في الوقت المناسب/(1000*60*60) الوحدة النمطية 24 تحصل على عدد من الساعات.
3. تأثير العد التنازلي لشراء الاندفاع المحدود الوقت
الوظيفة showtime3 () {var nowtime = new date () ، endtime = تاريخ جديد ("2020/1/1،00: 00: 00") ، // قم بتعيين وقت الانتهاء اليسار = parseint ((endtime.getTime ()-nowtime.getTime ())/1000) ، d = math.floor (lefttime/(60*24) M = Math.floor (LeftTime/60 ٪ 60) ، s = Math.Floor (LeftTime ٪ 60) ؛ p3.innerhtml = d+"day"+h+"hour"+m+"minute"+s+"second" ؛ setTimeout (showtime3 ، 1000) ؛ }في الواقع ، يشبه المثال الثاني ، والفرق هو أن وقت الانتهاء يتم تعيين تاريخ جديد ("2020/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 ؛ } العودة أنا ؛ } window.onload = function () {var p1 = document.getElementById ("p1") ، p2 = document.getElementById ("p2") ؛ Showtime1 () ؛ Showtime2 () ؛ Showtime3 () ؛ } وظيفة showtime1 () {var nowdate = new date () ؛ var year = nowdate.getlyear () ، // month month = nowdate.getMonth ()+1 ، // month date = nowdate.getDate () ، // day week = ["Sunday" ، "Monday" ، "Tuesday" ، "Dealuar m = nowdate.getMinutes () ، m = checktime (m) ، s = nowdate.getSeconds () ، s = checkTime (s) ؛ p1.innerhtml = year+"year"+month+"month"+date+"day"+week [day]+h+":"+m+":"+s ؛ setTimeout (showtime1 ، 1000) ؛ } وظيفة showtime2 () {var nowtime = new date () ، endtime = تاريخ جديد ("2017/6/6") ؛ var lefttime = endtime.getTime ()-nowtime.gettime () ، leftd = math.floor (lefttime/(1000*60*60*24)) ، يسار = Math.Floor (LeftTime/(1000*60*60*60) ٪ 24) ، LeftM = Math.floor (Left Time/(1000*60) ٪) ، يسار = Math.Floor (Left. p2.innerhtml = Leftd+"Day"+Lefth+":"+Leftm+":"+Lefts ؛ setTimeout (showtime2 ، 1000) ؛ } وظيفة showtime3 () {var nowtime = new date () ، endtime = تاريخ جديد ("2020/1،00: 00: 00") ، lefttime = parseint ((endtime.getTime () nowtime.getTime ())/1000) ، d = math.floor (lefttime/(60*24)) M = Math.floor (LeftTime/60 ٪ 60) ، s = Math.Floor (LeftTime ٪ 60) ؛ p3.innerhtml = d+"day"+h+"hour"+m+"minute"+s+"seconds" ؛ setTimeout (showtime3 ، 1000) ؛ } </script> </head> <body> الوقت الحالي: <p id = "p1"> </p> العد التنازلي لامتحان مدخل الكلية: <p id = "p2"> </p> اندفاع الوقت المحدود: <p id = "p3"> </p> </pody> </html>تطبيق المؤثرات الخاصة JavaScript أعلاه - مثال بسيط على الوقت الحالي وتأثير العد التنازلي هو كل المحتوى الذي شاركته معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.