We Keep Coding

How to add milliseconds with JavaScript

I'm adding two time strings in order to get single time string in h:m:s format with milliseconds to be added as well.
I only managed until the seconds. Now I also want to add the milliseconds
I also want to add more than two time strings, that is, more than two parameters
function addTimes (startTime, endTime) {
var times = [ 0, 0, 0 ]
var max = times.length
var a = (startTime || '').split(':')
var b = (endTime || '').split(':')
// normalize time values
for (var i = 0; i < max; i++) {
a[i] = isNaN(parseInt(a[i])) ? 0 : parseInt(a[i])
b[i] = isNaN(parseInt(b[i])) ? 0 : parseInt(b[i])
}
// store time values
for (var i = 0; i < max; i++) {
times[i] = a[i] + b[i]
}
var hours = times[0]
var minutes = times[1]
var seconds = times[2]
if (seconds >= 60) {
var m = (seconds / 60) << 0
minutes += m
seconds -= 60 * m
}
if (minutes >= 60) {
var h = (minutes / 60) << 0
hours += h
minutes -= 60 * h
}
return ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2)
}
alert(addTimes('9:10:10', '1:0:0'));

You can just extend your existing function to handle milliseconds the same way it's currently handling minutes and seconds, just with a factor of 1,000 instead of 60.
function addTimes(startTime, endTime) {
// Add element for milliseconds to times
var times = [0, 0, 0, 0];
var max = times.length;
// Split on ':' and '.'
var a = (startTime || '').split(/[:.]/);
var b = (endTime || '').split(/[:.]/);
// normalize time values
for (var i = 0; i < max; i++) {
a[i] = isNaN(parseInt(a[i])) ? 0 : parseInt(a[i]);
b[i] = isNaN(parseInt(b[i])) ? 0 : parseInt(b[i]);
}
// store time values
for (var i = 0; i < max; i++) {
times[i] = a[i] + b[i];
}
var hours = times[0];
var minutes = times[1];
var seconds = times[2];
// Add variable for milliseconds
var milliseconds = times[3];
// Add milliseconds first
if (milliseconds >= 1000) {
var s = (milliseconds / 1000) << 0;
seconds += s;
milliseconds -= 1000 * s;
}
// Continue as for original
if (seconds >= 60) {
var m = (seconds / 60) << 0;
minutes += m;
seconds -= 60 * m;
}
if (minutes >= 60) {
var h = (minutes / 60) << 0;
hours += h;
minutes -= 60 * h;
}
return ('0' + hours).slice(-2) + ':' +
('0' + minutes).slice(-2) + ':' +
('0' + seconds).slice(-2) + '.' +
// Add milliseconds to return
('00' + milliseconds).slice(-3);
}
console.log(addTimes('9:10:10.500', '1:0:55.501'));
I'd simplify things a bit and do away with the if statements and just do the overflow thing every time. Also, it can be made a bit more tolerant of partial strings and invalid values, e.g.
/* Add times in format h:mm:ss.sss
** return total time in same format
** Accepts partial times, first digit treated as hours
** e.g. 1:30 is equivalent to 1:30:00.000
** Invalid and missing parts treated as 0 (zero)
** #param {string} timeA : time in format h:mm:ss.sss
** #param {string} timeB : time in format h:mm:ss.sss
** #returns {string} sum of timeA and timeB in format h:mm:ss.sss
*/
function addTime(timeA, timeB) {
// Pad function for numbers less than 100
let z = (n, len) => String(n).padStart(len, '0');
// Split timestamps into parts as numbers, NaN => 0
let parts = s => String(s).split(/[:.]/).map(v => Number(v) || 0);
let [aH, aM, aS, aMs] = parts(timeA);
let [bH, bM, bS, bMs] = parts(timeB);
// Initialise total values, tx is just a placeholder
let tH = 0, tM = 0, tS = 0, tMs = 0, tX;
// Helper to add time values - omitting f just adds a + b
let factorSum = (a, b, f) => {
let t = (a || 0) + (b || 0);
return f? [t / f | 0, t % f] : [0, t];
};
// Add parts in order using helper
[tS, tMs] = factorSum(aMs, bMs, 1000);
[tM, tS] = factorSum(aS, bS + tS, 60);
[tH, tM] = factorSum(aM, bM + tM, 60);
[tX, tH] = factorSum(aH, bH + tH);
// Return formatted result
return tH + ':' + z(tM,2) + ':' + z(tS,2) + '.' + z(tMs,3);
}
// No overflow
console.log(addTime('1:01:01.001', '2:02:02.200')); // 3:03:03.201
// Overflow mins, secs, milliseconds
console.log(addTime('1:59:59.999', '0:00:00.001')); // 2:00:00.000
// Partial times
console.log(addTime('1', '2:30:1')); // 3:30:01.000
// Missing parameter treated as 0
console.log(addTime()); // 0:00:00.000
console.log(addTime('1:15')); // 1:15:00.000
// Invalid parts treated as zero
console.log(addTime('1:15', 'foo')); // 1:15:00.000
console.log(addTime('1:15', '2:blah:23.001')); // 3:15:23.001
If I could use a addition assignment += with destructuring it could be simpler, but that's not possible yet. :-)

