In my project i am using timer which runs, when start button is clicked and stop when end is clicked
The problem is by mistake when start button is clicked double or more than once ..time takes +1000 millsec extra and start running faster ..this should no happen
My javascript is..
<script type="text/javascript">
var sec = 0;
var min = 0;
var hour = 0;
function stopwatch(text) {
sec++;
if (sec == 60) {
sec = 0;
min = min + 1;
} else {
min = min;
}
if (min == 60) {
min = 0;
hour += 1;
}
if (sec<=9) { sec = "0" + sec; }
document.getElementById("starttime").innerHTML = ((hour<=9) ? "0"+hour : hour) + " : " + ((min<=9) ? "0" + min : min) + " : " + sec;
SD=window.setTimeout("stopwatch();", 1000);
}
function f3() {
clearTimeout(SD);
}
</script>
<form name="clock">
<div id="starttime" style="font-size:large; "></div>
<input type="button" name="theButton" id="Start" value="Start" onClick="stopwatch(this.value);" />
<input type="button" name="theButton" id="end" value="Stop" onClick="f3();" />
</form>
I have tried something like this..
if (document.clock.theButton.value == "Start") {
window.clearTimeout(SD);
return true; }`
.... but its not working
Don't call stopwatch() directly.
Call something else which checks SDs state, and then calls stopwatch().
<input type="button" name="theButton" id="Start" value="Start" onClick="startStopWatch();" />
var sec = 0;
var min = 0;
var hour = 0;
var SD;
function startStopWatch(){
if (!SD){
stopwatch();
}
}
function stopwatch() {
sec++;
if (sec == 60) {
sec = 0;
min = min + 1; }
else {
min = min; }
if (min == 60) {
min = 0;
hour += 1; }
if (sec<=9) { sec = "0" + sec; }
document.getElementById("starttime").innerHTML = ((hour<=9) ? "0"+hour : hour) + " : " + ((min<=9) ? "0" + min : min) + " : " + sec;
SD=window.setTimeout(stopwatch, 1000);
}
function f3() {
if (SD){
clearTimeout(SD);
}
}
Live Demo: http://jsfiddle.net/uJPff/2
You can do something like this:
var SD;
function stopwatch(text) {
if (SD && text) {
return;
}
....
}
function f3() {
clearTimeout(SD);
SD = false;
sec = 0;
min = 0;
hour = 0;
}
I.e. you can check, if the timeout is already running when the button is clicked and cancel the execution, if needed.
You can test it at updated jsFiddle.
Related
I'm building a memory card game.
I want to show the time from the moment the user pressed on the first card till they win.
i dont understand how to make the stopwatch to continue counting while the player plays without it getting stuck or not refreshing the display enough.
HTML:
<h4 class="stopwatch">00:00:00</h4>
JavaScript:
while (TOTAL_COUPLES_COUNT !== flippedCouplesCount) {
sec++;
if (sec == 60) {
min = min + 1;
sec = 0;
}
if (min == 60) {
hr = hr + 1;
min = 0;
sec = 0;
}
elStopwatch.innerHTML = hr + ":" + min + ":" + sec;
var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);
function setTime() {
++totalSeconds;
secondsLabel.innerHTML = pad(totalSeconds % 60);
minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}
function pad(val) {
var valString = val + "";
if (valString.length < 2) {
return "0" + valString;
} else {
return valString;
}
}
<label id="minutes">00</label>:<label id="seconds">00</label>
I am a beginner trying to learn JavaScript. My project is to make a stopwatch with stop, reset, and go.
For some reason, I can't figure out how to get clearInterval() to stop the goFunction. Any help would be appreciated.
var min = 00
var sec = 00
var ms = 00
function goFunction() {
var swTimer = setInterval(addTime, 10)
function addTime() {
if (ms < 99) {
ms++
} else {
sec += 1
ms = 0
}
if (sec > 59) {
min += 1
sec = 0
}
msShow = (ms < 10) ? "0" + ms : ms
secShow = (sec < 10) ? "0" + sec : sec
minShow = (min < 10) ? "0" + min : min
document.getElementById("numbers").innerHTML = minShow + ":" + secShow + ":" + msShow
}
}
function stopFunction() {
document.getElementById("numbers").style.color = "red"
clearInterval(swTimer);
}
<div class="controls">
<button onclick="goFunction()" class="button button1">GO</button>
<button onclick="resetFunction()" class="button button2">RESET</button>
<button onclick="stopFunction()" class="button button3">STOP</button>
<div class="display" id="numbers">00:00:00</div>
</div>
Declare your swTimer outside goFunction
<div class = "controls">
<button onclick="goFunction()" class="button button1">GO</button>
<button onclick="resetFunction()" class="button button2">RESET</button>
<button onclick="stopFunction()" class="button button3">STOP</button>
<div class="display" id = "numbers">00:00:00</div>
</div>
<script>
var min = 00
var sec = 00
var ms = 00
var swTimer
function goFunction() {
swTimer= setInterval(addTime, 10)
function addTime() {
if (ms < 99) {
ms++
} else {
sec+=1
ms = 0
}
if (sec >59 ) {
min+=1
sec=0
}
msShow = (ms<10) ? "0" + ms : ms
secShow = (sec<10) ? "0" + sec : sec
minShow = (min<10) ? "0" + min : min
document.getElementById("numbers").innerHTML = minShow + ":" + secShow + ":" + msShow
}
}
function stopFunction() {
document.getElementById("numbers").style.color = "red"
clearInterval(swTimer);
}
</script>
Because swTimer is not global = it's declared and scoped at goFunction and is not defined/accessible in stopFunction.
Set it outside the functions (my opinion: before - where min, sec and ms are declared).
The problem is that swTimer is inside the goFunction block, declare swTimer as a global variable.
var min = 0;
var sec = 0;
var ms = 0;
function addTime() {
if (ms < 99) {
ms++
} else {
sec+=1
ms = 0
}
if (sec >59 ) {
min+=1
sec=0
}
msShow = (ms<10) ? "0" + ms : ms
secShow = (sec<10) ? "0" + sec : sec
minShow = (min<10) ? "0" + min : min
document.getElementById("numbers").textContent = minShow + ":" + secShow + ":" + msShow
}
var swTimer = setInterval(addTime, 1000);
function stopFunction() {
document.getElementById("numbers").style.color = "red"
clearInterval(swTimer);
}
window.onload = addTime();
<p id="numbers"></p>
<button onclick="stopFunction()">Go!</button>
The interval won't get cleared because it is locally scoped. You defined in a function which means it cannot be globally accessed in another function a solution would be
var min = 00
var sec = 00
var ms = 00
function addTime() {
if (ms < 99) {
ms++
} else {
sec+=1
ms = 0
}
if (sec >59 ) {
min+=1
sec=0
}
msShow = (ms<10) ? "0" + ms : ms
secShow = (sec<10) ? "0" + sec : sec
minShow = (min<10) ? "0" + min : min
document.getElementById("numbers").innerHTML = minShow + ":" + secShow + ":" + msShow
}
var swTimer
function goFunction() {
swTimer = setInterval(addTime, 10)
}
function stopFunction() {
document.getElementById("numbers").style.color = "red"
clearInterval(swTimer);
}
<div class = "controls">
<button onclick="goFunction()" class="button button1">GO</button>
<button onclick="resetFunction()" class="button button2">RESET</button>
<button onclick="stopFunction()" class="button button3">STOP</button>
<div class="display" id = "numbers">00:00:00</div>
</div>
I'm working with the following script for a count-up timer. It has no problem counting up in seconds but I'm having trouble getting it to display minutes. For example 1:35 (one minute and 35 seconds)
Any suggestions would be appreciated. Thanks in advance.
var clicked = false;
var sec = 00;
var min = 00;
function startClock() {
if (clicked === false) {
clock = setInterval("stopWatch()", 1000);
clicked = true;
} else if (clicked === true) {}
}
function stopWatch() {
sec++;
document.getElementById("timer").innerHTML = sec;
}
function stopClock() {
window.clearInterval(clock);
sec = 0;
document.getElementById("timer").innerHTML = 0;
clicked = false;
}
var min = 0;
var second = 00;
var zeroPlaceholder = 0;
var counterId = setInterval(function() {
countUp();
}, 1000);
function countUp() {
second++;
if (second == 59) {
second = 00;
min = min + 1;
}
if (second == 10) {
zeroPlaceholder = '';
} else
if (second == 00) {
zeroPlaceholder = 0;
}
document.getElementById("count-up").innerText = min + ':' + zeroPlaceholder + second;
}
<div class="timer">
<div id="timer">0:00</div>
<input type="button" id="btnParentButton" value="start timer" onClick="startClock()"/>
Hope this can help you.
The better way is to have your minutes and secs as global variable and simple function for each button
EDIT
Update code using pure JS
var min = 0;
var sec = 0;
var timer = undefined;
var isStarted = false;
function startcount(){
sec++;
if(sec==60)
{
sec=0;
min++;
}
updateClock();
}
function updateClock(){
var displaySec = sec < 10 ? "0" + sec : sec;
var displayMin = min < 10 ? "0" + min : min;
document.getElementById("count").innerHTML = displayMin + " : " + displaySec;
}
function start(){
if(timer == undefined || !isStarted){
timer = setInterval(function(){
startcount();
},1000);
}
isStarted = true;
}
function stop(){
isStarted = false;
clearInterval(timer);
}
function reset(){
stop();
min=sec=0;
timer = undefined;
updateClock();
}
updateClock();
<div id="count"></div>
<button class="start" onClick="start()">Start</button>
<button class="stop" onClick="stop()">Stop</button>
<button class="reset" onClick="reset()">Reset</button>
Put count-up instead id=timer
var clicked = false;
var sec = 00;
var min = 00;
function startClock() {
if (clicked === false) {
clock = setInterval("stopWatch()", 1000);
clicked = true;
} else if (clicked === true) {}
}
function stopWatch() {
sec++;
document.getElementById("timer").innerHTML = sec;
}
function stopClock() {
window.clearInterval(clock);
sec = 0;
document.getElementById("timer").innerHTML = 0;
clicked = false;
}
var min = 0;
var second = 00;
var zeroPlaceholder = 0;
var counterId = setInterval(function() {
countUp();
}, 1000);
function countUp() {
second++;
if (second == 59) {
second = 00;
min = min + 1;
}
if (second == 10) {
zeroPlaceholder = '';
} else
if (second == 00) {
zeroPlaceholder = 0;
}
document.getElementById("count-up").innerText = min + ':' + zeroPlaceholder + second;
}
<div class="timer">
<div id="count-up">0:00</div>
<input type="button" id="btnParentButton" value="start timer" onClick="startClock()"/>
I found the code which is can run my stopwatch. but iwant to follow denmark country timezone to run my code. how to d
<script type="text/javascript">
ElapsedTimeLogger = function(dateElementId, elapsedElementId, hiden, interval) {
var container = $(elapsedElementId);
var time = parseDate($(dateElementId).val());
var interval = interval;
var timer;
function parseDate(dateString) {
var date = new Date(dateString);
return date.getTime();
}
function update() {
var systemTime = new Date().getTime();
elapsedTime = systemTime - time;
container.html(prettyPrintTime(Math.floor(elapsedTime / 1000)));
$(hiden).val(prettyPrintTime(Math.floor(elapsedTime / 1000)));
}
function prettyPrintTime(numSeconds) {
var hours = Math.floor(numSeconds / 3600);
var minutes = Math.floor((numSeconds - (hours * 3600)) / 60);
var seconds = numSeconds - (hours * 3600) - (minutes * 60);
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
var time = hours + ":" + minutes + ":" + seconds;
return time;
}
this.start = function() {
timer = setInterval(function() {update()}, interval * 1000);
}
this.stop = function() {
clearTimeout(timer);
}
}
$(document).ready(function () {
var timeLogger = new ElapsedTimeLogger("#date", "#elapsed","#stoppedid", 1);
timeLogger.start();
$("#confirm").click(function() { //Stop timer upon clicking the Confirm Button
timeLogger.stop();
});
});
</script>
Thank you in advance.
I cant post another question thats why i need to edit may other questions
remove disabled property of input[name=stwa] and add readonly property for there
Use navigator.cookie to save time on javascript
Here is your solutions
if(localStorage.getItem("sec"))
{
var sec = localStorage.getItem("sec");
var min = localStorage.getItem("min");
var hour = localStorage.getItem("hour");
stopwatch("Start");
}else{
var sec = 0;
var min = 0;
var hour = 0;
}
function stopwatch(text) {
sec++;
if (sec == 60) {
sec = 0;
min = min + 1; }
else {
min = min; }
if (min == 60) {
min = 0;
hour += 1; }
localStorage.setItem("sec", sec);
localStorage.setItem("min", min);
localStorage.setItem("hour", hour);
if (sec<=9) { sec = "0" + sec; }
document.clock.stwa.value = ((hour<=9) ? "0"+hour : hour) + " : " + ((min<=9) ? "0" + min : min) + " : " + sec;
if (text == "Start") { document.clock.theButton.value = "Start "; }
if (text == "Stop ") { document.clock.theButton.value = "Stop"; }
if (document.clock.theButton.value == "Start") {
window.clearTimeout(SD);
return true; }
SD=window.setTimeout("stopwatch();", 1000);
}
function stop() {
x.stop();
document.getElementById('counter').value = formatTime(x.time());
clearInterval(clocktimer);
localStorage.clear();
}
<form name="clock" action="save_time_log.php" method="post">
<div class="form-group">
<input type="text" class="form-control time_tracker" disabled name="stwa" placeholder="00:00:00">
</div>
<input type="button" name="theButton" onClick="stopwatch(this.value);" class="btn btn-block btn-default btn-flat" value="Start" />
<input type="submit" name="stops" value="Stop" onClick="stop();" class="btn btn-block btn-default btn-flat"/>
</form>
Reset Button is not resetting but it is working as stop button can anybody help me,whats wrong with this code.
<!DOCTYPE html>
<html>
<head>
<title>Timer</title>
<script>
var sec = 0;
var min = 0;
var hour = 0;
var theResult = "";
function WatchOperations(key) {
sec++;
if (sec == 60) {
sec = 0;
min = min + 1; }
else {
min = min; }
if (min == 60) {
min = 0;
hour += 1;
}
if (sec<=9) {
sec = "0" + sec;
}
document.getElementById("stopwatch").value = ((hour<=9) ? "0"+hour : hour) + " : " + ((min<=9) ? "0" + min : min) + " : " + sec;
if (key == "Start") {
document.getElementById("startButton").value = "Stop ";
}
if (key == "Stop ") {
document.getElementById("startButton").value = "Start";
sec = sec-1; sec--;
}
if (document.getElementById("startButton").value == "Start") {
return true;
}
SD=window.setTimeout("WatchOperations();", 1000);
theResult = document.getElementById("stopwatch").value;
}
function resetIt() {
sec = 0;
min = 0;
hour = 0;
if (document.getElementById("startButton").value == "Stop ") {
document.getElementById("startButton").value = "Start";
window.clearTimeout(SD);
}
}
</script>
</head>
<body>
<table>
<tr><td align="right"><input type="text" size="12" id="stopwatch" value="00 : 00 : 00" style="text-align:center" />
</td>
</tr>
<tr><td><input type="button" id="startButton" value="Start" onclick="WatchOperations(this.value);"/></td>
<td><input type="button" id="resetButton" value="Reset" onclick="resetIt()"></td>
</tr>
</table>
</body>
</html>
add this line document.getElementById("stopwatch").value = "00 : 00 : 00"; in this method resetIt
to reset stopwatch
function resetIt() {
sec = 0;
min = 0;
hour = 0;
if (document.getElementById("startButton").value == "Stop ") {
document.getElementById("startButton").value = "Start";
document.getElementById("stopwatch").value = "00 : 00 : 00";
window.clearTimeout(SD);
}
}
if you dont want to stop the watch you need to comment "window.clearTimeout(SD);" this line in this method
First you need to declare clearTimeout() ID which is SD globally. As you're using it in more than one function:
Second You have to set stopwatch to default value which is "00 : 00 : 00" when you click on reset.
function resetIt() {
sec = 0;
min = 0;
hour = 0;
if (document.getElementById("startButton").value == "Stop ") {
document.getElementById("startButton").value = "Start";
window.clearTimeout(SD);
document.getElementById("stopwatch").value = "00 : 00 : 00"; // Changed
}
}
Fiddle Demo
I would say to reset the stopwatch textbox value at the outside of the if condition block which will ensure the reset button works even when the Stop button is clicked.
function resetIt() {
sec = 0;
min = 0;
hour = 0;
if (document.getElementById("startButton").value == "Stop ") {
document.getElementById("startButton").value = "Start";
window.clearTimeout(SD);
}
document.getElementById("stopwatch").value = "00 : 00 : 00";
}
Also, I see you used sec--; when the button is Stop. I don't think that is required here.
Remove SD from all of the code where ever you used,without that also program will run perfectly.