Dalam posting blog ini, saya membagikan kode Javascript Sederhana Jam Hitung Mundur dengan hari, Jam, Menit, dan Detik. Yang sering digunakan untuk penawaran atau untuk hitungan mundur ulang tahun. Jadi ayo mulai
indeks. html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Create a Countdown Clock</title> <link rel="stylesheet" href="style.css"> </head> <body style="background-color: lightcyan;"> <div class="container"> <h1 id="headline">Countdown to end offer:</h1> <div id="countdown"> <ul> <li><span id="days"></span>days</li> <li><span id="hours"></span>Hours</li> <li><span id="minutes"></span>Minutes</li> <li><span id="seconds"></span>Seconds</li> </ul> </div> <div id="content" class="emoji"> <span>😔</span> <span>😢</span> <span>😔</span> </div> </div> <script src="script.js"></script> </body> </html>
naskah. js
(function () { const second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24; let offer= "Sep 05, 2021 00:00:00", countDown = new Date(offer).getTime(), x = setInterval(function() { let now = new Date().getTime(), distance = countDown - now; document.getElementById("days").innerText = Math.floor(distance / (day)), document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)), document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)), document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second); //do something later when date is reached if (distance < 0) { let headline = document.getElementById("headline"), countdown = document.getElementById("countdown"), content = document.getElementById("content"); headline.innerText = "Ohhh no! Offer has ended"; countdown.style.display = "none"; content.style.display = "block"; clearInterval(x); } //seconds }, 0) }()); _
Anda dapat mengubah waktu di nomor baris 7 biarkan penawaran = “05 Sep 2021 00. 00. 00”,
gaya. css
/* general styling */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; margin: 0; } body { align-items: center; display: flex; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } .container { color: #333; margin: 0 auto; text-align: center; } h1 { font-weight: normal; letter-spacing: .125rem; text-transform: uppercase; } li { display: inline-block; font-size: 1.5em; list-style-type: none; padding: 1em; text-transform: uppercase; } li span { display: block; font-size: 4.5rem; } .emoji { display: none; padding: 1rem; } .emoji span { font-size: 4rem; padding: 0 .5rem; } @media all and (max-width: 768px) { h1 { font-size: 1.5rem; } li { font-size: 1.125rem; padding: .75rem; } li span { font-size: 3.375rem; } }
Setelah selesai hitungan mundur
Brij
Brijpal Sharma adalah pengembang web dengan hasrat untuk menulis tutorial teknologi. Pelajari JavaScript dan teknologi pengembangan web lainnya
Dalam tutorial ini kami akan menunjukkan kepada Anda solusi penghitung waktu mundur JavaScript jam menit detik, seperti yang kita tahu penghitung waktu mundur memperbarui hitungan mundur untuk waktu tertentu, di sini kami menampilkan jam, menit, dan detik dengan menggunakan objek tanggal dengan metode getHours() ini, getMinutes
Itu akan diperbarui untuk setiap detik dengan menggunakan metode setInterval()
Panduan Langkah Demi Langkah Pada Penghitung Waktu Mundur JavaScript Jam Menit Detik. -
Seperti yang kita lihat di atas dengan bantuan metode tersebut kita mendapatkan hasil penghitung waktu mundur dalam jam, menit dan detik
Metode setInterval() yang ditawarkan pada antarmuka jendela dan pekerja, berulang kali memanggil fungsi atau mengeksekusi cuplikan kode dengan penundaan waktu tetap di antara setiap panggilan
Metode ini mengembalikan ID interval yang mengidentifikasi interval secara unik, sehingga Anda dapat menghapusnya nanti dengan memanggil metode clearInterval()
Metode getHours(), getMinutes, dan getSeconds() digunakan untuk mengumpulkan waktu saat ini secara akurat
- yang menginstruksikan browser web tentang versi file HTML apa yang ditulis dan tidak memiliki tag penutup
- The tag is used to indicate the beginning of HTML document.
- As above shown tag is contain information about webpage and external file links are declared here. tag is used for set the webpage title.
- Both and tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Di sini kami mendefinisikan tag h3 untuk judul tampilan 'TIMER COUNTDOWN' pada halaman web kemudian kami mendefinisikan tag div dengan id 'demo' untuk menambahkan timer hasil pada halaman web dan tombol 'Mulai' ditentukan untuk memulai timer ketika pengguna mengkliknya
- Dalam file skrip kami mendefinisikan fungsi fun() di dalamnya kami menggunakan metode setInterval() dengan waktu tunggu sebagai '1 detik' sehingga dalam metode ini apa yang telah kami lakukan akan diperbarui setiap 1 detik
- Di sini kami membuat objek tanggal 'tanggal' dengan menggunakan ini kami mengumpulkan jam, menit, dan detik saat ini dan disimpan pada variabel masing-masing 'jam, m, s'
- Akhirnya kami menambahkan hasil dalam format pengatur waktu 'HH. MM. SS' pada elemen div oleh id 'demo' untuk menampilkan penghitung waktu di halaman web
- Kedua tag , ditutup masing-masing. Tag menandakan akhir dari isi, Kemudian tag menandakan akhir dari dokumen HTML
Kesimpulan. -
Kesimpulannya sekarang kita dapat mengetahui cara membuat penghitung waktu mundur di halaman web menggunakan javascript
Ketika kita menjalankan program ini di browser kita dapat melihat judul program ini dengan tombol mulai ketika pengguna mengkliknya waktu saat ini diambil dari server dan ditampilkan di halaman web kemudian untuk setiap detik dalam hasil penghitung waktu diperbarui kita dapat melihat dengan jelas
Jika Anda hanya membutuhkan jam atau menit atau detik maka lewati hal lain dan tampilkan apa yang Anda butuhkan sesuai keinginan Anda
Saya harap tutorial tentang penghitung waktu mundur JavaScript jam menit detik ini membantu Anda dan langkah serta metode yang disebutkan di atas mudah diikuti dan diterapkan