Cara Membuat Jam Digital dengan JQuery

Kali ini kita akan buat jam digital dengan jQuery, saya tidak menggunakan library jQuery untuk jam digital, tetapi menggunakan script manual, buat 1 file dengan nama jamdigital.html berikut adalah Script nya :

<html>
<head>
<title>jam digital</title>
<style>
/* style jam digital */
.time-now{
    font-size:40px;
    font-weight:bold;
    text-align:center;
    color:rgb(255, 230, 0);
}
.date-now{
    font-size:25px;
    font-weight:600;
    color:rgb(197, 197, 197);
    text-align:center;
}
.area-datetime{
    margin-top:15px;
    padding:10px;
    width:300px;
    height:auto;
    background-color: black;
}
</style>
</head>
<body>
<!-- output -->
<div class="area-datetime">
    <p class="date-now" id="datenow"></p>
    <p class="time-now" id="timenow"></p>
 </div>
<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
<script>
    //intital tanggal dan waktu dari id
    var dateDisplay = document.getElementById("datenow");
    var timeDisplay = document.getElementById("timenow");
    //fungsi
    function refreshTime() {
      var dateString = new Date().toLocaleString("id-ID", {timeZone: "Asia/Jakarta"}); //gettime
      var today = new Date();
      var dd = today.getDate();
      var mm = today.getMonth() + 1;
      var yyyy = today.getFullYear();
      if (dd < 10) {
        dd = '0' + dd;
      }
      if (mm < 10) {
        mm = '0' + mm;
      }
      var todayy = dd + '/' + mm + '/' + yyyy;
      var formattedString = dateString.replace(",","-");

      dateDisplay.innerHTML = todayy; // date

      var splitarray = new Array();
      splitarray= formattedString.split(" ");
      var splitarraytime = new Array();
      splitarraytime= splitarray[1].split(".");
      timeDisplay.innerHTML = splitarraytime[0]+':'+splitarraytime[1]+':'+splitarraytime[2]; // time
    }
    //panggil ulang otomatis fungsi
    setInterval(refreshTime, 1000);
  </script>
</body>
</html>

Selesai.

Leave a Reply

Your email address will not be published. Required fields are marked *

Home
Produk
Tutorial
Search