Interval Array not creating

I found this code but when insert anytime between x:15 - x:45 (x being any associated time) I do not get the intervals for those times.
var setIntervals = function (start, end, inc, oc) {
start = start.toString().split(':');
end = end.toString().split(':');
inc = parseInt(inc, 10);
oc = oc;
var pad = function (n) { return (n < 10) ? '0' + n.toString() : n; },
startHr = parseInt(start[0], 10),
startMin = parseInt(start[1], 10),
endHr = parseInt(end[0], 10),
endMin = parseInt(end[1], 10),
currentHr = startHr,
currentMin = startMin,
previous = currentHr + ':' + pad(currentMin),
current = '',
r = [];
do {
currentMin += inc;
if ((currentMin % 60) === 0 || currentMin > 60) {
currentMin = (currentMin === 60) ? 0 : currentMin - 60;
currentHr += 1;
}
current = currentHr + ':' + pad(currentMin);
r.push({"end":current, "start":previous, "OpenClosed":oc});
previous = current;
} while (currentHr !== endHr);
return r;
};
var closedTime=setIntervals("<?php echo $close_now ?>","<?php echo $close_end ?>","15", "closed");
var closeArray = [];
closeArray.push(closedTime);
Currently I only get the times from 1:30 - 2:00 but not up to 2:30... If I do 2:00 to 3:00 I get all the intervals.
https://jsfiddle.net/pbbsoxrz/
Added the issue into jsfiddle
Courteous of JavaScript Setting Time Difference through Loop In Array

Just change the while condition and add the part for the minutes with logical or.
while (currentHr !== endHr || currentMin !== endMin);
var setIntervals = function (start, end, inc, oc) {
start = start.toString().split(':');
end = end.toString().split(':');
inc = parseInt(inc, 10);
oc = oc;
var pad = function (n) { return (n < 10) ? '0' + n.toString() : n; },
currentHr = parseInt(start[0], 10),
currentMin = parseInt(start[1], 10),
endHr = parseInt(end[0], 10),
endMin = parseInt(end[1], 10),
previous = currentHr + ':' + pad(currentMin),
current = '',
r = [];
do {
currentMin += inc;
currentHr += currentMin / 60 | 0;
currentMin %= 60;
current = currentHr + ':' + pad(currentMin);
r.push({ start: previous, end: current, OpenClosed: oc });
previous = current;
} while (currentHr !== endHr || currentMin !== endMin); // <----------- change this!
return r;
};
var closedTime = setIntervals("12:15", "14:45", "15", "closed");
var closeArray = [];
closeArray.push(closedTime);
document.write('<pre>' + JSON.stringify(closeArray, 0, 4) + '</pre>');

Here's what you want:
var setIntervals = function(start, end, inc, oc) {
var date1 = new Date('2015-1-1 ' + start),
date2 = new Date('2015-1-1 ' + end),
r = [],
current,
previous;
// Make sure we increment is a positive number so we don't have an infinite loop
inc = Math.abs(parseInt(inc, 10));
do {
previous = ('0' + date1.getHours()).slice(-2) + ':' + ('0' + date1.getMinutes()).slice(-2);
date1.setTime(date1.getTime() + inc * 60 * 1000);
current = ('0' + date1.getHours()).slice(-2) + ':' + ('0' + date1.getMinutes()).slice(-2);
r.push({
"end": current,
"start": previous,
"OpenClosed": oc
});
} while (date1.getTime() < date2.getTime());
return r;
};
var closeArray = [setIntervals("13:30", "14:30", "15", "closed")];
console.log(closeArray);
The while condition of your original code causes the loop to end every time the two hours are equal.
This approach simplify things a bit.

