Kode-kode HTML memungkinkan kita untuk menyisipkan konten dinamis seperti tanggal dan waktu terkini yang selalu update otomatis saat ini dengan menggunakan JavaScript. Dengan menyisipkan informasi real-time ke dalam dokumen HTML, kita dapat membuat halaman web yang interaktif dan ramah pembaca situs anda. Dan proses ini dapat dengan mudah dilakukan menggunakan berbagai cara, seperti tag <time> atau <objek Date JavaScript>.
Berikut beberapa cara yang dapat digunakan untuk menyisipkan tanggal dan waktu saat ini (current time) ke dalam kode HTML:
MENGGUNAKAN OBJECT DARE JAVASCRIPT
Dengan cara ini, kita menggunakan objek Date JavaScript untuk mendapatkan tanggal dan waktu saat ini. Metode toLocaleDateString dan toLocaleTimeString memformat tanggal dan waktu, yang kemudian disisipkan secara dinamis ke dalam HTML menggunakan innerHTML. Fungsi setInterval memperbarui waktu setiap detik.</>
Contoh di bawah ini menggunakan objek Date JavaScript untuk menyisipkan tanggal dan waktu saat ini ke dalam HTML.
<!DOCTYPE html>
<html>
<head>
<title>
Date and time
</title>
<style>
h1 {
color: green;
}
#time {
font-size: 1.2rem;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h3> Approach 1: Using JavaScript Date Object </h3>
<div id="time">
</div>
<script>
function updateTime() {
const date = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
const time = date.toLocaleTimeString();
const day = date.toLocaleDateString(undefined, options);
document.getElementById('time').innerHTML =
`Today is: ${day}, Current Time: ${time}`;
}
setInterval(updateTime, 1000);
updateTime();
</script>
</body>
<head>
<title>
Date and time
</title>
<style>
h1 {
color: green;
}
#time {
font-size: 1.2rem;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h3> Approach 1: Using JavaScript Date Object </h3>
<div id="time">
</div>
<script>
function updateTime() {
const date = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
const time = date.toLocaleTimeString();
const day = date.toLocaleDateString(undefined, options);
document.getElementById('time').innerHTML =
`Today is: ${day}, Current Time: ${time}`;
}
setInterval(updateTime, 1000);
updateTime();
</script>
</body>
MENGGUNAKAN TAG <TIME> DENGAN JAVASCRIPT
Dalam pendekatan ini, kita menggunakan tag <time> bersama JavaScript untuk menampilkan tanggal dan waktu saat ini secara dinamis. Fungsi updateTime mengambil tanggal dan waktu saat ini menggunakan objek Date dan memperbarui atribut dateTime serta isi dalam tag setiap detik.
Contoh: Contoh di bawah ini menggunakan tag
<!DOCTYPE html>
<html>
<head>
<title>Date and time</title>
<style>
h1 {
color: green;
}
time {
font-size: 1.2rem;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Approach 2: Using <time> Tag with JavaScript</h3>
<time id="current-time"></time>
<script>
function updateTime() {
const now = new Date();
const timeElement = document.getElementById('current-time');
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
timeElement.dateTime = now.toISOString();
timeElement.innerHTML = `Today is: ${now.toLocaleDateString(undefined, options)},
Time: ${now.toLocaleTimeString()}`;
}
setInterval(updateTime, 1000);
updateTime();
</script>
</body>
</html>
<html>
<head>
<title>Date and time</title>
<style>
h1 {
color: green;
}
time {
font-size: 1.2rem;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Approach 2: Using <time> Tag with JavaScript</h3>
<time id="current-time"></time>
<script>
function updateTime() {
const now = new Date();
const timeElement = document.getElementById('current-time');
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
timeElement.dateTime = now.toISOString();
timeElement.innerHTML = `Today is: ${now.toLocaleDateString(undefined, options)},
Time: ${now.toLocaleTimeString()}`;
}
setInterval(updateTime, 1000);
updateTime();
</script>
</body>
</html>
Selesai...
Jumat, 19 September 2025