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).
Posting Komentar