Averaging Times using Javascript

I am building an app using Phonegap and JQuery.
The app stores ( using window.localStorage ) a set of times (no more than 10) in the format.
HH:MM:SS.mm
There are a number of 'Zero' times in the list eg '00:00:00.00' which iphonegap, javascript
eliminate using..
function removeA(arr){
var what, a= arguments, L= a.length, ax;
while(L> 1 && arr.length){
what= a[--L];
while((ax= arr.indexOf(what))!= -1){
arr.splice(ax, 1);
}
}
return arr;
}
scores.sort();
removeA(scores,'00:00:00.00');
so that i'm left with the fastest time first, and only the times that have a value.
I need to produce from the remaining values the average of those times.
eg: 00:00:03.00
00:00:05.00
00:00:02.00
00:00:06.00
= 00:00:04.00
thanks in advance :)

var times= [ '00:00:03.00', '00:00:05.00', '00:00:02.00', '00:00:06.00'],
date = 0,
result = '';
function offsetify(t){
return t < 10 ? '0' + t : t;
}
for(var x = 0; x < times.length; x++ ) {
var tarr = times[x].split(':');
date += new Date(0, 0, 0, tarr[0], tarr[1], tarr[2].split('.')[0], tarr[2].split('.')[1]).getTime();
}
var avg = new Date(date/times.length);
result = offsetify(avg.getHours()) + ':' + offsetify(avg.getMinutes()) + ':' + offsetify(avg.getSeconds()) + '.' + offsetify(avg.getMilliseconds());
DEMO

if you are going to also have millisecond values and you want to consider them, then convert the times into millisecond. Now, add them and divide them by the number of records. Else, convert everything to seconds and find the average - you get the answer in seconds, of course.
The conversion is quite simple if take little time to think over it. Here's how to convert.
To milliseconds:
function convertToMS(timeStr) { // timeStr in format 'HH:MM:SS.mm'
var I = parseInt; // for brevity
var t = timeStr,
h = I( t.substr(0,2) ),
m = I( t.substr(3,2) ),
s = I( t.substr(6,2) ),
ms = I( t.substr(9,2) );
return h * 3600000 + m * 60000 + s * 1000 + ms;
}
To seconds:
function convertToS(timeStr) { // timeStr in format 'HH:MM:SS[.mm]' -- .mm is ignored.
var I = parseInt; // for brevity
var t = timeStr,
h = I( t.substr(0,2) ),
m = I( t.substr(3,2) ),
s = I( t.substr(6,2) );
return h * 3600 + m * 60 + s;
}
After the conversion's done, add them up and find the average.
UPDATE:
To convert back to the format 'HH:MM:SS.mm', we change back the time into 'chunks' of hours, minutes, seconds and (if applicable) milliseconds.
function chunkifyFromSec(time) { // time in s
var t = "",
h = Math.floor(time / 3600),
m = Math.floor( (t - (h * 3600)) / 60 ),
s = t - (h * 3600) - (m * 60);
return {
HH: h, MM: m, SS: s, mm: 0
};
}
function chunkifyFromMS(time) { // time in ms
var t = "",
h = Math.floor(time / 3600000),
m = Math.floor( (t - (h * 3600000)) / 60000 ),
s = Math.floor( (t - (h * 3600000) - (m * 60000)) / 1000 ),
mm = t - (h * 3600000) - (m * 600000) - (s * 1000);
return {
HH: h, MM: m, SS: s, mm: mm
};
}
Then, we return the string in the format 'HH:MM:SS.mm' using this:
function toTimeStr(chunks) {
return
(chunks.HH < 0 ? '0' : '') + chunks.HH + ":"
+= (chunks.MM < 0 ? '0' : '') + chunks.MM + ":"
+= (chunks.SS < 0 ? '0' : '') + chunks.SS + "."
+= (chunks.mm < 0 ? '0' : '') + chunks.mm
}

