Membuat Countdown Timer Tahun Baru 2014

Membuat Countdown Timer Tahun Baru 2014 dengan JavaScript - Sebelumnya saya ucapkan selamat Tahun Baru buat sahabat pengunjung Blog KI ini, semoga seiring bertambahnya waktu dan usia, kita semakin dewasa dan bijak dalam berprilaku dan pastinya ada dalam lindungan Allah SWT.

Agak terlambat memang saya posting hal ini, tapi masih ada waktu 14 jam menunggu datangnya tahun baru 2014 jadi mungkin masih ada kesempatan untuk memanjakan pengunjung dengan hitungan mundur (countdown timer) menuju detik-detik datangnya tahun baru.

Update:

Untuk DEMO, karena 2014 sudah lewat, maka saya ganti menjadi Countdown Ramadhan 1442 H.




Untuk pemasangannya silahkan simpan kode ini pada widget HTML/JavaScript :

<style type="text/css" scoped> 
#tahunbaru {
    background:#739bc8;
    color:yellow;
    font-size:150%;
    text-transform:uppercase;
    text-align:center;
    padding:20px 0;
    font-weight:normal;
    border-radius:5px;
    line-height:1.8em;
}
.putih {color:white}
</style>
<div id='tahunbaru'>
    <span id='countdown'></span>
</div>
<script>
var target_date = new Date("Jan 1, 2017").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function () {
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
    countdown.innerHTML = days + " <span class=\'digit\'>hari</span> " + hours + " <span class=\'digit\'>jam</span> " + minutes + " <span class=\'digit\'>menit</span> " + seconds + " <span class=\'digit\'>detik menuju <span class=\'juduls'>Tahun Baru 2017</span>";
}, 1000);
</script>

Apabila ingin dipisah, maka ini kode CSSnya

#tahunbaru {
    background:#739bc8;
    color:yellow;
    font-size:150%;
    text-transform:uppercase;
    text-align:center;
    padding:20px;
    font-weight:normal;
    border-radius:5px;
    line-height:1.8em;
    font-family: Arial, snas-serif;
}
.digit {color:white}

Ini JavaScriptnya, apabila digunakan untuk yang lain, ganti tanggal April 13, 2021

var target_date = new Date("April 13, 2021").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function () {
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
    countdown.innerHTML = days + " <span class=\'digit\'>hari</span> " + hours + " <span class=\'digit\'>jam</span> " + minutes + " <span class=\'digit\'>menit</span> " + seconds + " <span class=\'digit\'>detik menuju <span class=\'juduls'>Ramadhan 1442 H</span>";
}, 1000);

Dan ini kode HTML Nya

<div id='tahunbaru'>
    <span id='countdown'></span>
</div>