เขียนโปรแกรมนาฬิการับถอยหลัง clock counter javascript html css

เขียนโปรแกรมนาฬิการับถอยหลัง clock counter javascript html css

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock Counter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="clock">
  <span id="hours">00</span> :
  <span id="minutes">00</span> :
  <span id="seconds">00</span>
</div>

<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.clock {
  font-size: 3rem;
  font-family: Arial, sans-serif;
}
JavaScript (script.js):
function updateClock() {
  var now = new Date();
  var hours = now.getHours().toString().padStart(2, '0');
  var minutes = now.getMinutes().toString().padStart(2, '0');
  var seconds = now.getSeconds().toString().padStart(2, '0');

  document.getElementById('hours').textContent = hours;
  document.getElementById('minutes').textContent = minutes;
  document.getElementById('seconds').textContent = seconds;
}

// Update the clock every second
setInterval(updateClock, 1000);

// Initial call to set the clock when the page loads
updateClock();
 

รับเขียนเว็บไซต์ รับเขียนโปรแกรม ระบบต่างๆ SEO

Line : rayongall / โทร. 085-281-7096

http://line.me/ti/p/~rayongall

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • เปิดใช้งานตลอด

บันทึกการตั้งค่า