We Keep Coding

How do I stop 10 seconds timer in Javascript?

I can't seems to be able to stop the timer when it reaches zero. It will just repeat back to the original timing! See my codes below.
What I am trying to achieve is, once timer is 0, it will replace 00:00 with the text "Your time is up".
HTML:
<div class="quizTimer right">
<span>Timer:<br /><span id="qTimer"></span></span>
</div>
This is the Javascript which I did:
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;
console.log(display.textContent);
if (--timer < 0) {
timer = duration;
clearInterval(timer); // this piece of code didnt stop the timer
}
}, 1000);
}
window.onload = function () {
var oneMinute = 10 * 1,
display = document.querySelector('#qTimer');
startTimer(oneMinute, display);
};

clearInterval() expects a reference to the interval to be passed.
You're passing timer, which is not a reference to the interval - it's an integer from the passed-in function param.
Assign your interval to a variable and reference that when you want to clear it.
let foo = setInterval(() => {
/* code... */
clearInterval(foo);
}, 1000);

You just need to capture the interval id returned by setInterval() and use that:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var id = 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;
console.log(display.textContent);
if (--timer < 0) {
timer = duration;
clearInterval(id); // uses returned id
}
}, 1000);
}

How to clear localStorage after logout user with rails?

I have ROR application and i added countdown timer to it .
The timer count from 15 to zero then disappear. What i'm doing is to prevent count again on refresh page , so , i stored start value in localStorage.
But i need to reset the value when user log out and start count again when login again, here is my code:
function startTimer(duration, display) {
var start = localStorage.getItem("start"),
diff,
minutes,
seconds;
var shown = false;
if (start === null) {
start = Date.now();
localStorage.setItem("start", start);
}
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 = 0;
$('#testDiv').hide();
if (shown == false){
$('#congModal').modal('show');
shown = true;
}
}
}
timer();
setInterval(timer, 1000);
}
window.onload = function () {
var fifteenMinutes = 60 * 15,
display = document.querySelector('#time');
startTimer(fifteenMinutes, display);
};
and on view i have:
`%li.list-inline-item.g-mx-10--xl.g-font-size-16
#testDiv{"data-value" => "show"}
%span= "#{t('layouts.navbar.countdown.next_reward_in')}"
%span#time 15:00
= "#{t('layouts.navbar.countdown.minutes')}"
%i{"data-target" => "#congModal", "data-toggle" => "modal"} `

This solved the problem!
on js file:
`function cleanUp(){
localStorage.removeItem('start')
}`
on view:
%a{ "data-method" => "delete", href: destroy_user_session_path, onclick: "cleanUp();"}

How do I subtract time from a timer in Javascript if a certain condition is true?

I am making a riddle, where the people who try to solve it have 45 minutes to solve the riddle, and when they don't answer correctly, I want the timer to go down five minutes, to prevent them from just guessing the answers. How could I do it, I am very new to using javascript, this is the first time I'm working with it.
function startTimer(duration, display) {
var start = Date.now(),
diff,
minutes,
seconds;
var cat1 = ($("input[#name=Verdachte]:checked").val() != "2");
var cat2 = ($("input[#name=Moordwapen]:checked").val() != "4");
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);}
I want the timer to go down five minutes when cat1 is true, and/or when cat2 is true.

Inside of timer, just check the input, and if it is true, disable the input and increase the time:
var cat1 = $("input[#name=Verdachte]:checked");
if(cat1.val() === "2") {
cat1.val("you are right :)");
cat1.attr("disabled", true);
start -= 1000 * 60 * 5;
}
//...
... that would be even more elegant with event handlers ...

Javascript count down timer based on hours (works in Unbounce)

