1053Creating & Displaying a Local Javacript-based Clock
Problem
Organizing meeting across time-zones can lead to mis-communication of the meeting start-times, especially when daylight-saving-time changes are involed.
Solution
Show the Meeting Start Time AND the current Local Time at the Meeting Website.
var f = new Intl.DateTimeFormat([], {
timeZone: 'Asia/Tokyo',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hourCycle: 'h23'
})
var setTime = () => document.getElementById('time').innerHTML = f.format(new Date())
setTime()
setInterval(() => setTime(), 1000)
</script>
Intl.DateTimeFormat
creates a new Intl formatter. Time to be displayed: Asia/Tokyo
. Displayed are only: hour
, minute
and second
. The hourCycle' option
h23` sets the display to a 24h clock.
setTime
is a function that sets the innerHTML
of id element time
to the current Date, formatted with the Intl date.
setTime()
call the function once on load.
setInterval()
repeatetly calls the setTime()
function to update the clock.