Configurable live clock with timezone offsets.
Use any HTML tag with class clock-widget.
Basic clock without special formatting or UTC offset
<span class="clock-widget"></span>Clock with formatting and timezone offset
<span class="clock-widget" data-tz="America/Los_Angeles" data-format="HH:mm:ss"></span>Clock with formatting and UTC offset (may not work as intended)
<span class="clock-widget" data-offset="-7" data-format="HH:mm:ss"></span>| const clocks = document.getElementsByClassName("clock-widget") | |
| const updateTime = () => { | |
| for (let i = 0; i < clocks.length; i++) { | |
| const clock = clocks.item(i) | |
| const format = clock.dataset.format ? clock.dataset.format : 'hh:mm:ss a' | |
| let time_str = dayjs().format(format) | |
| if(clock.dataset.offset){ | |
| time_str =dayjs().utcOffset(clock.dataset.offset).format(format) | |
| } | |
| if(clock.dataset.tz){ | |
| time_str =dayjs().tz(clock.dataset.tz).format(format) | |
| } | |
| clock.innerHTML = `${time_str}` | |
| } | |
| } | |
| updateTime() | |
| setInterval(updateTime, 1000) |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Clock Demo</title> | |
| </head> | |
| <body> | |
| <p>Studio (simple UTC offset) <span class="clock-widget" data-offset="-7"></span></p> | |
| <p>Los Angeles (timezone) <span class="clock-widget" data-tz="America/Los_Angeles"></span></p> | |
| <p>Local (no adjustment) <span class="clock-widget" data-format="HH:mm"></span></p> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.4/dayjs.min.js" integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.4/plugin/utc.min.js" integrity="sha512-z84O912dDT9nKqvpBnl1tri5IN0j/OEgMzLN1GlkpKLMscs5ZHVu+G2CYtA6dkS0YnOGi3cODt3BOPnYc8Agjg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.4/plugin/timezone.min.js" integrity="sha512-fG1tT/Wn/ZOyH6/Djm8HQBuqvztPQdK/vBgNFLx6DQVt3yYYDPN3bXnGZT4z4kAnURzGQwAnM3CspmhLJAD/5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script>dayjs.extend(window.dayjs_plugin_utc)</script> | |
| <script>dayjs.extend(window.dayjs_plugin_timezone)</script> | |
| <script src="clock.js"></script> | |
| </body> | |
| </html> |