ساعة
أسهل طريقة لإنشاء ساعة هي استخدام طريقة exec () للتعبير العادي لاعتراض الجزء الزمني لسلسلة كائن الوقت وتحديثه باستخدام مؤقت.
<div id = "mydiv"> </viv> <script> mydiv.innerhtml = //d/d/d/d/d/d/d/.exec ( DATE (). TOSTRING ()) [0] ؛
العد التنازلي
【1】 العد التنازلي البسيط
العد التنازلي البسيط هو طرح الوقت المحدد عن طريق تعيين الفاصل الزمني كل واحد لتلبية المتطلبات
<div id = "mydiv"> <label for = "set"> <input type = "number" id = "set" step = "1" value = "0"> seconds </bably> <button id = "btn"> تأكيد </button> <button> function () {if (timer) return ؛ set.setAttribute ('upabled' ، 'upabled') ؛ timer = setInterval (function () {if (number (set.value) === 0) {clearinterval (timer) ؛ timer = 0 ؛ set.removeattribute ('up instabled') ؛ return ؛} set. 1 ؛} ، 1000) ؛} </script>【2】 العد التنازلي الدقيق
استنادًا إلى آلية التشغيل في المؤقت ، نعلم أن تغيير الوقت كل 1000 ملض غير موثوق به. بتعبير أدق ، يجب استخدامه للإشارة إلى وقت تشغيل النظام ، ويتم مزامنة الوقت في العد التنازلي مع التغييرات الزمنية للنظام لتحقيق تأثير العد التنازلي الدقيق.
[ملاحظة] في هذا الجزء ، تحتاج إلى حساب الوقت ، الدقيقة والثانية من خلال عمليات المعامل والتقسيم. يتم نقل التفاصيل هنا.
<div id = "mydiv"> <label for = "hour"> <input type = "number" id = "hour" min = "0" max = "23" step = "1 type = "number" id = "second" min = "0" max = "23" step = "1" value = "0"/> second </bally> <button id = "btn"> تأكيد </button> <button id = "reset"> reset </this. this.value = 0 ؛ if (this.value> 23) هذا. 59 ؛ if (this.value <0) this.value = 0 ؛} reset.onclick = function () {history.go () ؛} btn.onclick = function () {if (timer) return ؛ for (var i = 0 ؛ i <3 ؛ i ++) {mydiv.getElementsByTagName ('input') [i] .SetAttribute ('upabled' ، 'upabled') ؛} // value vare var setori = hour.value*3600 + minute.value*60 + second.value*1 ؛ setNow ؛ CancelAnimationFrame (timer) ؛ timer = requestAnimationFrame (function fn () {// قيمة وقت النظام الحالية var timenow = (new date ()). math.floor ((setNow ٪ 86400)/3600) ؛ minute.value = math.floor ((setNow ٪ 3600)/60) ؛ second.value = math.floor (setNow ٪ 60) ؛ timer = requerAnimationFrame (fn) ؛ End '؛ for (var i = 0 ؛ i <3 ؛ i ++) {mydiv.getElementsByTagName (' input ') [i] .RemoVeatTribute (' upabled ') ؛} setTimeOut (function () {btn.innerhtml =' ok '؛} ، 1000)}})})ساعة توقيت
【1】 ساعة توقيت بسيطة
تتميز ساعة التوقيت بنفس فكرة العد التنازلي ، وهي أبسط بالمقارنة. أضف 100 مللي ثانية لكل فاصل
<div id = "mydiv"> <label for = "set"> <input id = "set" value = "0"> </bally> <button id = "btn"> ابدأ </button> <button id = "reset"> إعادة تعيين </button> </sistr> <script> var con = 'var' ؛ var num = 0 ؛ reset.onclick = function () {if (con === 'Off') {set.setAttribute ('upabled' ، 'upabled') ؛ con = 'on' ؛ btn.innerhtml = 'pause' ؛ timer = setInterval (function () {num+= 100 ؛ var minate. Math.Floor (num ٪ 1000) /100 ؛ set.value = Minute + ':' + Second + '. }} </script>【2】 ساعة توقيت دقيقة
على غرار العد التنازلي ، من غير الدقيق استخدام الفاصل الزمني للوقت كمرجع لتباين الوقت. يجب أن يكون النهج الأكثر دقة هو استخدام تغيير وقت النظام كمرجع للتغييرات في ساعة التوقيت.
<div id = "mydiv"> <label for = "set"> <input id = "set" value = "0"> </balled> <button id = "btn"> ابدأ </button> <button id = "reset"> إعادة تعيين </button> <////div> var timer ؛ var con = "؛ dis = 0 ؛ // Last يخزن عدد الثواني في الإيقاف المؤقت (ثابت) var last = 0 ؛ reset.onclick = function () {history.go () ؛} btn.onclick = function () وقت عدد الثواني التي مرت ori = (تاريخ جديد ()). getTime () - الماضي ؛ timer = requestAnimationFrame (function fn () {dis = (date date ()). getTime () - ori ؛ cancelAnimationFrame (timer) ؛ timer = requestAnimationFrame (fn) ؛ var minate = math.floor (dis/1000/60) ؛ var second = math.floor (dis/1000) ؛ var ms. Second + '. con = 'Off' ؛ last = dis ؛}} </script>منبه
يعمل المنبه في الواقع على إضافة إعداد زمني محدد مسبقًا على مدار الساعة. يتطلب إعداد المنبه تحويل الوقت المحدد إلى عدد ميلي ثانية من 1 يناير 1970 ، ثم يتم حساب الفرق مع الوقت الحالي. مع مرور الوقت الحالي ، عندما يكون الفرق هو 0 ، حلقات المنبه
<div id = "mydiv"> </viv> <div id = "con"> <label for = "hour"> <input type = "number" id = "hour" min = "0" max = "23" step = "1 /> min </blys> <label for = "second"> <input type = "number" id = "second" min = "0" max = "23" step = "1" value = "0"/> second </blize> <button id = "btn"> تأكيد </button> <button id = "reset"> reset </dev> </div> dis ؛ mydiv.innerhtml = //d/d:/d/d/d/d/d/d/.exec التاريخ (). } ، 100) ؛ reset.onclick = function () {history.go () ؛} btn.onclick = function () {// القيمة الأصلية var var setori = hour.value*3600 + minute. setori*1000 ؛ // إذا كان الوقت المحدد قبل الوقت الحالي ، فإن الإعداد غير صالح إذا (setMs <+new date ()) {return ؛} لـ (var i = 0 ؛ i <3 ؛ i ++) fn () {// تأطير الفرق بين الوقت المحدد والوقت الحالي dis = math.ceil ((setms - (date date ()). requestAnimationFrame (fn) ؛ show.innerhtml = 'لا يزال هناك مسافة من الوقت المحدد' + showhour + 'hour' + showminute + 'minus' + showsecond + 'seconds' ؛ <3 ؛في النهاية
كموقت ، الشيء الأكثر إثارة للقلق هو إدارة المؤقت. إذا تم تشغيل المؤقت فقط ولكن لم يتم إيقاف تشغيله ، فسوف يتسبب ذلك في تأثير تراكب الموقت ، مما يجعل العملية أسرع وأسرع. لذلك ، من الجيد إيقاف تشغيل الموقت ثم تمكينه.
ما ورد أعلاه هو تطبيق الموقت الثالث (الساعة ، العد التنازلي ، ساعة التوقيت والإنذار) المقدمة لك من قبل المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!