Cara Membuat Count Down Dengan Javascript - Selamat malam kawan, untuk kali ini saya ingin coba berbagi kepada anda tentang bagaimana cara membuat count down dengan javascript.
Ada beberapa alat bantu yang saya pakai, seperti :
HtmlJavascriptFull Script
<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>
<!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).
mas saya sudah coba tutorial countdown yg di atas,,
ReplyDeletesudah berhasil,,
tapi saya ingin tampilnya menit , second,,
bagaimana mas ..
mohon pencerahannya mas
bisa cek di dokumentasinya : http://counteverest.anacoda.de/jquery-plugin/doc/
Deletemas kalau cout downnya di buat dinamic gmna ya pake databse?
ReplyDelete