I created a timer in procedural which works ....
```let startMinutes = 1;
let time = startMinutes * 60;
let btnTimer = document.getElementById('btn-signer');
const countdownElt = document.getElementById('countdown');
let interval = setInterval(updateCountDown, 1000);
function startTimer() {
interval = setInterval(updateCountDown, 1000);
}
btnTimer.addEventListener("click", function () {
startTimer()
});
function updateCountDown() {
const minutes = Math.floor(time / 60); //nombre entier
let seconds = time % 60; //reste division
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownElt.innerHTML = `Temps restant : ${minutes}min ${seconds}sec`;
time--;
if (minutes <= 0 && seconds <= 0) {
clearInterval(interval);
countdownElt.innerHTML = "Temps écoulé, veuillez réserver à nouveau.";```
I have to transform it in POO but it doesn't works, I thank that maybe I need to create parameters in consctructor but I don't know if it's really necessary and I don't know which parameters to use..
``` class countDown {
constructor() {
this.btnTimer = document.getElementById('btn-signer');
this.countdownElt = document.getElementById('countdown');
this.startMinutes = 1;
this.timeSec = this.startMinutes * 60;
this.interval = setInterval(this.updateCountDown, 1000);
this.btnTimer.addEventListener('click', () => this.startTimer());
this.updateCountDown();
}
startTimer() {
this.interval = setInterval(this.updateCountDown, 1000);
//console.log(this.interval);
}
updateCountDown() {
let minutes = Math.floor(this.timeSec / 60); //nombre entier
let seconds = this.timeSec % 60; //reste division
seconds = seconds < 10 ? '0' + seconds : seconds;
document.getElementById('countdown').innerHTML = `Temps restant : ${minutes}min ${seconds}sec`;
this.timeSec--;
if (minutes <= 0 && seconds <= 0) {
clearInterval(this.interval);
this.countdownElt.innerHTML = "Temps écoulé, veuillez réserver à nouveau.";
}
}
}```
Thanks.
Related
I have a timer and a time. The time format is like the currentTime variable in my code. I want to get the currentTime time and add +1 to it every second keeping the same time format. Also I would like to subtract the currentTime + 1 - the total hours but keeping it real time with setInterval. Hope I am clear about my questions. Thanks.
HTML
<button id="start">START</button>
<button id="pause">PAUSE</button>
<div id="output"></div>
Javscript
const startTimeButton = document.querySelector("#start")
const pauseTimeButton = document.querySelector("#pause")
const output = document.querySelector("#output");
let currentTime = "12: 42: 17";
let totalHours = 30;
let seconds = 0;
let interval = null;
const timer = () => {
seconds++;
// Get hours
let hours = Math.floor(seconds / 3600);
// Get minutes
let minutes = Math.floor((seconds - hours * 3600) / 60);
// Get seconds
let secs = Math.floor(seconds % 60);
if (hours < 10) {
hours = `0${hours}`;
}
if (minutes < 10) {
minutes = `0${minutes}`;
}
if (secs < 10) {
secs = `0${secs}`;
}
return `${hours}:${minutes}:${secs}`;
};
startTimeButton.addEventListener("click", () => {
pauseTimeButton.style.display = "flex";
startTimeButton.style.display = "none";
console.log("START TIME CLICKED");
if (interval) {
return;
}
interval = setInterval(timer, 1000);
});
pauseTimeButton.addEventListener("click", () => {
pauseTimeButton.style.display = "none";
startTimeButton.style.display = "flex";
console.log("PAUSE TIME CLICKED");
clearInterval(interval);
interval = null;
});
// Here is an example of what I would like to achive
// currentTime + 1 (each second)
// output.innerHTML = (parseInt(currentTime) + 1) - totalHours;
I am trying to find a way to restart my countdown timer at 2:00 again when it reaches 0:00. I don't know if I'm wrong, but it won't work.
const startingMinutes = 2;
let time = startingMinutes * 60;
const countdownEl = document.getElementById('countdown');
setInterval(updateCountdown, 1000)
function updateCountdown(){
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = `${minutes}:${seconds}`;
time--;
time = time < 0 ? 0 : time;
if (time == 0) {
fn();
setInterval(updateCountdown, 1000)
return;
}
}
<p id="countdown">2:00</p>
Reset the time once it hits zero, and you don't need to call setInterval again. Also, by calling updateCountdown() directly we can avoid hardcoding 2:00 in the HTML.
const startingMinutes = 2;
let time = startingMinutes * 60;
const countdownEl = document.getElementById('countdown');
function updateCountdown(){
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = `${minutes}:${seconds}`;
time--;
time = time < 0 ? 0 : time;
if (time == 0) {
// fn(); <-- not sure what this is supposed to do, so I commented it out
time = startingMinutes * 60; // reset counter
}
}
setInterval(updateCountdown, 1000);
updateCountdown();
<p id="countdown"></p>
Just reset your time:
Sample
var startingMinutes = 2;
let time = startingMinutes * 60;
const countdownEl = document.getElementById('countdown');
setInterval(updateCountdown, 1000)
function updateCountdown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
countdownEl.innerHTML = `${minutes}:${seconds}`;
time--;
time = time < 0 ? 0 : time;
if (time == 0) {
fn();
time = startingMinutes * 60;
return;
}
function fn() {
console.log("timer reset");
}
}
<p id="countdown">2:00</p>
Slightly different methodology.
window.addEventListener('load', ticker(120, countdown('countdown')))
function countdown(target) {
let counter = document.getElementById(target)
return (now) => {
let minutes = Math.floor(now / 60)
let seconds = Math.round((now / 60) % 1 * 60)
seconds = seconds >= 0 && seconds < 10 ? seconds = '0'+seconds : seconds
counter.textContent = minutes+':'+seconds
}
}
function ticker(seconds, tick, step = 1000) {
let now = seconds;
(function next() {
tick(now)
now = now - 1 || seconds
setTimeout(next, step)
})()
}
<p id="countdown">Loading...</p>
I am trying to start the Javascript countdown using following Javascript code. Here it's counting from 5 - 0.
Now I want when It's 0 then I will call an Ajax request (I know how to do it). But for now, I set it alert message that your session ends.
It continuously showing me the alert message But it's should be once!
Here is the JS code:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if(timer !== 0 ) {
--timer;
} else if( timer == 0 ) {
alert('Your time has been completed.');
}
}, 1000);
}
window.onload = function () {
var seconds = 5,
display = document.querySelector('#time');
startTimer(seconds, display);
};
You need to assign the interval to a variable, so that you can then clear the interval after the final alert so that it doesn't run anymore:
function startTimer(duration, display) {
let timer = duration;
const interval = setInterval(function() {
let minutes = parseInt(timer / 60, 10)
let seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (timer !== 0) {
--timer;
} else if (timer == 0) {
alert('Your time has been completed.');
clearInterval(interval);
}
}, 1000);
}
window.onload = function() {
var seconds = 5,
display = document.querySelector('#time');
startTimer(seconds, display);
};
<div id="time"></div>
you need to make use of clearInterval() method as below
var myVar = setInterval(function(){ myTimer() }, 1000);
myTimer() {
if(conditionMet)
clearInterval(myVar);
}
or just for info you can make use of interval of react js
import { interval } from 'rxjs/observable/interval';
//emit value in sequence every 1 second
const source = interval(1000);
//output: 0,1,2,3,4,5....
const subscribe = source.subscribe(val => {
if(conditionmet)
source.unsubscribe();
console.log(val);
});
ES5
function startTimer(duration, display) {
var timer = duration;
var interval = setInterval(function() {
var minutes = parseInt(timer / 60, 10)
var seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (timer !== 0) {
--timer;
} else if (timer == 0) {
alert('Your time has been completed.');
clearInterval(interval);
}
}, 1000);
}
window.onload = function() {
var seconds = 5,
display = document.querySelector('#time');
startTimer(seconds, display);
};
I'm making a riddle where people have 45 minutes to find the solution, but I want the timer to go down five minutes when they answer incorrectly to prevent them from just guessing the answer. This is what I have for the timer:
function startTimer(duration, display) {
var start = Date.now(),
diff,
minutes,
seconds;
function timer() {
diff = duration - (((Date.now() - start) / 1000) | 0);
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
var cat1 = $("input[#name=Verdachte]:checked");
if (cat1.val() != "2") {
cat1.val("you are right :)");
cat1.attr("disabled", true);
start -= 1000 * 60 * 5;
}
if (diff <= 0) {
start = Date.now() + 1000;
}
};
timer();
setInterval(timer, 1000);
}
window.onload = function() {
var fortyfiveMinutes = 60 * 45,
display = document.querySelector('#time');
startTimer(fortyfiveMinutes, display);
}
But it just keeps subtracting five minutes all the time, so I made a send button for it:
$("#results").click(function() {
if (cat1.val() === "2") {
cat1.val("you are right :)");
cat1.attr("disabled", true);
start -= 1000 * 60 * 5;
}
};
But now the timer just disappears completely, how can I fix this?
try this , I create a new function to check value and set varaibles as globals to access easy ,and change value of 'start' if value of textbox is wrong
var start = Date.now();
function startTimer(duration, display) {
var diff,
minutes,
seconds;
function timer() {
diff = duration - (((Date.now() - start) / 1000) | 0);
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (diff <= 0) {
start = Date.now() + 1000;
}
};
timer();
setInterval(timer, 1000);
}
window.onload = function() {
var fortyfiveMinutes = 60 * 45,
display = document.querySelector('#time');
startTimer(fortyfiveMinutes, display);
}
function checkValue() {
var cat1 = $("#Verdachte");
if (cat1.val() == "2" || cat1.attr("disabled")) {
cat1.val("you are right :)");
cat1.attr("disabled", true);
} else {
cat1.val("Wrong :(");
start -= 1000 * 60 * 5;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time"></div>
<input id="Verdachte">
<button onclick="checkValue()"> click me</button>
I have to create a stopwatch that has a start button, a stop button and a pause button. I have so far reached start and stop buttons but the are not working. What is the issue. I have to even go ahead and create a pause button , how to do that. Please help.
var seconds = 0,
minutes = 0,
hours = 0,
timer;
var toStop = false;
var h1 = document.getElementsByTagName('h1')[0];
function start() {
while (!toStop) {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
if (hours >= 12) {
hours = 0;
toStop = true;
stop();
}
}
}
document.getElementById("h").value = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" +
(minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" +
(seconds > 9 ? seconds : "0" + seconds);
myTimer();
}
}
function stop() {
clearTimeout(myTimer());
console.log(timer);
}
function myTimer() {
timer = setInterval(start, 1000);
console.log(timer);
}
function clear() {
document.getElementById("h").value = "00:00:00";
seconds = 0;
minutes = 0;
hours = 0;
}
<h1 id="h"><time>00:00:00</time></h1>
<button onclick="myTimer()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="clear()">Clear</button>
while (!toStop) {
Get rid of that. The start() func should just calc and print elapsed time. Also, don't call myTimer(); in start(). You already call setInterval() which will call start() every second.
Instead of calculating the elapsed time the way you do, you should create a Date object in myTimer(). Then in start() create another one. To calc elapsed time, subtract one from the other.
And since you call setInterval() you should call clearInterval() to stop.
var startTime = null;
var timer = null;
var totalTime = 0;
function getElapsedTime()
{
var now = new Date();
return (now - startTime) / 1000;
}
function start() {
// Calculate elapsed time since start btn was hit
var elapsedTime = getElapsedTime();
// Add prev times (from pause)
elapsedTime += totalTime;
// elapsedTime is in seconds. Calc, h/m/s
var hours = Math.floor(elapsedTime / (60 * 60));
elapsedTime %= (60 * 60);
var minutes = Math.floor(elapsedTime / 60);
elapsedTime %= 60;
var seconds = Math.floor(elapsedTime);
if (hours > 12) {
stop();
}
// Build string
var timeStr = (hours < 10 ? "0" : "") + hours + ":" +
(minutes < 10 ? "0" : "") + minutes + ":" +
(seconds < 10 ? "0" : "") + seconds;
// Update timer
document.getElementById("h").textContent = timeStr;
document.getElementById("h").value = timeStr;
}
var amPaused = false;
function pause()
{
if (amPaused) {
amPaused = false;
startTime = new Date();
timer = setInterval(start, 1000);
}
else {
amPaused = true;
totalTime += getElapsedTime();
if (timer) {
clearInterval(timer);
timer = null;
}
}
}
function stop() {
if (timer) {
clearInterval(timer);
timer = null;
}
amPaused = false;
document.getElementById("start").disabled = false;
document.getElementById("stop").disabled = true;
document.getElementById("pause").disabled = true;
}
function myTimer() {
stop();
totalTime = 0;
// Store the start time
startTime = new Date();
// Start the timer
timer = setInterval(start, 1000);
document.getElementById("start").disabled = true;
document.getElementById("stop").disabled = false;
document.getElementById("pause").disabled = false;
}
<h1><time id="h">00:00:00</time></h1>
<button onclick="myTimer()" id="start">▶</button>
<button onclick="stop()" id="stop" disabled="true">■</button>
<button onclick="pause()" id="pause" disabled="true">⏸</button>
<html>
<head>
<title>
Stop-Watch
</title>
</head>
<body>
<script>
var myCounter;
var seconds = 0, minutes = 0, hours = 0, timer;
var toStop = false;
var h1 = document.getElementsByTagName('h1')[0];
function start() {
if (!toStop) {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
if (hours >= 12) {
hours = 0;
toStop = true;
stop();
}
}
}
var time = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" +
(minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" +
(seconds > 9 ? seconds : "0" + seconds);
document.getElementById("h").innerHTML = time;
// myTimer();
}
}
function stop() {
toStop = true;
clearInterval(myCounter);
}
function myTimer() {
if (!toStop) {
document.getElementById("h").innerHTML = "00:00:00";
seconds = 0; minutes = 0; hours = 0;
}
clearInterval(myCounter);
toStop = false;
myCounter = setInterval(start, 1000);
}
function clearTime() {
toStop = true;
seconds = 0; minutes = 0; hours = 0;
clearInterval(myCounter);
document.getElementById("h").innerHTML = "00:00:00";
}
</script>
<h1>
<time id="h">00:00:00</time>
</h1>
<button onclick="myTimer()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="clearTime()">Clear</button>
</body>
</html>
Don't use while or any loops they block io events, so there is no chance for the browser to update html.
If you like to use loops then you could try async/await:
async start() {
while (!stop) {
await sleep(1000)
// some code to get elapsedTime
render()
}
}
function sleep(ms) {
return new Promise(resolve => {
setTimeout(() => resolve(), ms)
})
}
But I like to avoid to use loops for this task.
I believe it could be less coding and cleaner.
const timer = {
start() {
this.time = new Date()
clearInterval(this.interval)
this.interval = setInterval(() => { this.tick() }, 1000)
},
stop() {
clearInterval(this.interval)
},
reset() {
this.time = new Date()
clearInterval(this.interval)
this.render(0, 0, 0)
},
tick() {
const now = new Date()
const elapsedTime = new Date(now - this.time)
const hours = elapsedTime.getUTCHours()
const minutes = elapsedTime.getUTCMinutes()
const seconds = elapsedTime.getUTCSeconds()
if (hours >= 12) this.stop()
this.render(hours, minutes, seconds)
},
render(hours, minutes, seconds) {
const time = [hours, minutes, seconds].map(v => v.toString().padStart(2, `0`))
const html = document.getElementById(`timer`)
html.textContent = time.join(`:`)
}
}
<h1>
<time id="timer">00:00:00</time>
</h1>
<button onclick="timer.start()">Start</button>
<button onclick="timer.stop()">Stop</button>
<button onclick="timer.reset()">Reset</button>