Oke kali ini saya akan ngasih tau cara membuat countdown atau hitung waktu mundur. Biasanya ini digunakan dalam lauching suatu acara, launcing web/blog, dll. Tak perlu basa basi lagi, langsung praktek!
Kamu tinggal copy paste kode di bawah ini saja, letakkan di tempat dimana countdown tersebut akan muncul.
<script language="JavaScript"> TargetDate = "05/26/2099 7:00 AM"; BackColor = "#eeeeee"; ForeColor = "#444444"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Hari, %%H%% Jam, %%M%% Menit, %%S%% Detik."; FinishMessage = "Waktunya telah tiba!"; function calcage(secs, num1, num2) { s = ((Math.floor(secs/num1))%num2).toString(); if (LeadingZero && s.length < 2) s = "0" + s; return "<b>" + s + "</b>"; } function CountBack(secs) { if (secs < 0) { document.getElementById("cntdwn").innerHTML = FinishMessage; return; } DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000)); DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24)); DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60)); DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60)); document.getElementById("cntdwn").innerHTML = DisplayStr; if (CountActive) setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod); } function putspan(backcolor, forecolor) { document.write("<span id='cntdwn' style='background-color:" + backcolor + "; color:" + forecolor + "'></span>"); } if (typeof(BackColor)=="undefined") BackColor = "white"; if (typeof(ForeColor)=="undefined") ForeColor= "black"; if (typeof(TargetDate)=="undefined") TargetDate = "12/31/2020 5:00 AM"; if (typeof(DisplayFormat)=="undefined") DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; if (typeof(CountActive)=="undefined") CountActive = true; if (typeof(FinishMessage)=="undefined") FinishMessage = ""; if (typeof(CountStepper)!="number") CountStepper = -1; if (typeof(LeadingZero)=="undefined") LeadingZero = true; CountStepper = Math.ceil(CountStepper); if (CountStepper == 0) CountActive = false; var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990; putspan(BackColor, ForeColor); var dthen = new Date(TargetDate); var dnow = new Date(); if(CountStepper>0) ddiff = new Date(dnow-dthen); else ddiff = new Date(dthen-dnow); gsecs = Math.floor(ddiff.valueOf()/1000); CountBack(gsecs); </script>
Untuk mengatur kapan waktunya, tinggal edit saja kode yang digaris bawah di atas. Dan untuk mempercantik tampilan kita bisa memanfaatkan #cntdwn. Dengan CSS dibawah ini:
<style type="text/css"> #cntdwn { font-size:20px; padding:5px 10px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } </style>
Hasilnya seperti ini :
Terima kasih :)
happy bloging.
moga tmbah maju web.a. amin
jadi setiap visitor yg datang, dia akan lihat countdown mulai dari 4:56 (contoh)
dan bukan berdasarkan tanggal (TargetDate)??
thanks
Semoga membantu