Monday, July 6, 2015

Cara Membuat Count Down Dengan Menggunakan Javascript

Cara Membuat Count Down Dengan Menggunakan Javascript
Cara Membuat Count Down Dengan Menggunakan Javascript - Selamat pagi kawan, pada postingan kali ini saya ingin coba membahas sedikit tentang bagaimana cara membuat count down dengan javascript. Tanpa banyak basa-basi, mari kita lihat langsung langkah-langkahnya di bawah ini :)

Ada beberapa alat bantu yang saya pakai, seperti :

HTML

<div align="center">    
<h1>Countdown</h1>
<section class="examples examples--styled">
<div class="example example--oncomplete1">
<div class="ce-countdown1 ce-countdown--theme-1">
<!--menghitung mundur hari-->
<span class="ce-days"></span> <span class="ce-days-label"></span>
<!--menghitung mundur jam-->
<span class="ce-hours"></span> <span class="ce-hours-label"></span>
<!--menghitung mundur menit-->
<span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
<!--menghitung mundur detik-->
<span class="ce-seconds"></span> <span class="ce-seconds-label"></span>

<!-- pemberitahuan akan muncul di class status1--></!-->
<div class="status1"></div>
</div>
</div>
</section><br>
<footer>
Created By, <a href="http://kang-cahya.com" target="_blank">Cahya Dyazin</a><br>
Powered By, <a href="http://counteverest.anacoda.de/jquery-plugin/doc/" target="_blank">Count Everest</a>
</footer>
</div>


Javascript

<script src="http://counteverest.anacoda.de/jquery-plugin/doc/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="http://counteverest.anacoda.de/jquery-plugin/js/vendor/jquery-1.11.2.min.js"></script>
<script src="http://counteverest.anacoda.de/jquery-plugin/js/vendor/jquery.counteverest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var now = new Date();
$(".example--oncomplete1 .ce-countdown1").countEverest({
day: 04, //tentukan tanggal
month: 07, //tentukan bulan
year: 2016, //tentukan tahun
hour: 00, //tentukan jam
minute: 00, //tentukan menit
onComplete: function() {
//jika hitung mundur habis maka pada class status 1 akan muncul text "Sudah Berakhir"
$('.example--oncomplete1 .status1').slideUp(400, function() {
$(this).text('Sudah Berakhir.').addClass('status--complete');
}).slideDown(400);
}
});
});
</script>


Full Script

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CountDown with counteverest JS</title>

<script src="http://counteverest.anacoda.de/jquery-plugin/doc/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="http://counteverest.anacoda.de/jquery-plugin/js/vendor/jquery-1.11.2.min.js"></script>
<script src="http://counteverest.anacoda.de/jquery-plugin/js/vendor/jquery.counteverest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var now = new Date();
$(".example--oncomplete1 .ce-countdown1").countEverest({
day: 04, //tentukan tanggal
month: 07, //tentukan bulan
year: 2016, //tentukan tahun
hour: 00, //tentukan jam
minute: 00, //tentukan menit
onComplete: function() {
//jika hitung mundur habis maka pada class status 1 akan muncul text "Sudah Berakhir"
$('.example--oncomplete1 .status1').slideUp(400, function() {
$(this).text('Sudah Berakhir.').addClass('status--complete');
}).slideDown(400);
}
});
});
</script>

</head>
<body align="center">
<h1>Countdown</h1>
<section class="examples examples--styled">
<div class="example example--oncomplete1">
<div class="ce-countdown1 ce-countdown--theme-1">
<!--menghitung mundur hari-->
<span class="ce-days"></span> <span class="ce-days-label"></span>
<!--menghitung mundur jam-->
<span class="ce-hours"></span> <span class="ce-hours-label"></span>
<!--menghitung mundur menit-->
<span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
<!--menghitung mundur detik-->
<span class="ce-seconds"></span> <span class="ce-seconds-label"></span>

<!-- pemberitahuan akan muncul di class status1--></!-->
<div class="status1"></div>
</div>
</div>
</section><br>
<footer>
Created By, <a href="http://kang-cahya.com" target="_blank">Cahya Dyazin</a><br>
Powered By, <a href="http://counteverest.anacoda.de/jquery-plugin/doc/" target="_blank">Count Everest</a>
</footer>
</body>
</html>
Keterangan :
Setelah count down selesai menghitung mundur maka akan muncul status "sudah berakhir pada bawah count down (lihat gambar dibawah ini).
Cara Membuat Count Down Dengan Menggunakan Javascript

Saya hanya seorang "newbie" yang baru bisa ngoding lohor kemarin.


EmoticonEmoticon