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.