Contoh Countdown Timer untuk Halaman Web dengan Javascript
Ketika membangun website konferensi, biasanya di halaman utama, diberikan countdown timer.
Dimana countdown timer ini berfungsi untuk memberikan informasi batas kepada calon peserta konferensi, yang berkeinginan untuk menjadi presenter, agar segera mengirimkan paper atau posternya sebelum tanggal yang ditentukan.
Salah satu contohnya, adalah website konferensi PIT-FMB 2022 seperti ditunjukkan pada gambar di atas.
Untuk keperluan tersebut, di bawah ini adalah kode javascript countdown timer, dengan tampilan yang membutuhkan dukungan styling CSS untuk membuat background yang transparan.
<html>
<head>
<title>The Example of Countdown Timer</title>
<style>
.countdownbox{
font-family: "Roboto", Sans-serif;
padding:10px;
font-size:48px;
background-color:#00000061;
color:white;
margin:5px 5px 0 5px;
border-radius:5px;
}
</style>
<script>
</script>
</head>
<body>
<div id="countmainbox" style="display:flex;align-items:center;justify-content:center;">
<div style="text-align:center;"><div id="countday" class="countdownbox">00</div><br>Hari</div>
<div style="text-align:center;"><div id="counthour" class="countdownbox">00</div><br>Jam</div>
<div style="text-align:center;"><div id="countminute" class="countdownbox">00</div><br>Menit</div>
<div style="text-align:center;"><div id="countsecond" class="countdownbox">00</div><br>Detik</div>
</div>
<div style="margin-top: 20px;text-align: center;"><a href="https://edugameapp.com">Edugameapp.com</a></div>
<script>
function Julian()
{
this.numday = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
this.nameday = ["Senin", "Selasa", "Rabu", "Kamis", "Jumat","Sabtu","Minggu"];
this.namemonth = ["Januari", "Februari", "Maret", "April", "Mei","Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
this.AwalTahun = -4712;
this.peryear = 0;
this.permonth = 0;
this.penambah = 10;
this.init=function()
{
for (let i = 0; i < this.numday.length; i++) {
this.peryear += this.numday[i];
}
this.permonth = this.peryear / this.numday.length;
}
this.trace=function(day,month,year)
{
if (month < 1 || month > 12) {
if (month < 1) {
month = 1;
}
if (month > 12) {
month = 12;
}
}
if (day < 1) {
day = 1;
}
if(day>this.numday[month-1]){
day=this.numday[month-1];
}
if(this.basitoh(year) && month==2){
day=this.numday[month-1]+1;
}
if (year == 1582 && month == 10) {
if (day >= 5 && day < 15) {
day = 15;
}
}
var hasil = 0;
for (let th = this.AwalTahun; th < year; th++) {
if (th % 4 == 0) {
if (!this.basitoh(th)) {
hasil += 1;
} else {
if (th < 1582) {
hasil += 1;
}
}
}
hasil += this.peryear;
}
var tam=0;
if (year % 4 == 0) {
if (!this.basitoh(year)) {
tam++;
} else {
if (year < 1582) {
tam++;
}
}
}
for (let i = 0; i < (month - 1); i++) {
hasil += this.numday[i];
if(i==1)hasil+=tam;
}
hasil += day;
if (year > 1582) {
hasil -= this.penambah;
} else if (year == 1582) {
if (month > 10) {
hasil -= this.penambah;
} else if (month == 10) {
if (day>=15) {
hasil -= this.penambah;
}
}
}
jd = hasil-1;
return jd;
}
this.basitoh=function(th)
{
return ((th >= 1582) && (th % 100 == 0) && (th % 400) != 0);
}
this.getNameDayOfWeek=function(jd)
{
return this.nameday[(jd% 7)];
}
}
function hitungmundur()
{
var jul=new Julian();
jul.init();
var today = new Date();
var month=(today.getMonth()+1);
var day=today.getDate();
var year =today.getFullYear();
var jam=today.getHours();
var menit=today.getMinutes();
var detik=today.getSeconds();
var jdnow=jul.trace(day,month,year);
var date = new Date("2090-08-24");//tanggal pelaksanaan
day = date.getDate();
month = date.getMonth() + 1;
year = date.getFullYear();
var jd=jul.trace(day,month,year);
day=(jd-(jdnow+1));
if(day>=0){
var total=(23*60*60+59*60+60)-(jam*60*60+menit*60+detik);
jam=Math.floor(total/(60*60));
menit=Math.floor((total-jam*60*60)/60);
detik=(total-jam*60*60-menit*60);
document.getElementById("countday").innerHTML=(day<10)?"0"+day:day;
document.getElementById("counthour").innerHTML=(jam<10)?"0"+jam:jam;
document.getElementById("countminute").innerHTML=(menit<10)?"0"+menit:menit;
document.getElementById("countsecond").innerHTML=(detik<10)?"0"+detik:detik;
setTimeout(hitungmundur,1000);
}else if(day<0 && day>=-3){
document.getElementById("countmainbox").innerHTML="<h1>Today</h1>";
}else{
document.getElementById("countmainbox").innerHTML="<h2>Kegiatan telah dilaksanakan</h2>";
}
}
hitungmundur();
</script>
</body>
</html>
Demo kode di atas dapat di lihat di:
Komentar
Posting Komentar