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>
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 hardly have knowledge of jquery. I am trying to make a countdown so after searching I found the code below.
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);
}
$('.start').on('click', function(){
var oneMinute = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinute, display);
})
But the countdown repeats after one minute. Like when it goes 03, 02, 01, it again starts with 59.
How to stop it?
I want to alert message and stop timer after given minutes.
The setInterval function returns an identifier. Store the interval ID in a variable. This allows you to use clearInterval() to cancel the interval when required.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var interval = 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) {
clearInterval(interval);
}
}, 1000);
}
$('.start').on('click', function(){
var oneMinute = 5 * 1, // 5 Seconds for easy testing
display = document.querySelector('#time');
startTimer(oneMinute, display);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="time">
00:00
</div>
<button type="button" class="start">
START
</button>
You need to store the interval ID and use clearInterval(intervalId); to stop it.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var 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) {
clearInterval(intervalId);
}
}, 1000);
}
$('.start').on('click', function(){
var oneMinute = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinute, display);
})
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 have a requirement of one minute timer in javascript in that as soon as 1 minute completed,Then show alert and halt script but in the code i try to change the condition but is not working,So i want after one minute alert should get and stop script
<script>
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;
// alert(timer);
if (--timer < 0) {
timer = duration;
}
// if one minute is completed show alert and stop script
}, 1000);
}
window.onload = function () {
var oneMinutes = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinutes, display);
};
</script>
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var x=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;
// alert(timer);
if (--timer < 0) {
timer = duration;
alert('Timeup');
clearInterval(x); //script will stop and will not be execute
}
}, 1000);
}
window.onload = function () {
var oneMinutes = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinutes, display);
};
</script>
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/