I don't have much experience with Javascript so I might have some syntax errors but I think you could do something like
var i = 0;
var totalTime = 0.0;
for (i=0; i < scores.length; i++) {
var hours = parseFloat(scores[i].substring(0, 2)); //get numeric value for hours
var minutes = parseFloat(scores[i].substring(3,5)); //get numeric value for minutes
var seconds = parseFloat(scores[i].substring(6)); //get numeric for the seconds
var time = ((hours * 60) + minutes) * 60 + seconds; //60 minutes in an hour, 60 seconds in a minute
totalTime += time;
}
var avgTime = totalTime/scores.length;
var avgHours = Math.floor(avgTime / 3600); //60*60
var avgHoursStr = String(avgHours);
var avgMinutes = Math.floor((avgTime % 3600) / 60); //mod to get rid of the hours
var avgMinutesStr = String(avgMinutes);
var avgSeconds = avgTime - avgHours*3600 - avgMinutes*60; //get the remainder. Can't use mod due to decimal
var avgSeconds = String(avgSeconds);
//Concat strings. Add the ":" spacers. Where necessary, add leading 0
var avgStr = (avgHoursStr.length > 1 ? "" : "0") + avgHoursStr + ":" + (avgMinutesStr.length > 1 ? "" : "0") + avgMinuteStr + ":" + avgSecondsStr;
[EDIT - Thanks to Parth Thakkar for point out my problem]

To return the answer in milliseconds or seconds:
var times = ["00:00:03.00", "00:00:05.00", "00:00:02.00", "00:00:06.00"];
function averageTimes(times,unit) {
if (!times) {
return false;
}
else {
var totalMilliseconds = 0, hours, minutes, seconds, milliseconds, parts;
for (var i = 0, len = times.length; i < len; i++) {
parts = times[i].split(':');
hours = parseInt(parts[0], 10) * 3600000;
minutes = parseInt(parts[1], 10) * 60000;
seconds = parseInt(parts[2].split('.')[0], 10) * 1000;
milliseconds = parseInt(parts[2].split('.')[1], 10);
totalMilliseconds += (hours + minutes + seconds + milliseconds);
}
if (!unit || unit.toLowerCase() == 'ms'){
return totalMilliseconds/times.length + ' milliseconds';
}
else if (unit.toLowerCase() == 's') {
return (totalMilliseconds/1000)/times.length + ' seconds';
}
}
}
// parameters:
// times: an array of times in your supplied format, 'HH:MM:SS:mm',
// unit: a string ('ms' or 's'), denoting whether to return milliseconds or seconds.
var average = averageTimes(times,'s');
console.log(average);​
JS Fiddle demo.
References:
for(){/*...*/} loop.
parseInt().
split().
toLowerCase().

Objectify Javascript - How To Run A Javascript Function multiple Times

I have written a simple Javascript function (curteousy of codecall.net) that creates a count down timer.
It works fine when I run it, but I want to have more than one timer on the page.
When I place the function inside another div I get the numbers on the screen but only one of the last function actually counts down.
I have placed a link to the code here in JsFiddle which for one reason or another doesn't want to run it but it works. I just need multiple instances of it.
Any help is much appreciated, thanks in advance

The way you built it, all in the global namespace, makes it very difficult to incorporate two timers. Instead, you should just use a reusable object constructor. Demo here.
function Countdown(element, time) {
this.element = element;
this.time = time;
}
Countdown.time = function() {
return new Date().getTime() / 1000;
};
Countdown.formatRemaining = function(timeRemaining) {
function fillZero(n) {
return n < 10 ? '0' + n : n.toString();
}
var days = timeRemaining / 60 / 60 / 24 | 0;
var hours = timeRemaining / 60 / 60 | 0;
var minutes = timeRemaining / 60 | 0;
var seconds = timeRemaining | 0;
hours %= 24;
minutes %= 60;
seconds %= 60;
return days + ' day' + (days === 1 ? '' : 's') + ' ' + fillZero(hours) + ':' + fillZero(minutes) + ':' + fillZero(seconds);
};
Countdown.prototype.update = function() {
var timeRemaining = this.time + this.start - Countdown.time();
if(timeRemaining > 0) {
this.element.innerHTML = Countdown.formatRemaining(timeRemaining);
} else {
this.element.innerHTML = "Time's up!";
if(this.timer) {
clearInterval(this.timer);
this.timer = null;
}
}
};
Countdown.prototype.start = function() {
var countdown = this;
this.start = Countdown.time();
this.timer = setInterval(function() {
countdown.update();
}, 1000);
this.update();
};

