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.

Untuk DEMO, karena 2014 sudah lewat, maka saya ganti jadi 2017.




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>

Selamat menghitung waktu :D
Disqus Comments