.png)
Cara Membuat Countdown dengan javascript
Hallo Selamat sore sahabat blogger, bertemu lagi dengan saya kali ini saya akan membagikan tutorial cara membuat program hitung mundur "countdown" dengan javascript. aplikasi ini bisa anda aplikasikan untuk menghitung mundur berapa lama lagi tahun baru misalnya, atau menghitung mundur berapa lama lagi hari raya idul fitri.
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 2017! Happy New Year</h1>');
});
</script>
</body>
</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 2017! 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 seperti pada gambar dibawah:
Ok. sekianlah tutorial cara membuat countdown dengan javascript. semoga bermanfaat
0 komentar :