jam
Cara termudah untuk membuat jam adalah dengan menggunakan metode exec () dari ekspresi reguler untuk mencegat bagian waktu dari string objek waktu dan menyegarkannya dengan timer.
<Div id = "myDiv"> </div> <script> myDiv.innerHtml = //d/d:/d/d:/d/d/.exec(new Date (). ToString ()) [0]; setInterval (function () {myDiv.innerHTML = //d:d:d:d:d/div.div.innerhtml =//d: Date (). ToString ()) [0];}, 500); </script>Countdown
【1】 Countdown sederhana
Countdown sederhana adalah untuk mengurangi waktu yang ditentukan dengan menetapkan interval setiap 1 detik untuk memenuhi persyaratan
<Div id = "myDiv"> <label for = "set"> <input type = "number" id = "set" step = "1" value = "0"> detik </label> <tombol id = "btn"> konfirmasi </buton> <tombol = "reset"> reset </buton> </div> <script> var var timer; reset. function () {if (timer) return; set.setAttribute ('disabled', 'disabled'); timer = setInterval (function () {if (number (set.Value) === 0) {clearInterval (timer); timer = 0; set.removeattribute ('tidak dapat dikembalikan. 1;}, 1000);} </script>【2】 hitungan mundur yang akurat
Berdasarkan mekanisme operasi timer, kita tahu bahwa mengubah waktu setiap 1000ms tidak dapat diandalkan. Lebih tepatnya, harus digunakan untuk merujuk pada waktu berjalan sistem, dan perubahan waktu dalam hitungan mundur disinkronkan dengan perubahan waktu sistem untuk mencapai efek penghitungan yang akurat.
[Catatan] Di bagian ini, Anda perlu menghitung operasi waktu, menit dan kedua melalui modulus dan divisi. Detailnya dipindahkan ke sini.
<Div id = "myDiv"> <label for = "hour"> <input type = "number" id = "hour" min = "0" max = "23" step = "1" value = "0" /> waktu < /label> <label for = "menit"> <input type = "number" "Minute" Min = "0" "MAX =" 59 "NILA type = "number" id = "kedua" min = "0" max = "23" step = "1" value = "0"/> kedua </label> <tombol id = "btn"> konfirmasi </button> <tombol id = "reset"> reset </buton> </div> <script> var timer; // input batas jam. this.value = 0; if (this.value> 23) this.value = 23; if (this.value <0) this.value = 0;} Second.onChange = Minute.onChange = function () {if (ifer (this.value)! == Number (this.Value)) ini.value = 0; 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 ('dinonaktifkan', 'dinonaktifkan');} // nilai tersimpan var setori = hour.value*3600 Minute. setNow; cancelanimationFrame (timer); timer = requestAnimationFrame (function fn () {// nilai waktu sistem saat ini var timeNow = (tanggal baru ()). getTime (); // perbedaan waktu sistem sama dengan perbedaan waktu yang ditetapkan untuk mendapatkan waktu normal/setRow = setori - math.floor ((timenow -waktu untuk mendapatkan waktu normal/setRow = setori. Math.floor ((setNow%86400)/3600); Minute.Value = Math.floor ((SetNow%3600)/60); Second.Value = Math.floor (setNow%60); timer = requestanimationFrame (fn); if (setNow == 0) {cancelanimationFrame (tentang); end '; for (var i = 0; i <3; i ++) {myDiv.getElementsbyTagname (' input ') [i] .removeattribute (' disabled ');} setTimeout (function () {btn.innerhtml =' OK ';}, 1000)}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}) {btn)))))))))))Stopwatch
【1】 stopwatch sederhana
Stopwatch memiliki ide yang sama dengan Countdown, dan lebih sederhana dibandingkan. Tambahkan 100ms per interval
<Div id = "myDiv"> <label for = "set"> <input id = "set" value = "0"> </label> <button id = "btn"> mulai </button> <tombol id = "reset"> reset </buton> </div> <cript> var timer; var con = 'off'; var num = 0; reset.onclick = script> var timer; var con = 'off'; var num = 0; reset.onclick = script> var timer; var con = 'off'; var num = 0; reset.onclick = script> var timer; var con = 'off'; var num = 0; reset. function () {if (con === 'off') {set.setAttribute ('disabled', 'disabled'); con = 'on'; btn.innerHtml = 'jeda'; timer = setInterval (function () {num+= 100; var menit = math.floor (num/1000/60); Math.floor (NUM%1000) /100;set.Value = Minute + ':' + Second + '. }} </script>【2】 Stopwatch yang akurat
Mirip dengan Countdown, tidak akurat untuk menggunakan interval waktu timer sebagai referensi untuk variasi waktu. Pendekatan yang lebih tepat adalah menggunakan perubahan waktu sistem sebagai referensi untuk perubahan stopwatch.
<Div id = "myDiv"> <label for = "set"> <input id = "set" value = "0"> </label> <tombol id = "btn"> Mulai </button> <tombol id = "reset"> ORI ini menunjukkan (/Div> <skrip> variasi variasi; variasi variasi; variasi variasi; variasi variasi; variasi variasi; variasi variasi; variasi variasi; variasi variasi; variasi variasi; variasi vari; dis = 0; // Last menyimpan jumlah detik pada jeda (statis) var terakhir = 0; reset.onClick = function () {history.go ();} btn.onClick = function () {if (con === 'off') {set.setattribute ('disabled', 'disabled'); con = 'piNA,'in'; waktu sistem jumlah detik yang telah berlalu ori = (tanggal baru ()). gettime () - terakhir; timer = requestAnimationFrame (fungsi fn () {dis = (new date ()). getTime () - ori; cancelanimationFrame (timer); timer = requestanimationframe (fn); var menit = math.floor (dis/1000/60); var detik = math.floor (dis/1000); var ms = 1000/60); var detik = math.floor (dis/1000); var ms = 1000/60); DISPERS = MATH.FLOOR (DIS/DIS/1000); var ms = 1000); kedua + '. con = 'off'; last = dis;}} </script>Jam alarm
Jam alarm sebenarnya menambahkan pengaturan waktu yang telah ditentukan ke jam. Pengaturan jam alarm mengharuskan mengubah waktu yang ditentukan menjadi jumlah milidetik dari 1 Januari 1970, dan kemudian perbedaan dengan waktu saat ini dihitung. Saat waktu saat ini terus meningkat, ketika perbedaannya adalah 0, jam alarm berdering
<Div id = "myDiv"> </div> <div id = "con"> <label for = "hour"> <input type = "number" id = "hour" min = "0" max = "23" Step = "1" value = "0"/> waktu </label> <label untuk = "menit"> <input type = "angka" ID = "Minut" Minut = "0 Min" 0 /> min </label> <label untuk = "kedua"> <input type = "number" id = "kedua" min = "0" max = "23" step = "1" value = "0"/> kedua </label> <tombol id = "btn"> Konfirmasi </tombol> <tombol ID = "reset"> reset </tombol </tombol </dev> </buttoning = "Tombol/TOUTVET; dis; mydiv.innerhtml = //d/d:/d/d:/d/d/d/.exec(new Date (). tostring ()) [0]; setInterval (function () {mydiv.innerhtml = //d:). }, 100); reset.onClick = function () {history.go ();} btn.onClick = function () {// nilai tersimpan asli var setori = jam. setOri*1000;//If the set time is earlier than the current time, the setting is invalid if(setMs < +new Date()){return;}for(var i = 0; i < 3; i++){con.getElementsByTagName('input')[i].setAttribute('disabled','disabled');}cancelAnimationFrame(timer);timer = RequestanimationFrame (function fn () {// bingkai perbedaan antara waktu yang ditetapkan dan waktu saat ini dis = math.ceil ((setms - (tanggal baru ()). getTime ())/1000); var showhour = math.floor ((Dis%86400)/3600); var showminute = math.floor (Dis%86400)/3600); var showminute = math.floor (Dis%86400)/3600); var showminute = math.floor (Dis%86400)/3600); var showminute = math.floor (Dis%86400)/3600); var showminute = math.floor (Dis%86400)//3600); var showminute = math.floor Math.floor (Dis%60); timer = requestanimationFrame (fn); show.innerHtml = 'Masih ada jarak dari waktu yang dijadwalkan' + showhour + 'jam' + showminute + 'minus' + showond + 'detik'; // ketika perbedaan adalah 0, waktu tercapai jika (dis == 0) {detik '; 'Time is Up'; for (var i = 0; i <3; i ++) {con.geteLementsbyTagname ('input') [i] .removeattribute ('disabled');} timer = setTimeout (function () {btn.innerHtml = 'ok';}, 1000)}}} {btn.innerHtml = 'OK';akhirnya
Sebagai pengatur waktu, hal yang paling merepotkan adalah manajemen pengatur waktu. Jika timer hanya dihidupkan tetapi tidak dimatikan, itu akan menyebabkan efek superposisi timer, membuat operasi lebih cepat dan lebih cepat. Jadi, itu adalah kebiasaan yang baik untuk dimatikan dan kemudian mengaktifkan timer.
Di atas adalah aplikasi timer ketiga (jam, hitungan mundur, stopwatch dan jam alarm) yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!