I am making a Pomodoro clock. I took a clock object, added start, pause, resume functions. To run the clock repeatedly in the start function I added two variable s and b to keep the original time of session and break. So, in the pause function when I am deleting the timer the original time of session and break is getting deleted. so
resume function clock is staring from the beginning. Now, how to write the pause function in the right way to make the resume?
This is JSfiddle link. http://jsfiddle.net/sajibBD/f18nh323/3/
Thanks in advance!
var Clock = {
sessionSeconds: 0,
breakSeconds: 0,
start: function () {
var self = this;
var s = this.sessionSeconds + 1;
var b = this.breakSeconds + 1;
this.interval = setInterval(function () {
if (s > 0) {
s -= 1;
$('#state').text('Session');
$("#min").text(Math.floor(s / 60 % 60));
$("#sec").text(parseInt(s % 60));
} else if (b > 0) {
b -= 1;
$('#state').text('Break');
$("#min").text(Math.floor(b / 60 % 60));
$("#sec").text(parseInt(b % 60));
} else if (b === 0) {
s = self.sessionSeconds + 1;
b = self.breakSeconds + 1;
}
var min = $("#min").text();
var sec = $("#sec").text();
if (min.length === 1) {
$("#min").text('0' + min);
}
if (sec.length === 1) {
$("#sec").text('0' + sec);
}
}, 1000)
},
pause: function () {
clearInterval(this.interval);
delete this.interval;
},
resume: function () {
if (!this.interval) this.start();
},
}
Try this one:
http://jsfiddle.net/f18nh323/5/
var Clock = {
sessionSeconds: 0,
breakSeconds: 0,
start: function () {
var self = this;
var s = this.sessionSeconds + 1;
var b = this.breakSeconds + 1;
this.interval = setInterval(function () {
if (s > 0) {
s -= 1;
$('#state').text('Session');
$("#min").text(Math.floor(s / 60 % 60));
$("#sec").text(parseInt(s % 60));
} else if (b > 0) {
b -= 1;
$('#state').text('Break');
$("#min").text(Math.floor(b / 60 % 60));
$("#sec").text(parseInt(b % 60));
} else if (b === 0) {
s = self.sessionSeconds + 1;
b = self.breakSeconds + 1;
}
self.sessionSeconds = s;
var min = $("#min").text();
var sec = $("#sec").text();
if (min.length === 1) {
$("#min").text('0' + min);
}
if (sec.length === 1) {
$("#sec").text('0' + sec);
}
}, 1000)
},
pause: function () {
clearInterval(this.interval);
delete this.interval;
},
resume: function () {
if (!this.interval) this.start();
},
}
Related
I just started teaching myself front end coding and was wondering how to make a timer that when ends makes a button go to a random position across the screen. Here's the code I wrote(stole).
Here's the code I wrote(stole) but the timer doesn't restart when it ends. I need it to move the button after resetting the timer.
var h3 = document.getElementsByTagName("h3");
h3[0].innerHTML = "Countdown Timer With JS";
var sec = 5,
countDiv = document.getElementById("timer"),
secpass,
countDown = setInterval(function () {
"use strict";
secpass();
}, 1000);
function secpass() {
"use strict";
var min = Math.floor(sec / 60),
remSec = sec % 60;
if (remSec < 10) {
remSec = "0" + remSec;
}
if (min < 10) {
min = "0" + min;
}
countDiv.innerHTML = min + ":" + remSec;
if (sec > 0) {
sec = sec - 1;
} else {
clearInterval(countDown);
var b = document.getElementById("thing");
var i = Math.floor(Math.random() * 800) + 1;
var j = Math.floor(Math.random() * 600) + 1;
b.style.left = i + "px";
b.style.top = j + "px";
}
};
I have a timer function, I want to change the value of my variable after the timer reaches 0?
function countdown(minutes) {
var seconds = 60;
var mins = minutes
function tick() {
var counter = document.getElementById("timer");
current_minutes = mins - 1
seconds--;
counter.innerHTML =
current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
if (parseInt(current_minutes) === 0 && parseInt(seconds) === 00) {
sendAgain.show();
finalMin = parseInt(current_minutes);
finalSec = parseInt(seconds);
}
if (seconds > 0) {
timeoutHandle = setTimeout(tick, 1000);
} else {
if (mins > 1) {
// countdown(mins-1); never reach “00″ issue solved:Contributed by Victor Streithorst
setTimeout(function () { countdown(mins - 1); }, 1000);
}
}
}
tick();
}
variables :
let finalMin = null;
var finalSec = null;
I want the variables to be set after the following code is executed?
if (parseInt(current_minutes) === 0 && parseInt(seconds) === 00) {
sendAgain.show();
finalMin = parseInt(current_minutes);
finalSec = parseInt(seconds);
}
countdown(2);
console.log(finalMin); ===== show "0"
How to stop my milliseconds from counting on?
I have made a countdown of 5 seconds. But I can't stop my milliseconds at 0.
My seconds are stopping at 0 but my milliseconds aren't.
If I reach 0 than I see countdown done but the milliseconds are counting on, on the side of countdown done.. Can you guys help me out?
(() => {
let countdownEnded = false;
start(5); // seconds
})();
function start(inputTime) {
let startTime = Date.now();
intervalSeconds = setInterval(() => {
let currentTime = Date.now() - startTime;
if (inputTime < 1) {
stop();
} else {
updateDisplay(inputTime, currentTime);
updateMillis();
}
});
}
function stop() {
let countDivElement = document.getElementById("timer");
countDivElement.innerHTML = 'countdown done';
}
function updateDisplay(seconds, currentTime) {
let timeIncrement = Math.floor(currentTime / 1000);
updateTime(seconds - timeIncrement);
}
/**
* #method - updatesecondsond
* #summary - This updates the timer every secondsond
*/
function updateTime(seconds) {
let countDivElement = document.getElementById("timer");
let minutes = Math.floor(seconds / 60);
let remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = '0' + remainingSeconds;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
if (seconds > 0) {
seconds = seconds - 1;
} else {
clearInterval(intervalSeconds);
countdownEnded = true;
countDivElement.innerHTML = 'countdown done';
return null;
}
countDivElement.innerHTML = minutes + ":" + remainingSeconds + ":";
};
function updateMillis() {
let countMillsElement = document.getElementById('millis');
let counterMillis = 99;
let millis;
let intervalMillis = setInterval(() => {
if (counterMillis === 1) {
counterMillis = 99;
} else {
millis = counterMillis < 10 ? '0' + counterMillis : counterMillis;
};
countMillsElement.innerHTML = millis;
counterMillis--;
}, 10);
if (countdownEnded) {
return clearInterval(intervalMillis);
}
};
<span id="timer"></span><span id="millis"></span>
Here's your working code -
(() => {
let countdownEnded = false;
start(5); // seconds
})();
function start(inputTime) {
let startTime = Date.now();
intervalSeconds = setInterval(() => {
let currentTime = Date.now() - startTime;
if (inputTime < 1) {
stop();
} else {
updateDisplay(inputTime, currentTime);
updateMillis();
}
});
}
function stop() {
let countDivElement = document.getElementById("countdown"); // updated
countDivElement.innerHTML = 'countdown done';
countdownEnded = true; // updated
}
function updateDisplay(seconds, currentTime) {
let timeIncrement = Math.floor(currentTime / 1000);
updateTime(seconds - timeIncrement);
}
/**
* #method - updatesecondsond
* #summary - This updates the timer every secondsond
*/
function updateTime(seconds) {
let countDivElement = document.getElementById("timer");
let minutes = Math.floor(seconds / 60);
let remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = '0' + remainingSeconds;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
if (seconds > 0) {
seconds = seconds - 1;
} else {
clearInterval(intervalSeconds);
countdownEnded = true;
countDivElement.innerHTML = 'countdown done';
return null;
}
countDivElement.innerHTML = minutes + ":" + remainingSeconds + ":";
};
function updateMillis() {
let countMillsElement = document.getElementById('millis');
let counterMillis = 99;
let millis;
let intervalMillis = setInterval(() => {
if (counterMillis === 1) {
counterMillis = 99;
} else {
millis = counterMillis < 10 ? '0' + counterMillis : counterMillis;
};
countMillsElement.innerHTML = millis;
counterMillis--;
}, 10);
if (countdownEnded) {
stop(); // updated
return clearInterval(intervalMillis);
}
};
<div id="countdown"> <!-- Updated -->
<span id="timer"></span><span id="millis"></span>
</div>
Note: this is not an optimized code, it can be optimized further
Hi there I have a stopwatch embedded in my website, however I have a problem. When the seconds reach 60 therefore 1 minute they should reset to 00. However in this case while the minute will increase every 60 seconds the seconds will not reset to zero. Here is my code
<div id="output">00:00:00</div>
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>
<script type="text/javascript">
var time = 0;
var running = 0;
function startPause() {
if (running == 0) {
running = 1;
increment();
document.getElementById('startPause').innerHTML = 'Pause';
} else {
running = 0;
document.getElementById('startPause').innerHTML = 'Resume';
}
}
function reset() {
running = 0;
time = 0;
document.getElementById('output').innerHTML = '00:00:00';
document.getElementById('startPause').innerHTML = 'Start';
}
function increment() {
if (running == 1) {
setTimeout(function() {
time++;
var mins = Math.floor(time / 10 / 60);
if (mins <= 9) {
mins = '0' + mins;
}
var secs = Math.floor(time / 10);
if (secs <= 9) {
secs = '0' + secs;
}
var tenths = Math.floor(time % 10);
if (tenths <= 9) {
tenths = '0' + tenths;
}
document.getElementById('output').innerHTML =
mins + ':' + secs + ':' + tenths;
increment();
}, 100);
}
}
</script>
Any help much appreciated
You can use that code
<div id="output">00:00:00</div>
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>
<script type="text/javascript">
var time = 0;
var running = 0;
function startPause() {
if (running == 0) {
running = 1;
increment();
document.getElementById('startPause').innerHTML = 'Pause';
} else {
running = 0;
document.getElementById('startPause').innerHTML = 'Resume';
}
}
function reset() {
running = 0;
time = 0;
document.getElementById('output').innerHTML = '00:00:00';
document.getElementById('startPause').innerHTML = 'Start';
}
function increment() {
if (running == 1) {
setTimeout(function() {
time++;
var mins = Math.floor(time / 10 / 60);
if (mins <= 9) {
mins = '0' + mins;
}
var secs = Math.floor(time / 10);
if(secs >= 60)
{
secs = secs - ( mins * 60 );
}
if ((secs).toString().length === 1) {
secs = '0' + secs;
}
var tenths = Math.floor(time % 10);
if ((tenths).toString().length === 1) {
tenths = '0' + tenths;
}
document.getElementById('output').innerHTML =
mins + ':' + secs + ':' + tenths;
increment();
}, 100);
}
}
</script>
Just include a modulo by 60 to line number 36 to properly reset seconds to 0 (line commented to highlight):
<div id="output">00:00:00</div>
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>
<script type="text/javascript">
var time = 0;
var running = 0;
function startPause() {
if (running == 0) {
running = 1;
increment();
document.getElementById('startPause').innerHTML = 'Pause';
} else {
running = 0;
document.getElementById('startPause').innerHTML = 'Resume';
}
}
function reset() {
running = 0;
time = 0;
document.getElementById('output').innerHTML = '00:00:00';
document.getElementById('startPause').innerHTML = 'Start';
}
function increment() {
if (running == 1) {
setTimeout(function() {
time++;
var mins = Math.floor(time / 10 / 60);
if (mins <= 9) {
mins = '0' + mins;
}
var secs = Math.floor(time / 10) % 60; // <-- see here for change
if (secs <= 9) {
secs = '0' + secs;
}
var tenths = Math.floor(time % 10);
if (tenths <= 9) {
tenths = '0' + tenths;
}
document.getElementById('output').innerHTML =
mins + ':' + secs + ':' + tenths;
increment();
}, 100);
}
}
</script>
jQuery.noConflict();
(function($) {
$(function() {
function toTimeString(seconds) {
return (new Date(seconds * 1000)).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];
}
function startTimer() {
var dataStartElem = jQuery(this);
var dataStart = dataStartElem.attr('data-start');
if (dataStart == 'false') {
dataStartElem.attr('data-start', 'true');
var nextElem = dataStartElem.parent('td').next('.count');
var duration = dataStartElem.attr('data-value');
var a = duration.split(':');
var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
setInterval(function() {
seconds--;
if (seconds >= 0) {
nextElem.html(toTimeString(seconds));
dataStartElem.attr('data-start', 'false');
}
if (seconds === 0) {
alert('time out');
clearInterval(seconds);
}
}, 1000);
}
}
jQuery('.timer').on('click', startTimer);
$('table').stacktable();
});
})(jQuery);
fiddle demo https://jsfiddle.net/arra6j6h/6/
javascript timer in the table does not work and time does not appear when responsive, but all normal when not responsive