Countdown JavaScript Sederhana

• Mungkin 2, 2024

Saya ingin penghitung waktu mundur JavaScript sederhana yang bisa saya masukkan ke dalam kotak widget Blogger, atau digunakan dalam konteks di halaman web. Awalnya, saya berasumsi bahwa saya dapat dengan mudah menemukan apa yang saya cari dengan pencarian web cepat. Namun, semua penghitung yang saya temukan jauh lebih rumit daripada yang saya cari. Saya tidak ingin menghitung mundur sampai detik terakhir, saya hanya peduli beberapa hari. Jadi, saya memutuskan untuk menulis sendiri.

Kode berikut ini dikonfigurasikan untuk menghitung hari hingga (atau dari) 8 Agustus 2008. Karena 8 adalah angka keberuntungan dalam budaya Tiongkok, hari ini dipilih untuk upacara pembukaan Olimpiade Musim Panas 2008 di Beijing.


var millisecs_per_day = 86400000
// atur waktu hitung mundur dalam milidetik
// cantumkan hari yang diinginkan sebagai argumen pada Date.UTC
// dalam urutan:
// tahun, bulan (ingat Januari adalah 0), hari dalam sebulan, offset dari GMT
// CATATAN: kami menggunakan offset karena itu mewakili tengah malam
// (awal hari) di zona waktu tertentu
var countdown_time = Date.UTC (2008,7,8, -8);
// dapatkan waktu saat ini dan konversi ke milidetik
var sekarang = Tanggal baru ();
var now_millisecs = now.valueOf ();

var day_cnt = Math.ceil ((countdown_time - now_millisecs) / 86400000)

// tampilkan jumlah hari yang tersisa (atau sejak)
jika (day_cnt> 1)
{
// beberapa hari lagi
document.write (day_cnt + "hari lagi")
}
lain jika (day_cnt == 1)
{
// satu hari lagi
document.write (day_cnt + "day to go")
}
lain jika (day_cnt == 0)
{
// hari ini
document.write ("hari ini")
}
lain jika (day_cnt == -1)
{
// sehari yang lalu
document.write (day_cnt + "hari yang lalu")
}
lain
{
// beberapa hari yang lalu
document.write (day_cnt + "hari yang lalu")
}


Anda dapat mengunduh kode ini atau melihatnya beraksi di sini. Untuk menggunakan kode ini dalam proyek Anda sendiri, salin dan tempel ke halaman web Anda (atau kotak widget Blogger HTML / JavaScript, seperti yang ditunjukkan pada gambar di atas.) Ubah tanggal sesuai dengan instruksi dalam komentar - jika ini membingungkan , Anda dapat menemukan artikel saya tentang Pengantar Tanggal UTC bermanfaat.

Petunjuk Video: Countdown clock in JS using HTML & CSS | JavaScript Tutorials | Web Development Tutorials (Mungkin 2024).