Hay Day Clone v1.35.114 (June 19, 2017) versi terbaru --> klik di sini

Cara Membuat Hitung Waktu Mundur/Countdown di Blog

//

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 :)

4 Comments

thank's for share.
happy bloging.
moga tmbah maju web.a. amin
Reply Delete
Anonymous 15 January, 2013
gan kalo countdown dalam hitungan menit gimana?
jadi setiap visitor yg datang, dia akan lihat countdown mulai dari 4:56 (contoh)
dan bukan berdasarkan tanggal (TargetDate)??

thanks

Reply Delete

Post a Comment

Silakan tulis komentar atau pertanyaan kamu di sini. Komentar yang berbau spam, promosi dan sebagainya akan segera saya hapus. Terima kasih.

Cancel Reply