I have this Javascript count down timer that works perfectly. Only problem is i can use it for only one time in one page. I want to use it multiple times.
I think script use id ="timer" that is why i am not able to use it multiple times.
Below is the JS code:
<script>
var startTime = 60; //in Minutes
var doneClass = "done"; //optional styling applied to text when timer is done
var space = ' ';
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 = "00" + space + minutes + space + seconds;
if (--timer < 0) {
document.querySelector("#timer").classList.add(doneClass);
clearInterval(intervalLoop);
}
}, 1000);
}
window.onload = function() {
var now = new Date();
var hrs = now.getHours();
var setMinutes = 60 * (startTime - now.getMinutes() - (now.getSeconds() / 100)),
display = document.querySelector("#timer");
startTimer(setMinutes, display);
};
</script>
Just declare intervalLoop outside of the startTimer function, it'll be available globally.
var intervalLoop = null
function startTimer(duration, display) {
intervalLoop = setInterval(function() { .... }
})
function stopTimer() {
clearInterval(intervalLoop) // Also available here!
})
window.setInterval(function(){ Your function }, 1000);
Here 1000 means timer 1 sec
I think something like this could be helpful:
Timer object declaration
var timerObject = function(){
this.startTime = 60; //in Minutes
this.doneClass = "done"; //optional styling applied to text when timer is done
this.space = ' ';
return this;
};
timerObject.prototype.startTimer = function(duration, display) {
var me = this,
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 = "00" + me.space + minutes + me.space + seconds;
if (--timer < 0) {
// not sure about this part, because of selectors
document.querySelector("#timer").classList.add(me.doneClass);
clearInterval(intervalLoop);
}
}, 1000);
}
Use it like
var t1 = new timerObject();
var t2 = new timerObject();
t1.startTimer(a,b);
t2.startTimer(a,b);
JS Fiddle example:
UPD1 commented part so the the timer could be stopped
https://jsfiddle.net/9fjwsath/1/
Related
In this JSfiddle, I have a code where if you click on the button, it automatically creates another set interval within the old one,
I have clearInterval but for some reason, it's not working
(Try clicking on the timer button multiple times)
<span>LIVE: Election results will refresh in <span id="time">2:00</span> minutes.</span>
<input type="button" value="Timer" id="btn">
<script>
$("#btn").on('click', function() {
var twoMinutes = 60 * 2,
display = document.querySelector('#time');
startTimer(twoMinutes, display);
});
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
var interval;
clearInterval(interval);
interval = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? +minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
LoadCandidatesCharts(true);
}
}, 1000);
} </script>
enter link description here
Problem is because you're calling the interval var within the function scope, while you should be declaring it on a global scope, try this
var interval; // global var
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
clearInterval(interval);
interval = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? +minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
LoadCandidatesCharts(true);
}
}, 1000);
}
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);
}
i'm new to JavaScript and i want this code to start with a click of a button and also in every click it should start a new different timer from zero. anyone here to help!
// add a count-down timer
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 = duration;
}
}, 1000);
}
var butt = window.document.getElementById('button');
window.onload = function () { //i tried using ' butt.onclick' but this did not work
var fiftenMinutes = 60 * 15,
display = document.querySelector('#time');
startTimer(fiftenMinutes, display);
};
<h3 id="time" class="divTime"></h3>
First you need to add a button with an id of "button" to make your code work:
<button id="button">Button Text</button>
Next, each time you click the button, you want the previous interval to be cancelled, otherwise you'll end up with more and more intervals changing the content of the h3:
var intervalId
...
if (intervalId) clearInterval(intervalId)
intervalId = setInterval(function() {})
This leaves us with the following:
var intervalId;
// add a count-down timer
function startTimer(duration, display) {
if (intervalId) clearInterval(intervalId);
var timer = duration, minutes, seconds;
intervalId = 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 = duration;
}
}, 1000);
}
var butt = window.document.getElementById('button');
butt.onclick = function () { //i tried using ' butt.onclick' but this did not work
var fiftenMinutes = 60 * 15,
display = document.querySelector('#time');
startTimer(fiftenMinutes, display);
};
<h3 id="time" class="divTime"></h3>
<button id="button">Button Text</button>
If you want a different timer each time you click, you need to add an element dynamically to the DOM to hold it.
// add a count-down timer
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 = duration;
}
}, 1000);
}
window.onload = function() { //i tried using ' butt.onclick' but this did not work
var fiftenMinutes = 60 * 15,
display = document.querySelector('#time');
startTimer(fiftenMinutes, display);
};
var butt = window.document.getElementById('button');
butt.addEventListener("click", function() {
var new_h3 = document.createElement("h3");
document.body.appendChild(new_h3);
startTimer(60*15, new_h3);
})
<h3 id="time" class="divTime"></h3>
<button id="button">Start timer</button>
Just add event listener to the button and clear already set timer, if it has been set. Run the following snippet.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
return 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 + ' Click to Restart';
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
var timerID = null;
// replace 'time' if the h3 element isn't the button.
document.getElementById( 'time' ).addEventListener( 'click', function() {
if ( timerID ) {
clearInterval( timerID );
}
var fiftenMinutes = 60 * 15,
display = document.querySelector('#time');
timerID = startTimer(fiftenMinutes, display);
})
<h3 id="time" class="divTime">Click To Start Timer</h3>
I found this vanilla JS count down timer that really suits my needs.
http://jsfiddle.net/wr1ua0db/17/
`<body>
<div>Registration closes in <span id="time">05:00</span> minutes!</div>
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 = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
I am looking for a reset function that I could assign to buttons or events. I mean a function that would NOT stop the timer... just reset it back to 5:00 ... so it would automatically go to 4:59... 4:58 ... etc
If you move timer variable to parent scope you'll have access to it from other functions. Then you can reset it in a function called resetTimer. See below:
var timer;
function startTimer(duration, display) {
timer = duration;
var 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 = duration;
}
}, 1000);
}
function resetTimer() {
timer = 60 * 5;
}
window.onload = function () {
fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
Here is a fiddle
Try this one. It starts a timer on load and gives you the ability to reset to the initial state.
<style>
#reset:hover {
cursor: pointer;
}
</style>
<div>Time left = <span id="timer">05:00</span><span id="reset" title="Reset Timer"> ↺</span></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var upgradeTime = 300; // seconds
var seconds = upgradeTime;
function timer() {
var days = Math.floor(seconds / 24 / 60 / 60);
var hoursLeft = Math.floor((seconds) - (days * 86400));
var hours = Math.floor(hoursLeft / 3600);
var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
var minutes = Math.floor(minutesLeft / 60);
var remainingSeconds = seconds % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('timer').innerHTML = pad(minutes) + ":" + pad(remainingSeconds);
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('timer').innerHTML = "Completed";
document.getElementById('reset').style.visibility = 'hidden';
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
// function resetTimer() {
// seconds = upgradeTime;
// }
$("#reset").click(function() {
seconds = upgradeTime;
});
</script>
Use something like addEventListener and call the named function.
(function() {
'use strict';
let reset = document.getElementById('reset');
reset.addEventListener('click', function() {
alert('reset');
//add here the function name to call them.
})
})();
<button id="reset">Reset</buton>
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>