Forums

brianatlarge

So I tried to put together a little timer that counts up minutes and seconds, but I can't seem to get it to work.

<html>
<head>
<title>Timer</title>
<script type=\"text/javascript\">
	var seconds = 0;
	var minutes = 0;

	function countSecs(seconds) {
		seconds++;
	}

	function countMins(minutes) {
		minutes++;
	}

	function displayTime(seconds, minutes) {
		document.getElementById(\"timeBox\").innerHTML = \"Time \" + seconds + \":\" + minutes;
	}

	action = window.setInterval(\"countSecs(seconds)\",1000);
	action = window.setInterval(\"countMins(minutes)\",60000);
</script>
</head>
<body>

<div id=\"timeBox\"></div>
</body>
</html>

I'm probably going about this the wrong way, but hopefully, someone can point me in the right direction.

Thanks.

brianatlarge

Ok, noob mistake. I added onload = "displayTime()" to the opening body tag, and now my output now says "Time 1:1" which tells me there's another problem besides the fact that it's not working.

I need the minutes to only start counting after seconds reach more than 59 seconds. My code now looks like this:

<html>
<head>
<title>Timer</title>
<script type=\"text/javascript\">
	var seconds = 0;
	var minutes = 0;

	function countSecs() {
		seconds++;
	}
if (seconds > 59) {
	function countMins() {
		minutes++;
	}
}

	function displayTime() {
		document.getElementById(\"timeBox\").innerHTML = \"Time \" + seconds + \":\" + minutes;
	}
	
	action = window.setInterval(countSecs(),1000);
	action = window.setInterval(countMins(),60000);
	
</script>
</head>
<body onload = \"displayTime()\">

<div id=\"timeBox\"></div>
</body>
</html>

But my output is still Time 1:1.

brianatlarge

Ok, I got it to work:

<html>
<head>
<title>Timer</title>
<script type=\"text/javascript\">
	var seconds = 0;
	var minutes = 0;
	
function zeroPad(time) {
	var numZeropad = time + '';
	while(numZeropad.length < 2) {
		numZeropad = \"0\" + numZeropad;
		}
	return numZeropad;
	}

	function countSecs() {
    	seconds++;

		if (seconds > 59) {
    		 minutes++;
    		 seconds = 0;
  			}
		document.getElementById(\"timeBox\").innerHTML = \"Time \" + zeroPad(minutes) + \":\" + zeroPad(seconds);
 		}

 function startTimer() {
     action = window.setInterval(countSecs,1000);
 }

</script>
</head>
<body>
<button onclick = \"startTimer()\">Start</button>
<div id=\"timeBox\">Time 00:00</div>
</body>
</html>

chriscoyier

Thanks Brian! Sorry we couldn't have been more helpful but I'm glad you got it working.

Stack

You can do the whole thing with one function and slightly simpler, just dont try to think to much into it.

<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
<head>
    <title>Test</title>
    <script type=\"text/javascript\">
var sec = 0;
var min = 0;
function stopwatch() {
		sec++;
		if (sec == 60) {
			sec = 0;
			min += 1;
		}
		totalTime = ((min<=9) ? \"0\" + min : min) + \" : \" + ((sec<=9) ? \"0\" + sec : sec);
		document.getElementById(\"timer\").innerHTML = totalTime;
		start = setTimeout(\"stopwatch()\", 1000);
	}
    </script>
</head>
<body onload=\"stopwatch()\">
  <div id=\"timer\"></div>
</body>
</html>

can also add one more section to get MS and change the timeout speed:


<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
<head>
    <title>Test</title>
    <script type=\"text/javascript\">
var ms = 0;
var sec = 0;
var min = 0;
function stopwatch() {
		ms++;
		if (ms == 10) {
			ms = 0;
			sec += 1;
		}
		if (sec == 60) {
			sec = 0;
			min += 1;
		}
		totalTime = ((min<=9) ? \"0\" + min : min) + \" : \" + ((sec<=9) ? \"0\" + sec : sec) + \" : \" + ms + \"0\";
		document.getElementById(\"timer\").innerHTML = totalTime;
		start = setTimeout(\"stopwatch()\", 100);
	}
    </script>
</head>
<body onload=\"stopwatch()\">
  <div id=\"timer\"></div>
</body>
</html>

CJGREENGUY

Im trying to find a timer that counts up and reminds you when some one is not active for 21 days. Is there anybody who can help locate one?

treehouse : what would you like to learn today?

Forums

Javascript count-up timer [RESOLVED]