Pure JavaScript Digital Clock Widget to get GMT/UTC Time Now


Most of the websites display the current date and time to the visitors in GMT/UTC. If you wish to create something similar like it for your webpage, you can make use of the below simple JavaScript code.


HTML Code:

<div id="gmt-clock" class="gmt-clock"></div>

CSS Code:

<style>
.gmt-clock {
  font-family: Arial, sans-serif;
  background-color: #f1f1f1;
  border: 2px solid #333;
  border-radius: 8px;
  max-width: 300px;
  padding: 5px;
  text-align: center;
  font-size: 14px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.24);
}
</style>

JavaScript Code:

<script>
function updateGMTClock() {
  const clockDiv = document.getElementById("gmt-clock");
  const gmtTime = new Date().toUTCString();
  clockDiv.textContent = "Time Now: " + gmtTime;
}

setInterval(updateGMTClock, 1000);
updateClock();
</script>

Final Result:



Facing issues? Have Questions? Post them here! I am happy to answer!

Author Info:

Rakesh (He/Him) has over 14+ years of experience in Web and Application development. He is the author of insightful How-To articles for Code2care.

Follow him on: X

You can also reach out to him via e-mail: rakesh@code2care.org

Copyright © Code2care 2024 | Privacy Policy | About Us | Contact Us | Sitemap