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>
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
I have developed the below code, which creates a div pop up box for 1 minute and disappears for 9 minutes. The div pop up box appears every 10 minutes on the hour based on the time on your device and it continuous.
function showPopup() {
var now = new Date();
if ((now.getMinutes() % 10) == 0) {
document.getElementById("popup").style.display = "block";
setTimeout(function() {
document.getElementById("popup").style.display = "none";
}, 60 * 1000); // Display for 1 minute
} else {
document.getElementById("popup").style.display = "none";
setTimeout(showPopup, 30 * 1000); // Rteyr every 30 seconds
}
}
showPopup();
.outer {
width: 500px;
height: 500px;
margin: auto;
background-color: red;
}
.inner {
width: 200px;
height: 100px;
margin: auto;
padding: auto;
color: red;
background-color: white;
display: none;
}
<div class="outer">
<div id="popup" class="inner">
This is the pop-up.
</div>
</div>
I am looking to create a piece of text to show the time in minutes the length to wait, when the div pop up box is not appearing, until the div pop up box appears, so:
“9 minutes to wait”
“8 minutes to wait”
“7 minutes to wait”
“6 minutes to wait”
“5 minutes to wait”
“4 minutes to wait”
“3 minutes to wait“
“2 minutes to wait”
“1 minute to wait”
With only the minutes counting down and with the “1 minute” without an “s” at the end. Would this be possible using the same code?
I think this should work for you. Feel free to ask if in case of having any doubt :)
function showPopup() {
var now = new Date();
if ((now.getMinutes() % 10) == 0) {
document.getElementById("popup").style.display = "block";
document.getElementById("popup").innerHTML = 'This is the pop-up.'
setTimeout(function() {
//document.getElementById("popup").style.display = "none";
document.getElementById("popup").innerHTML = '9 Minutes to wait.'
}, 60 * 1000); // Display for 1 minute
} else {
var x = 10 - now.getMinutes()%10
document.getElementById("popup").style.display = "block";
if (x == 1){
document.getElementById("popup").innerHTML = x + ' '+ 'Minute to wait.'
}
else{
document.getElementById("popup").innerHTML = x + ' '+ 'Minutes to wait.'
}
setTimeout(showPopup, 30 * 1000); // Rteyr every 30 seconds
}}
showPopup();
I need a survey to auto progress to the next block when a specified time limit has been reached for the previous block. Currently I am using the below script to display the timer but need the script to execute the action when time has elapsed. Any assistance is greatly appreciated.
Javascript in timing question.
Qualtrics.SurveyEngine.addOnload(function()
{
var headerCont = document.createElement("div");
headerCont.className = "header-cont";
headerCont.id = "header_container";
var header = document.createElement("div");
header.className = "header"
header.id = "header_1";
var timer = document.createElement("div");
timer.className = "timer";
timer.id = "timer_1";
timer.innerHTML = "Time Remaining: <span id='time'>00:10</span>";
headerCont.appendChild(header);
header.appendChild(timer);
document.body.insertBefore(headerCont, document.body.firstChild);
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var myTimer = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
var text = ('innerText' in display)? 'innerText' : 'textContent';
display[text] = minutes + ":" + seconds;
if (--timer < 0) {
clearInterval(myTimer);
timeOver();
}
}, 1000);
}
var timerSeconds = 10,
display = document.querySelector('#time');
startTimer(timerSeconds, display);
var timeOver = function() {
document.getElementById("timer_1").innerHTML = "Time is up.";}
});
CSS
.header-cont {
width:100%;
position:fixed;
top:0px;
z-index:1000;
}
.header {
height:75px;
background:#FFFFFF;
width:100%;
margin:0px auto;
}
.timer{
margin: auto;
text-align: center;
vertical-align: middle;
font-size: 200%;
font-family: Arial;
}
EDITED ANSWER BASED ON COMMENT:
Initialize an embedded data field in the survey flow before block:
blockTimeFlag = 0
Add the following lines to the timeOver function:
Qualtrics.SurveyEngine.setEmbeddedData("blockTimeFlag", "1");
$('NextButton').click();
However, this means that none of your questions can be forced response.
Add display logic to your questions:
if blockTimeFlag = 0
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);
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!