Countdown timer dengan jquery dan html

BrazenElixir Mei 20, 2022


Pernah kita menemukan masalah dengan waktu, yaitu menampilkan countdown timer yaitu dengan waktu mundur misal waktu mundur dengan kita tetapkan waktu terlebih dahulu.

pertama tama kita buat html dengan kode berikut : 

<html>
<head>
<title>Countdown Timer dengan jquery</title>
</head>
     <body>
            <div align="center" style="margin-top:10%;">
                <p id="demo"></p>
            </div>
    </body>
</html>

code html dengan merah beri id adalah inisial untuk memunculkan countdown timer tersebut
lalu setelah tag body masukan code berikut :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
// Set a valid end date
var getTimeData = new Date("Jun 5, 2022 15:37:25").getTime();

// Meng-update waktu setiap satu detik
var x = setInterval(function() {

  // Ambil tanggal hari ini
  var now = new Date().getTime();

  // Menggambil perbedaan waktu
  var distance = getTimeData - now;

  // Menghitung waktu berdasarkan  jam, detik, menit, hari
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Menampilkan waktu pada element id demo
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // jika selesai maka akan menampilkan expired
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

Berikut adalah code lengkap nya :

<html>

<head>

<title>Countdown Timer dengan jquery</title>

</head>

<body>

 <div align="center" style="margin-top:10%;">

<p id="demo"></p>

</div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script type="text/javascript">

// Setting waktu 

var getTimeData = new Date("Jun 5, 2022 15:37:25").getTime();

// Meng-update waktu setiap satu detik

var x = setInterval(function() {

  // Ambil tanggal hari ini

  var now = new Date().getTime();

  // Menggambil perbedaan waktu

  var distance = getTimeData - now;

  // Menghitung waktu berdasarkan  jam, detik, menit, hari

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));

  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Menampilkan waktu pada element id demo

  document.getElementById("demo").innerHTML = days + "d " + hours + "h "

  + minutes + "m " + seconds + "s ";

  // jika selesai maka akan menampilkan expired

  if (distance < 0) {

    clearInterval(x);

    document.getElementById("demo").innerHTML = "EXPIRED";

  }

}, 1000);

</script>

</html> 

Tags
Reactions

Posting Komentar

0 Komentar