Does anyone have any custom code for creating a local clock and clock with UTC timezone in Webflow that displays the time in both 24 and 12 hour format?

Published on
September 22, 2023

To create a local clock and a clock with the UTC timezone in Webflow that displays the time in both 24 and 12-hour formats, you can use custom code. Here's how you can achieve this:

  1. Add an HTML embed element to your Webflow project by dragging and dropping it onto your page.
  2. Paste the following code snippet into the HTML embed element:
<p id="local-time"></p><p id="utc-time"></p><script>function getTimeString(date, format) {    let hours = date.getHours();    let minutes = date.getMinutes();    let seconds = date.getSeconds();    let ampm = hours >= 12 ? 'PM' : 'AM';        if (format === '12') {        hours = hours % 12;        hours = hours ? hours : 12;    }        hours = addLeadingZeros(hours);    minutes = addLeadingZeros(minutes);    seconds = addLeadingZeros(seconds);        return `${hours}:${minutes}:${seconds} ${ampm}`;}function addLeadingZeros(value) {    return String(value).padStart(2, '0');}function updateClocks() {    let localTimeElement = document.getElementById('local-time');    let utcTimeElement = document.getElementById('utc-time');        let date = new Date();        localTimeElement.textContent = getTimeString(date, '12');        let utcDateString = date.toLocaleString('en-US', { timeZone: 'UTC', hour12: false });    let utcDate = new Date(utcDateString);        utcTimeElement.textContent = getTimeString(utcDate, '24');}setInterval(updateClocks, 1000);</script>
  1. Customize the code if needed. Make sure to change the IDs 'local-time' and 'utc-time' if you want to use different element IDs for displaying the time.
  2. You can style the clock elements using CSS or Webflow's built-in styling options to match the design of your page.

With this custom code, you will have two separate paragraphs displaying the local time and the UTC time respectively, in either the 12-hour or 24-hour format. The clocks will update every second to show the current time.

Please note that if you have multiple pages in your Webflow project, you may need to add the HTML embed element and paste the code on each page where you want the clocks to be displayed.

Additional Questions:

  1. How can I add a local clock to my Webflow site?
  2. How do I display a clock with the UTC timezone in Webflow?
  3. What is the code for creating a clock that shows both 24-hour and 12-hour formats in Webflow?