LiveTime Object Literal

I have a website that retrieves time data from any given location on the world live.

I wanted to be able to automatically change the time and not deal with the hassle of local client times.

It's fairly simple, but since I'm not that good with JS, I'd like to know if there is anything I could improve about it?

Suggestions are welcome!



`(function() {
"use strict";

var LiveTime = {
rawOffset: null,
dstOffset: null,
timeoutId: null,

setOffset: function(raw, dst) {
LiveTime.rawOffset = raw * 1000;

if (typeof dst !== "undefined") {
LiveTime.dstOffset = dst * 1000;
}
},

start: function() {
LiveTime.timeoutId = (function increment() {
var now = new Date();
var now = new Date(
now.getUTCFullYear(),
now.getUTCMonth(),
now.getUTCDate(),
now.getUTCHours(),
now.getUTCMinutes(),
now.getUTCSeconds(),
now.getUTCMilliseconds()
);

now.setTime(now.valueOf() + LiveTime.rawOffset + LiveTime.dstOffset);

var element = document.getElementById("current-time");
element.innerHTML = ("0" + now.getHours()).slice(-2) + ":"
+ ("0" + now.getMinutes()).slice(-2) + ":"
+ ("0" + now.getSeconds()).slice(-2);

LiveTime.timeoutId = setTimeout(increment, 50);
})();
},

stop: function() {
clearTimeout(LiveTime.timeoutId);
}
}

//usage example
LiveTime.start();

//simulate new location after 5 seconds
setTimeout(function() {
LiveTime.setOffset(-9 * 3600, 3600); //alaska
}, 5000);

//stop the time after 5 more seconds
setTimeout(function() {
LiveTime.stop();
}, 1000

From a once over:

• dst stands for daylight saving time, you should comment that

• offset I assume is the offset to the UTC (Greenwich time), you should comment that as well

• I am ambiguous about declaring rawOffset, dstOffset, timeoutId. I can see the value of self documenting code, but is it worth it ? Not sure. The code works fine if you delete those 3 statements.

-
Consider falsy evaluations

if (typeof dst !== "undefined") {
  LiveTime.dstOffset = dst * 1000;
}

compared to

if (dst) {
  LiveTime.dstOffset = dst * 1000;
}

or even (a bit hacky)

LiveTime.dstOffset = dst ? dst * 1000 : 0;

-
Do not declare variables twice like here:

var now = new Date();
var now = new Date(

-
You can get the timestring this way:

now.toTimeString().substring(0,8);

This basically keeps only the first 8 (hh:mm:ss) characters of the time string

-
You can get the UTC date value this way:

new Date((new Date()).toUTCString().slice(0,-4) )

This gets the UTC date, strips off the timezone part and re-creates the date

-
document.getElementById("current-time");

-
As @Pinoniq mentioned, ideally you should write your class/code so that you can run multiple instances.

-
LiveTime is not a constructor (yet), so it should be called liveTime

This would be my counter proposal:



function liveTime(elementId, offsetSeconds, dayLightTimeSavingSeconds) {
"use strict";

var timeZoneOffset = 0,
daylightTimeSavingOffset = 0,
element = document.getElementById(elementId),
timeoutId;

if( offsetSeconds ){
setTimeOffset( offsetSeconds, dayLightTimeSavingSeconds );
}

function setTimeOffset(offsetSeconds, dayLightTimeSavingSeconds) {
//Convert to milliseconds
timeZoneOffset = offsetSeconds * 1000;
daylightTimeSavingOffset = (dayLightTimeSavingSeconds || 0) * 1000;
}

function start() {
if( timeoutId ){
return; //We already started
}
(function increment() {
//Set the time to UTC time
var now = new Date((new Date()).toUTCString().slice(0, -4));
//Add the configured offsets
now.setTime(now.valueOf() + timeZoneOffset + daylightTimeSavingOffset);
//Update the HTML
element.innerHTML = now.toTimeString().substring(0, 8);
//Come back again
timeoutId = setTimeout(increment, 50);
})();
}

function stop() {
clearTimeout(timeoutId);
timeoutId = 0;
}
return {
setTimeOffset: setTimeOffset,
start: start,
stop: stop
};
}

//usage example
liveTime('current-time',-9 * 3600, 3600).start();
liveTime('current-time2', 4 * 3600 ).start();
Alaska time:

Moscow time:

StackExchange Code Review Q#68162, answer score: 2