how to create a javascript countdown which on refreshing continues counting

I try it with javascript and jquery but no idea how to do that. i wont to let the timer not begins on refreshing counting again. It´s same as an auction when he counting down 3,2 and on refreshing he don´t begins again it should continue count down where it last ended. And on other products it must count from 3 again. Have anyboy an idea?
Edit: because some users missunderstood what i am searching for.
my issue is that i don´t know how to save the time when someone refresh the page to continue to count it down. if someone refresh the site at 21sec and he or she have 30 secs to make there choice. and after refreshing the site, the counter will count at 21sec down and not started again by 30sec again.
no ajax.
When possible hardcoded.
And if not possible then the cookie variant.

You can set a name to your window on load of the page. Before setting the name check whether this window already has a name.
if it doesn't have a name, set a name to the window and start counting at 0 and save the count value in a cookie each time it increment.
if it does have a name(that means page is reloaded), read the count value from the cookie and do the increment and save to cookie.
EDIT: Example, Call initCount() function on body load. Use decrementAndSave function to decrement the value of the count and save it to cookie.
var count = 3;// 3 -> 2 -> 1
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
function initCount() {
if (window.name) {
count = getCookie("count_" + window.name);// to keep separate count cookies for each window
} else {
window.name = "w_" + (new Date().getTime());
count = 3;
setCookie("count_" + window.name, count, null);
}
}
function decrementAndSave() {
count--;
// separate cookie for each window or tab
setCookie("count_" + window.name, count, null);
}

It's not Perfect but I designed this script to do a 30min countdown and then to change some text during the last few seconds. The only issue with it is that when it gets to 1:00 it starts at 30:60 and I haven't figured out how to fix that yet. This may not work perfectly for what your looking for but it might put you on the right path.
<script>
//add leading zeros
setInterval(function() {
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
var x = document.getElementById("timer");
var d = new Date();
var s = (d.getSeconds());
var m = (d.getMinutes());
var a = addZero(30 - m);
var b = addZero(60 - m);
var c = (60 - s);
var z = "<span style='color:red;font-size:50px;'>" + "Break" + "</span>";
var v = "<span style='color:black;font-size:24px;'>" + "Break" + "</span>";
//Decide how much should be subtracted from the time
if (m > 30) {
y = b;
}
else if (m < 30) {
y = a;
}
//elements for changing text
if (y < 2 && c < 15) {
q = z;
}
else {
q = v;
}
var t = y + (":" + addZero(c) + " Till Station " + (q));
x.innerHTML = t;
}, 250);
</script>
<div align="center" id="timer" style='color:black;font-size:24px;' ></div>

If you have a countdown, then you must have some sort of end time defined. So instead of having a countdown and just subtracting 1 every second, try something like this:
var endTime = new Date(2011,11,13,0,0,0); // Midnight of December 13th 2011
var timer = setInterval(function() {
var now = new Date();
var timeleft = Math.max(0,Math.floor((endTime.getTime()-now.getTime())/1000));
var d, h, m, s;
s = timeleft % 60;
timeleft = Math.floor(timeleft/60);
m = timeleft % 60;
timeleft = Math.floor(timeleft/60);
h = timeleft % 24;
timeleft = Math.floor(timeleft/24);
d = timeleft;
document.getElementById('counter').innerHTML = "Time left: "+d+" days, "+h+" hours, "+m+" minutes, "+s+" seconds.";
if( timeleft == 0) clearInterval(timer);
},1000);

var interval = 90000; //90 secounds
function reset() {
localStorage.endTime = +new Date() + interval;
}
if (!localStorage.endTime) {
reset();
}
function millisToMinutesAndSeconds(millis) {
var minutes = Math.floor(millis / 60000);
var seconds = ((millis % 60000) / 1000).toFixed(0);
return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
}
setInterval(function () {
var remaining = localStorage.endTime - new Date();
if (remaining >= 0) {
document.getElementById("tooltip").innerText =
millisToMinutesAndSeconds(remaining);
} else {
reset();
}
}, 100);