Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Countdown Timer Tahun Baru 2014

Membuat Coundown Timer atau hitungan mundur menyambut Tahun Baru.
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>

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.