cara membuat program hitung mundur "countdown" tahun baru dengan javascript. aplikasi ini bisa anda aplikasikan untuk menghitung mundur berapa lama lagi tahun baru misalnya
ini dia kodenya. pertama buat dulu html seperti berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Countdown</title>
</head>
<body>
<h1>Tahun Baru Akan dimulai dalam waktu</h1>
<div><span id="days">00</span><br>Hari</div>
<div><span id="hours">00</span><br>Jam</div>
<div><span id="minutes">00</span><br>Menit</div>
<div><span id="seconds">00</span><br>Detik</div>
<script src="countdown.js"></script>
<script>
countdown('12/31/2016 11:59:59 PM', ['days', 'hours', 'minutes', 'seconds'], function() {
document.write('<h1>Selamat Tahun Baru 2018! Happy New Year</h1>');
});
</script>
</body>
</html>
lalu javascriptnya seperti berikut:
var countdown = function(end, elements, callback) {
var _second = 1000,
_minute = _second * 60,
_hour = _minute * 60,
_day = _hour * 24,
end = new Date(end),
timer,
calculate = function() {
var now = new Date(),
remaining = end.getTime() - now.getTime(),
data;
if(isNaN(end)) {
console.log('Invalid date/time');
return;
}
if(remaining <= 0) {
clearInterval(timer);
if(typeof callback === 'function') {
callback();
}
}else {
if(!timer) {
timer = setInterval(calculate, _second);
}
data = {
'days': Math.floor(remaining / _day),
'hours': Math.floor((remaining % _day) / _hour),
'minutes': Math.floor((remaining % _hour) / _minute),
'seconds': Math.floor((remaining % _minute) / _second)
}
if(elements.length) {
for (x in elements) {
var x = elements[x];
data[x] = ('00' + data[x]).slice(-2);
document.getElementById(x).innerHTML = data[x];
}
}
}
};
calculate();
}
dan terakhir kode css untuk mempercantik tampilan countdown nya seperti berikut:
body{
margin: 200px; auto;
height: 100%;
margin-bottom: 250px;
text-align: center;
font-family: sans-serif;
background: url('tahun-baru.jpg') center no-repeat;
background-size: cover;
}
div {
display: inline-block;
padding: 5px;
max-width: 80px;
max-height: 100px;
border: 1px solid #ccc;
border-radius: 10px;
text-align: center;
color: #fff;
text-shadow: 1px 1px 2px lightblue, 0 0 25px blue, 0 0 5px lightblue;
background-color: rgba(255, 255, 255, 0.5);
}
#days, #hours, #minutes, #seconds {
font-size: 40px;
border-bottom: 1px solid #ccc;
}
h1 {
color: #fff;
}
ketika waktu mundurnya sudah habis maka countdownnya akan menampilkan teks
"Selamat Tahun Baru 2018! Happy New Year"
Tengkyu Gaes :)
Via: juanasss.blogspot
