# Current time (clock widget)

**URL:** <https://forum.readymag.com/t/current-time-clock-widget/447>\
**Category:** Custom code\
**Created:** [July 14, 2022, 10:58pm UTC](https://forum.readymag.com/t/current-time-clock-widget/447 "2022-07-14T22:58:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![fmc](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/fmc/32/345_2.png) [@fmc](https://forum.readymag.com/u/fmc)\
**Post date:** [July 14, 2022, 10:58pm UTC](https://forum.readymag.com/t/current-time-clock-widget/447/1 "2022-07-14T22:58:45Z")

</div>

Hi, I was wondering if it is possible to add a live current time (clock) to our page using some kind of css / code.

---

<div class="post-metadata">

**Author:** ![Cyrill\_Durigon](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/cyrill_durigon/32/342_2.png) [@Cyrill\_Durigon](https://forum.readymag.com/u/Cyrill_Durigon)\
**Post date:** [July 14, 2022, 11:37pm UTC](https://forum.readymag.com/t/current-time-clock-widget/447/2 "2022-07-14T23:37:10Z")

</div>

I am currently wondering the same thing !  
If you found a solution let us know here 😉

---

<div class="post-metadata">

**Author:** ![alexey\_kogan](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/alexey_kogan/32/622_2.png) [@alexey\_kogan](https://forum.readymag.com/u/alexey_kogan)\
**Post date:** [October 20, 2022, 4:33pm UTC](https://forum.readymag.com/t/current-time-clock-widget/447/3 "2022-10-20T16:33:16Z")

</div>

Yes would love to know if solution was found as well. Thanks!

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [October 24, 2022, 10:05pm UTC](https://forum.readymag.com/t/current-time-clock-widget/447/4 "2022-10-24T22:05:04Z")

</div>

here is a simple one:

Paste this code inside a customcodewidget and change to your needs.

```auto
<div class="clock">
</div>

<style>
  .clock{
    font-family: sans-serif, "Source Sans Pro";
    color: #000;
    font-size: 100px;
    }
</style>

<script>
  
  const currentTime = () => {
  const el = document.querySelector('.clock');
  
  let date = new Date();
  let hh = date.getHours();
  let mm = date.getMinutes();
  let ss = date.getSeconds();
  
  hh = hh < 10 ? `0${hh}` : hh;
  mm = mm < 10 ? `0${mm}` : mm;
  ss = ss < 10 ? `0${ss}` : ss;
  
  let time = `${hh}:${mm}:${ss}`;
  
  el.innerHTML = time;
};

currentTime();
setInterval(currentTime, 1000);
  
  
  
</script>

```

---

<div class="post-metadata">

**Author:** ![alexey\_kogan](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/alexey_kogan/32/622_2.png) [@alexey\_kogan](https://forum.readymag.com/u/alexey_kogan)\
**Post date:** [October 27, 2022, 9:56pm UTC](https://forum.readymag.com/t/current-time-clock-widget/447/5 "2022-10-27T21:56:54Z")

</div>

THANK YOU! Much appreciated 🙂

---

<div class="post-metadata">

**Author:** ![19\_84](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/19_84/32/1283_2.png) [@19\_84](https://forum.readymag.com/u/19_84)\
**Post date:** [March 31, 2023, 10:49pm UTC](https://forum.readymag.com/t/current-time-clock-widget/447/6 "2023-03-31T22:49:28Z")

</div>

Thanks for the code. It appears only after double refreshing age. Do you know what the problem is?

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [April 5, 2023, 8:59am UTC](https://forum.readymag.com/t/current-time-clock-widget/447/7 "2023-04-05T08:59:03Z")

</div>

works flawlessly here…

---

<div class="post-metadata">

**Author:** ![dionnaalexis](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/dionnaalexis/32/2742_2.png) [@dionnaalexis](https://forum.readymag.com/u/dionnaalexis)\
**Post date:** [August 29, 2023, 3:58pm UTC](https://forum.readymag.com/t/current-time-clock-widget/447/8 "2023-08-29T15:58:48Z")

</div>

Is this something that you have to change daily? Or does it go on forever once you put in the current date and time? Thank you for the code! And thank you in advance!

---

<div class="post-metadata">

**Author:** ![Victor\_Charrier](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/victor_charrier/32/4307_2.png) [@Victor\_Charrier](https://forum.readymag.com/u/Victor_Charrier)\
**Post date:** [May 20, 2026, 4:16pm UTC](https://forum.readymag.com/t/current-time-clock-widget/447/9 "2026-05-20T16:16:56Z")

</div>

Hi ! Thank you very much for this, it works really well. The only problem I have is to use a font of my choice. Someone had the same problem and asked here ([https://forum.readymag.com/t/custom-current-time-widget-that-uses-project-font/5881](https://forum.readymag.com/t/custom-current-time-widget-that-uses-project-font/5881)) but didn’t get an answer. Does anyone knows how to solve this ?