Hi, Allison_Cressey !!
In simple programming tasks related to time, it’s often faster and more accurate to use AI to put together the code. So this time, I leveraged the help of AI to assemble the code.
$w.onReady(function () {
// Initial execution and update every second
setInterval(updateClock, 1000); // Runs every 1 second
updateClock(); // Immediate display when the page loads
});
function updateClock() {
// Alaska Standard Time (AKST) is UTC-9 hours
const akstOffset = -9;
// Apply Alaska Standard Time offset to UTC time
const akstTime = new Date(Date.now() + (akstOffset * 60 * 60 * 1000));
// Get hours, minutes, and seconds, and pad with zeros if needed
const hours = String(akstTime.getUTCHours()).padStart(2, '0');
const minutes = String(akstTime.getUTCMinutes()).padStart(2, '0');
const seconds = String(akstTime.getUTCSeconds()).padStart(2, '0');
// Format the time string for display
const timeString = `${hours}:${minutes}:${seconds} AKST`;
// Display the clock in yourClockTextElem
$w("#yourClockTextElemID").text = timeString;
}
I checked from my environment (Japan Time Zone), and with this code, the time in Alaska was displayed correctly. (However, there seems to be a one-hour difference due to daylight saving time at the moment.) While I think there are no major issues with this code, there are a few points that I believe are worth noting.
First, the time that can be retrieved from frontend code depends on the device’s internal clock, so if the user’s device clock is off, the calculated Alaska time could also be inaccurate. To address this, it may be necessary to communicate with a server that provides the correct UTC time values. (A simple solution might be to return the value from Wix’s backend code.)
Also, in the code, you’re using setInterval
for repeated execution. If you want to make the clock run more accurately, you could adjust the interval to a shorter value (currently set to 1000ms, but you could try something like 100ms). Lastly, regarding the string “AKST” at the end, because the width of the time text fluctuates, it may move slightly. I recommend displaying this string in a separate text element to avoid that issue. 
※ If you want a clock that can automatically handle daylight saving time (DST) and other adjustments, introducing a date library like date-fns-tz
will allow for more stable time display.
import { toZonedTime, format } from 'date-fns-tz';
$w.onReady(function () {
// Initial execution and update every second
setInterval(updateClock, 1000); // Runs every 1 second
updateClock(); // Immediate display when the page loads
});
function updateClock() {
const alaskaTimezone = 'America/Anchorage';
const date = new Date();
const alaskaTime = toZonedTime(date, alaskaTimezone);
const timeString = format(alaskaTime, 'HH:mm:ss zzzz', { timeZone: alaskaTimezone });
$w("#yourClockTextElemID").text = timeString;
}