Cara Menciptakan Count Down Dengan Memakai Javascript

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 aku ingin coba membahas sedikit ihwal bagaimana cara menciptakan count down dengan j4vascript. Tanpa banyak basa-basi, mari kita lihat eksklusif langkah-langkahnya di bawah ini :)

Ada beberapa alat bantu yang aku pakai, ibarat :

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/j4vascript">   
 $(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/j4vascript">   
   $(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).

DEMO

Sumber http://www.kang-cahya.com

iklan banner

Cara Menciptakan Count Down Dengan Memakai Javascript

HTML

Javascript

Full Script

0 Response to "Cara Menciptakan Count Down Dengan Memakai Javascript"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel