I looked at some other similar problems on this site and could not fix this problem. Below is part of a pomodoro clock program that I'm making. The problem is that I'm unable to make this set interval method stop when the clock reaches 00:00.
here is my code:
var break_minutes = 0;
var ses_minutes = 0;
var ses_minutes_sec;
var display = document.querySelector('#time');
function increment_ses (id) {
ses_minutes = ses_minutes + 1;
document.getElementById("ses_value").innerHTML = ses_minutes ;
document.getElementById("timmer_circle").innerHTML = ses_minutes;
}
function decrement_ses (id) {
if (ses_minutes > 0) {
ses_minutes = ses_minutes - 10;
} if (ses_minutes < 0) {
ses_minutes = 0;
}
document.getElementById("ses_value").innerHTML = ses_minutes ;
document.getElementById("timmer_circle").innerHTML = ses_minutes;
}
function runTimer () {
var minutes = ses_minutes-1;
var seconds = 10;
var interval = setInterval(function () {
seconds = seconds -1;
if (seconds == 0) {
minutes --;
seconds = 10 -1;
}
function str_pad_left(string,pad,length) {
return (new Array(length+1).join(pad)+string).slice(-length);
}
var finalTime = str_pad_left(minutes,'0',2)+':'+str_pad_left(seconds,'0',2);
document.getElementById("timmer_circle").innerHTML= finalTime;
if (minutes == 0) {
if (seconds == 0) {
return clearInterval(interval);
}
}
},1000);
}
the HTML
<html>
<head>
<title>Pomodoro</title>
<script src="pomodoro.js"></script>
</head>
<body>
<style>
.timmer_circle
{
width: 300px;
height: 300px;
border-radius: 50%;
font-size: 50px;
color: #fff;
line-height: 300px;
text-align: center;
background: #000;
}
.break_length{width:100%;}
#decrement{float:left;width:100px;}
#break_value{text-align: center;padding-left: 100px;}
#increment{margin:0 auto;width:100px;}
.session_length{width:100%; margin-top: 10px;}
#decrement_ses{float:left;width:100px;}
#ses_value{padding-left: 100px;}
#increment_ses{margin:0 auto;width:100px;}
#start_but{margin-top: 20px;}
#pause_but{margin-top: 20px; margin-left: 2px;}
</style>
<table>
<tr>
<td>
<div class = "timmer_circle" id ="timmer_circle" value = ""> <span id = "time">Session</span> </div>
</td>
</tr>
</table>
<div class="session_length">
<button type="button" id = "decrement_ses" onClick = "decrement_ses(this.id);">ses/dec</button>
<button type="button" id = "ses_value" >0</button>
<button type="button" id = "increment_ses" onClick = "increment_ses(this.id);">ses/inc</button>
</div>
<div class="break_length">
<button type="button" id = "decrement" onClick = "decrement_break(this.id);">brk/dec</button>
<button type="button" id = "break_value" value = "" >0</button>
<button type="button" id = "increment" onClick = "increment_break(this.id);">brk/inc</button>
</div>
<button id ="start_but" onClick="runTimer();">START</button>
<button id ="pause_but">PAUSE</button>
</body>
</html>
So, there's a number of issues with your code, specifically how you're calculating seconds and minutes. Seconds are never zero when you hit your case statement the way you're doing it, because you test for zero at the start of your function and then reset them to 10-1.
I would move that check to the start of the function, as part of your initial conditional. There are still other issues, but this is to answer your specific question about the interval. The below code will exit as expected:
var ses_minutes = 1;
var minutes = ses_minutes-1;
var seconds = 10;
var interval = setInterval(function () {
seconds = seconds -1;
if (seconds == 0) {
if(minutes === 0){
return clearInterval(interval);
}
minutes --;
seconds = 10 - 1;
}
function str_pad_left(string,pad,length) {
return (new Array(length+1).join(pad)+string).slice(-length);
}
var finalTime = str_pad_left(minutes,'0',2)+':'+str_pad_left(seconds,'0',2);
document.getElementById("timmer_circle").innerHTML= finalTime;
},1000);
/* EDIT */
So taking a few minutes to think about how I'd do this if it were me, I'd break things up into functions a little differently, and I'd also use setTimeout. I'd also calculate based on elapsed time rather than assuming the interval or timeout tick will happen at exactly 1000ms, since that's not always reliable. The below is probably still not perfect (I've only done cursory testing) but closer to what I'd do if I were tasked with this:
const display = document.getElementById('timer');
const countDownFrom = 15000; // time in milliseconds to count from
let startTime = new Date().getTime();
function padNumber(num){
let str = num.toString();
return str.length > 1 ? str : '0' + str;
}
function getDisplay(milliseconds){
const seconds = milliseconds / 1000;
const displayMinutes = padNumber(Math.floor(seconds / 60));
const displaySeconds = padNumber(Math.floor(seconds % 60));
return displayMinutes + ':' + displaySeconds;
}
function tick(){
const currentTime = new Date().getTime();
const elapsedTime = currentTime - startTime;
// test to see if the timer has expired
if(countDownFrom - elapsedTime <= 0){
display.innerHTML = '00:00';
return;
}
display.innerHTML = getDisplay(countDownFrom - elapsedTime);
setTimeout(tick,1000);
}
display.innerHTML = getDisplay(countDownFrom);
setTimeout(tick, 1000);
Related
When I want to reset my stopwatch and start it again the timer begins at the stop-point of the previous timer execution but I want that the timer begins at zero. I tried different ways to solve this problem but my tries did not work. What is my failure? The considered area in my JavaScript is marked up.
window.onload = function () {
//global variables
let interval = null;
let timerId = null;
let y = 3.90;
let reversal = 20
const output = document.querySelector('output');
let maintime = document.getElementById('maintime');
const start = document.getElementById('actioner');
const clear = document.getElementById('reseter');
let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
//If start is clicked
start.addEventListener('click', () => {
buttonAndTimer();
startDrive();
}); // end of func
function buttonAndTimer() {
start.innerText = 'Stop';
if (!interval) {
interval = setInterval(() => {
run();
}, 10);
} else {
clearInterval(interval)
start.innerText = 'Resume';
interval = null;
};
}
function run() {
milliseconds += 10;
if (milliseconds == 1000) { //note: 1000 milliseconds are 1 seconds
milliseconds = 0;
seconds++;
};
if (seconds == 60) {
seconds = 0;
minutes++;
};
if (minutes == 60) {
minutes == 0
hours++;
};
h = hours < 10 ? '0' + hours : hours;
m = minutes < 10 ? '0' + minutes : minutes;
s = seconds < 10 ? '0' + seconds : seconds;
ms = milliseconds < 100 ? '00' + milliseconds : milliseconds;
//Template Literals
maintime.innerHTML = `${h} : ${m} : ${s} : ${ms} `
};
//calculating price
function startDrive() {
if (start.innerText != 'Resume') {
output.innerHTML = y.toFixed(2) + '€';
timerId = setInterval(() => {
if (y < reversal) {
y += 0.14375;
} else if (y > reversal) {
y += 0.103125;
}
output.innerHTML = y.toFixed(2) + "€";
}, 5000);
}
/*Considered area */
if (start.innerText == 'Resume') {
clearInterval(timerId);
}
} //end of func
// considered area
clear.addEventListener('click', () => {
clearInterval(interval);
interval = null;
maintime.innerHTML = '00:00:00:000';
start.innerText = 'Start'
clearInterval(timerId);
timerId = 0;
output.innerHTML = "";
})
} //end of window.load
#box {
display: flex;
justify-content: center;
align-items:center;
flex-direction: column;
gap: 5px;
}
span, #maintime{
color:#74bde0;
width:15vh;
text-align: center;
max-width:20vh;
}
.button {
border:none;
border-radius: 30px;
cursor: pointer;
color:#74bde0;
box-shadow: 1px 1px 1px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
output {
border: 1px solid;
border-color:#74bde0 ;
border-radius: 5px;
height: 10vh;
width: 30vh;
text-align: center;
color:#74bde0;
line-height: 500%;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}
#card {
background-color: #2f2f2f;
width: 80vh;
height: 10vh;
border:1px solid;
border-color:blueviolet;
border-radius: 30px;
}
<body>
<div id="box">
<button class='button' id='actioner'>Start</button>
<output></output>
<button class='button' id='reseter'>Reset</button>
<div id='mainstopwatch'>
<div id='maintime'>
<span class='span' id="mainhour">00:</span>
<span class='span' id="mainminute">00:</span>
<span class='span' id="mainsecond">00:</span>
<span class='span' id="milliseconds">000</span>
</div>
</div>
</body>
Fixed it.. I hope this is acceptable answer..
window.onload = function () {
//global variables
let interval = null;
let timerId = null;
let y = 3.90;
let reversal = 20
const output = document.querySelector('output');
let maintime = document.getElementById('maintime');
const start = document.getElementById('actioner');
const clear = document.getElementById('reseter');
let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
//If start is clicked
start.addEventListener('click', () => {
console.log("start clicked.. ")
buttonAndTimer();
startDrive();
}); // end of func
function buttonAndTimer() {
start.innerText = 'Stop';
if (!interval) {
interval = setInterval(() => {
run();
}, 10);
} else {
clearInterval(interval)
start.innerText = 'Resume';
interval = null;
};
}
function run() {
milliseconds += 10;
if (milliseconds == 1000) { //note: 1000 milliseconds are 1 seconds
milliseconds = 0;
seconds++;
};
if (seconds == 60) {
seconds = 0;
minutes++;
};
if (minutes == 60) {
minutes == 0
hours++;
};
h = hours < 10 ? '0' + hours : hours;
m = minutes < 10 ? '0' + minutes : minutes;
s = seconds < 10 ? '0' + seconds : seconds;
ms = milliseconds < 100 ? '00' + milliseconds : milliseconds;
//Template Literals
maintime.innerHTML = `${h} : ${m} : ${s} : ${ms} `
};
//calculating price
function startDrive() {
if (start.innerText != 'Resume') {
output.innerHTML = y.toFixed(2) + '€';
timerId = setInterval(() => {
if (y < reversal) {
y += 0.14375;
} else if (y > reversal) {
y += 0.103125;
}
output.innerHTML = y.toFixed(2) + "€";
}, 5000);
}
/*Considered area */
if (start.innerText == 'Resume') {
clearInterval(timerId);
}
} //end of func
// considered area
clear.addEventListener('click', () => {
console.log("clear clicked.. ")
clearInterval(interval);
interval = null;
maintime.innerHTML = '00:00:00:000';
start.innerText = 'Start'
clearInterval(timerId);
timerId = 0;
output.innerHTML = "";
milliseconds = 0
seconds = 0
minutes = 0
hours = 0
})
} //end of
hello I'm new to code and javascript I'm creating a clock with timer. the countdown is done well with an alarm and a pop up when the timer reaches zero. only I can't turn off the alarm when I close the pop up it opens in a loop. i need help please
let departInput = document.querySelector('#times');
let subButton = document.querySelector('#sub')
subButton.addEventListener('click', event => {
let temps = (departInput.value)*60;
var timerElement = document.getElementById("MyTimerDisplay")
setInterval(() => {
let minutes = parseInt(temps / 60, 10)
let secondes = parseInt(temps % 60, 10)
minutes = minutes < 10 ? "0" + minutes : minutes
secondes = secondes < 10 ? "0" + secondes : secondes
timerElement.innerText = `${minutes}:${secondes}`
temps = temps <= 0 ? 0 : temps - 1
if(minutes == 0 && secondes == 0){
var snd = new Audio('clock.mp3');
snd.play();
alert("cest l'heure")
}
}, 1000)
});
To address the problem you are having you should call clearTimer() when the alarm rings so that its callback won't be running again and again each second even after the condition to break was met.
Here's a working example to show the point:
let departInput = document.querySelector('#times');
let subButton = document.querySelector('#sub')
subButton.addEventListener('click', event => {
//decides how many minutes before the alarm rings
let minutesToAlarm = parseInt(departInput.value);
//initializes elapsedSeconds
let elapsedSeconds = minutesToAlarm*60;
var timerElement = document.getElementById("MyTimerDisplay");
var myTimer = setInterval(() => {
//converts elapsedSeconds in mm:ss format and refresh the ui
let minutes = Math.floor(elapsedSeconds/60);
let secondes = elapsedSeconds % 60;
timerElement.innerText = `${minutes}:${secondes}`
//decrement elapsedSeconds by 1
elapsedSeconds--;
if(elapsedSeconds === 0){
/*
* Part muted because there's no reference to clock.mp3
*
var snd = new Audio('clock.mp3');
snd.play();
*/
alert("cest l'heure");
//here clears the timer so that the callback
//won't be running again anymore
clearTimeout(myTimer);
}
}
, 1000);
});
#sub{
border: solid 1px black;
min-width: 5em;
padding: 2px;
cursor: pointer;
}
#MyTimerDisplay{
border: dashed 4px darkgray;
margin-top: 5px;
width: fit-content;
padding: 5px 20px;
}
<input id="times" type="text" placeholder="departInput"/>
<button id="sub">clickme</button>
<div id="MyTimerDisplay">#times</div>
I'm currently making a javascript condition for my html page. And got stuck in this problem. The problem is, i try to make div class="content" automatically appear when the times is >=13 o'clock and the seconds is <=10. Its working smoothly, but i must refresh the entire page to make the div class="content" appears. Is there a way to make the div automatically appears when the if condition meet the requirements? Please Help
There is my code
var timer = setInterval(myTimer, 1000);
var seconds = new Date().getSeconds();
var hour = new Date().getHours();
var greeting;
var popup;
var d = new Date();
if (seconds < 10 && hour >=13) {
greeting = "Past 10 Seconds";
document.querySelector(".content").style.backgroundColor = "red";
document.querySelector(".content").style.display = "block";
} else if (seconds < 30) {
greeting = "After 10 & Before 30 Seconds";
} else {
greeting ="Past 30 Seconds";
document.querySelector(".content").style.backgroundColor = "blue";
document.querySelector(".content").style.display = "block";
}
document.getElementById("demo").innerHTML = greeting;
document.getElementById("seconds").innerHTML = d.getSeconds();
function myTimer() {
var s = new Date();
document.getElementById("tiktok").innerHTML = s.toLocaleTimeString();
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
display: none;
position: fixed;
z-index: 1;
overflow: auto;
}
<p id="demo"></p>
<p id="seconds"></p>
<p id="tiktok"></p>
<div class="content">
<h1>FLASH SALE!!</h1>
<p>PRODUK KECANTIKAN</p>
<button id="myBtn"
onclick="window.location.href='https://tokopedia.com';">Check
Out</button>
</div>
Moving everything inside the myTimer() function should do it.
var timer = setInterval(myTimer, 1000);
function myTimer() {
var s = new Date();
document.getElementById("tiktok").innerHTML = s.toLocaleTimeString();
var seconds = new Date().getSeconds();
var hour = new Date().getHours();
var greeting;
var popup;
var d = new Date();
if (seconds < 10 && hour >=13) {
greeting = "Past 10 Seconds";
document.querySelector(".content").style.backgroundColor = "red";
document.querySelector(".content").style.display = "block";
} else if (seconds < 30) {
greeting = "After 10 & Before 30 Seconds";
} else {
greeting ="Past 30 Seconds";
document.querySelector(".content").style.backgroundColor = "blue";
document.querySelector(".content").style.display = "block";
}
document.getElementById("demo").innerHTML = greeting;
document.getElementById("seconds").innerHTML = d.getSeconds();
}
create a blank div in html like and set display property as block using java script when your condition is met
html
<div style="display:none" class="content"> </div>
javascript
<script>
if(condition == true) {
x = document.getElementById("myDIV").style.display = "block";
}
</script>
Currently, the logic which updates the status element only runs once, and so to have it the element update every second you need to move it into myTimer():
const timer = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
const seconds = d.getSeconds();
const hour = d.getHours();
let greeting;
let popup;
if (seconds < 10 && hour >= 13) {
greeting = "Past 10 Seconds";
document.querySelector(".content").style.backgroundColor = "red";
document.querySelector(".content").style.display = "block";
} else if (seconds < 30) {
greeting = "After 10 & Before 30 Seconds";
} else {
greeting = "Past 30 Seconds";
document.querySelector(".content").style.backgroundColor = "blue";
document.querySelector(".content").style.display = "block";
}
document.getElementById("demo").innerHTML = greeting;
document.getElementById("seconds").innerHTML = seconds;
document.getElementById("tiktok").innerHTML = d.toLocaleTimeString();
}
<p id="demo"></p>
<p id="seconds"></p>
<p id="tiktok"></p>
<div class="content">
<h1>FLASH SALE!!</h1>
<p>PRODUK KECANTIKAN</p>
<button id="myBtn" onclick="window.location.href='https://tokopedia.com';">
Check Out
</button>
</div>
I was trying to make a countdown timer that once it reaches " 00:00 " it should go up again without limit.
I can't figure it out how to make my countdown go up once it reaches " 00:00 " maybe you can help me.
<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 1;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
var timeout;
function countdown() {
timeout = setTimeout('Decrement()', 1000);
}
function colorchange(minutes, seconds)
{
if(minutes.value =="00" && seconds.value =="59")
{
minutes.style.color="orange";
seconds.style.color="orange";
}
else if(minutes.value =="00" && seconds.value =="30")
{
minutes.style.color="red";
seconds.style.color="red";
}
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
colorchange(minutes,seconds);
secs--;
if (secs < 0) {
clearTimeout(timeout);
return;
}
countdown();
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
</script>
</head>
<body>
<div id="timer">
This is only valid for the next <input id="minutes" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;"> :
<input id="seconds" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;">
</div>
<script>
countdown();
</script>
I think your current solution is a little overcomplicated. You have a function that sets a timeout that calls another function which does the work and then re-calls the function that sets the timeout again.
Instead of doing that, just use the setInterval method instead.
Similarly to what #JoColina suggested, set a direction variable that indicates which direction to count, and then set up different behavior for counting up vs. counting down.
var direction = 'down';
var mins = 1.1;
var secs = mins * 60;
function colorchange() {
var className;
if (direction == 'up') {
className = 'success';
} else if (secs <= 30) {
className = 'danger';
} else if (secs <= 59) {
className = 'warning';
}
document.getElementById('timeText').className = className;
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
function countdown() {
setInterval(function() {
var minutes = document.getElementById('minutes');
var seconds = document.getElementById('seconds');
minutes.value = getminutes();
seconds.value = getseconds();
colorchange();
if (direction == 'down') {
secs--;
if (secs <= 0) {
direction = 'up';
}
} else if (direction == 'up') {
secs++;
}
}, 1000);
}
countdown();
.success,
.success input {
color: green;
}
.warning,
.warning input {
color: orange;
}
.danger,
.danger input {
color: red;
}
<div id="timer">
This is only valid for the next
<span id="timeText">
<input id="minutes" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;">:
<input id="seconds" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;">
</span>
</div>
tl;dr, however you could declare a global boolean like var down = true;, and once your timer reaches 00:00, you just change down = true to down = false.
Then, on the function that changes the counter you add:
if(down){
Decrement();
}else{
Increment():
}
And if, for example, you want to decrement again once it reaches 13:54 you once more add a down = true.
Hope this helps!
I've found this countdown script and made some basic formatting changes but I can't figure out how to get the timer to stop at 0:00 instead of going into minus figures.
Any help would be appreciated :)
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 3;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
function countdown() {
setTimeout('Decrement()', 1000);
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
secs--;
setTimeout('Decrement()', 1000);
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return mins;
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return secs - Math.round(mins * 60);
}
</script>
</head>
<body>
<div id="timer"><font size="4"><b>You have</b></font>
<input id="minutes" type="text" style="width: 16px; border: none; background-color:transparent; color: #FF0000; font-size: 24px; font-weight: bold;"><font size="4"><b>:</b></font>
<input id="seconds" type="text" style="width: 30px; border: none; background-color:transparent; color: #FF0000; font-size: 24px; font-weight: bold;"> <font size="4"><b>to claim your free game.</b></font></div>
<script>
countdown();
</script>
You need to check if seconds and mins are both zero and if they are return out of the Decrement function rather than calling setTimeout again.
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds.value < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
console.log(seconds.value);
if (minutes.value == 0 && seconds.value == 0) {
return;
}
secs--;
setTimeout('Decrement()', 1000);
}
}
I am not certain what you are going for with the < 59 condition. Try removing that logic like this:
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
minutes.value = getminutes();
seconds.value = getseconds();
console.log(seconds.value);
if (minutes.value == 0 && seconds.value == 0) {
return;
}
secs--;
setTimeout('Decrement()', 1000);
}
}
This is a bad algorithm to make a countdown. Something like that would be better
var timeout, timer;
startChrono(3*60*1000); //3 min
function startChrono (milisec) {
timeout = (new Date()).getTime() + milisec;
timer = setInterval("tick()", 1000);
}
function tick () {
var now = (new Date()).getTime();
var diff = now - timeout;
if (diff <= 0) {
clearInterval(timer);
diff = 0;
}
render(diff);
}
function render (milisec) {
var sec = Math.floor(milisec / 1000);
var min = Math.floor(milisec / 60);
sec = sec - (min*60);
document.getElementById("minutes").value = sec;
document.getElementById("seconds").value = min;
}