I need the javascript countdown timer to work based on the hours. For E.g. If it is 5'o clock then clock should reset from one hour. When it's 6'o clock it should again reset and count down should start.
Like in this website -> https://phorge.com.au/the-dental-edge-webinar
I would like to use following JS. So it would be great if it could be modified.
<script>
var startTime = 59.99; //in Minutes
var doneClass = "done"; //optional styling applied to text when timer is done
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var intervalLoop = 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) {
document.querySelector("#timer").classList.add(doneClass);
clearInterval(intervalLoop);
}
}, 1000);
}
window.onload = function () {
var setMinutes = 60 * startTime,
display = document.querySelector("#timer");
startTimer(setMinutes, display);
};
/**
* Do not remove this section; it allows our team to troubleshoot and track feature adoption.
* TS:0002-03-069
*/
</script>

Just get the current time and subtract the minutes and seconds from your startTime. As it's a countdown timer per hour you don't care what hour it is, just how many minutes and seconds are left in it.
var startTime = 59.99; //in Minutes
var doneClass = "done"; //optional styling applied to text when timer is done
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
var intervalLoop = 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) {
document.querySelector("#timer").classList.add(doneClass);
clearInterval(intervalLoop);
}
}, 1000);
}
window.onload = function() {
var now = new Date();
var hour = now.getHours();
if (hour > 12) {
hour = hour - 11 + " PM"
} else {
hour = hour + 1 + " AM"
}
document.getElementById("hour").textContent = "Until " + hour;
var setMinutes = 60 * (startTime - now.getMinutes() - (now.getSeconds() / 100)),
display = document.querySelector("#timer");
startTimer(setMinutes, display);
};
<span id="timer"></span><br/>
<span id="hour"></span>

JavaScript timer to count down from a certain time for a number of hours

I have created a countdown timer. The problem is, I am wanting it to count down from midnight clock 00:00:00 until clock 17:00:00.
I have made the timer count down starting at 17 hours 00 minutes 00 seconds and it works a treat, but I need a way to take off the time from 00:00:00 to present from the 17 hours.
Here is my JS code
function startTimer(duration, display) {
var start = Date.now(),
diff,
hours,
minutes,
seconds;
function timer() {
// get the number of seconds that have elapsed since
// startTimer() was called
diff = duration - (((Date.now() - start) / 1000) | 0);
// Setting and displaying hours, minutes, seconds
hours = (diff / 360) | 0;
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = hours + ":" + minutes + ":" + seconds;
if (diff <= 0) {
// add one second so that the count down starts at the full duration
// example 17:00:00 not 16:59:59
start = Date.now() + 1000;
}
};
// don't want to wait a full second before the timer starts
timer();
setInterval(timer, 1000);
}
window.onload = function () {
var timeLeft = 3600 * 17,
display = document.querySelector('#time');
startTimer(timeLeft, display);
};
Here is my HTML code:
<div>Order by: <span id="time"></span> for Next Day Delivery.</div>
My thoughts were to get the timeLeft = 3600 * 17 and take off the diff.

Here is your corrected code : it was easier to save the timestamp of 17h of the current day (next day if we are after 17h) and compare it to the current timestamp. And to calculate the number of hours left, you have to divide the number of seconds by 3600 (60*60) and not 360
function startTimer(display) {
var date = new Date();
var h17 = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 17);
if(date.getHours() >= 17) {
h17.setDate(h17.getDate()+1);
}
h17 = h17.getTime();
var diff,
hours,
minutes,
seconds;
function timer() {
diff = (((h17 - Date.now()) / 1000) | 0);
// Setting and displaying hours, minutes, seconds
hours = (diff / 3600) | 0;
minutes = ((diff % 3600) / 60) | 0;
seconds = (diff % 60) | 0;
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = hours + ":" + minutes + ":" + seconds;
};
timer();
setInterval(timer, 1000);
}
window.onload = function () {
var timeLeft = 3600 * 17,
display = document.querySelector('#time');
startTimer(display);
};
<div>Order by: <span id="time"></span> for Next Day Delivery.</div>
jsFiddle
PS : I didn't test if the function work correctly after 17h but it should