Adapting a stopwatch script to return minutes and seconds elapsed

Question

I have found a script that counts seconds and minutes. I would like get the minutes and seconds value and store it in a variable when I clicked a stop button, how should I do it?

var initialTime = Date.now();
window.setInterval(checkTime, 100);


function checkTime( miliseconds) {
  var timeDifference = Date.now() - initialTime;
  var formatted = convertTime(timeDifference);

  if(seconds > 30 || minutes > 0) {
    $('#timer').html('<span style="color: red">' + minutes + ': ' + seconds + '</span>'); 
  } else {
    $('#timer').html('<span style="color: black">' + minutes + ': ' + seconds + '</span>');
  }

}

function convertTime(miliseconds) {
  totalSeconds = Math.floor(miliseconds/1000);
  minutes = Math.floor(totalSeconds/60);
  seconds = totalSeconds - minutes * 60;   

  return minutes,seconds; 
}

i mean i will get the value of minutes and seconds when i clicked the stop button. — anonymous, Mar 09 '16 at 17:22
The problem isn't clear here. If you want them in the opposite order, why not reverse them? Are you having a problem [returning multiple values](http://stackoverflow.com/questions/2917175/return-multiple-values-in-javascript)? — tadman, Mar 09 '16 at 17:24

Adam Konieska · Answer 1 · 2016-03-09T17:46:00.153

You can return valued from your function like this:

HTML

<button id="stop">Stop</button>
<button id="start" disabled>Start</button>

<div id="timer"></div>
<div id="output"></div>

JavaScript

var initialTime = Date.now();
var timer = window.setInterval(checkTime, 100);


function checkTime() {
  var timeDifference = Date.now() - initialTime;

  var formatted = convertTime(timeDifference);

  if(formatted.seconds > 30 || formatted.minutes > 0) {
    $('#timer').html('<span style="color: red">' + formatted.minutes + ': ' + formatted.seconds + '</span>'); 
  } else {
    $('#timer').html('<span style="color: black">' + formatted.minutes + ': ' + formatted.seconds + '</span>');
  }
    return formatted;
}

function convertTime(miliseconds) {
  var totalSeconds = Math.floor(miliseconds/1000);
  var minutes = Math.floor(totalSeconds/60);
  var seconds = totalSeconds - minutes * 60;   

  return {'seconds': seconds,'minutes':minutes}; 
}

function toggle() {
  $('#start, #stop').prop('disabled', function(i, v) { return !v; });
}

$('#stop').on('click',function() {
  clearInterval(timer);
  toggle();
  var t = checkTime();
  $('#output').html('Time was stopped at: '+t.minutes + ':' + t.seconds)
})


$('#start').on('click',function() {
    initialTime = Date.now();
  timer = window.setInterval(checkTime, 100);
  toggle();
})

You can see it working here: https://jsfiddle.net/jqy0ehbp/3/

As a note, it's not necessary to quote keys like `'seconds'`. — tadman, Mar 09 '16 at 17:25
what if you will have a button stop, and when you click that button the timer will stop, how will you do it? thank you — anonymous, Mar 09 '16 at 17:48
@anonymous exactly is *'not working'*? The JS fiddle already has a stop button that stops the `setInterval()` timer and updates the DOM with the minutes and seconds. — Adam Konieska, Mar 09 '16 at 18:50

score 0 · Answer 2 · answered Mar 09 '16 at 17:26

Make a button and attach an event on it. Then clear the interval when the button is clicked:

 $("button").on('click', function() {
        window.clearInterval(interval);
 });

Demo: https://jsfiddle.net/76t086c2/

You can either get the value from the div#timer or set the minutes/seconds in an input and when the button is clicked, get the value.

score 0 · Answer 3 · answered Mar 09 '16 at 17:57

Ok, you have 2 dates.

get the difference in miliseconds and format the result.

 var initialTime = new Date(2016, 2, 09, 10, 00, 0);
 var now = new Date(Date.now());
 var dateDifference = (now - initialTime);

 console.log('Diff miliseconds = ', dateDifference);
 console.log('Result: ', FormatMiliseconds(dateDifference));

You can view an example in this fiddle:

jsfiddle

Adapting a stopwatch script to return minutes and seconds elapsed

3 Answers3