Is there any way to make a countdown with 60 seconds... Here is the code for timer:
var count = 0;
var timer = $.timer(function() {
$('#counter').html(++count);
});
timer.set({ time : 1000, autostart : true });
What I need to chabge to make this code like countdown> THANKS
Counts from 0 to 60.
var count = 0, timer = setInterval(function() {
$("#counter").html((count++)+1);
if(count == 59) clearInterval(timer);
}, 1000);
Or from 60 to 0:
var count = 60, timer = setInterval(function() {
$("#counter").html(count--);
if(count == 1) clearInterval(timer);
}, 1000);
var count = 60;
var timer = $.timer(function() {
$('#counter').html(--count);
});
timer.set({ time : 1000, autostart : true });
var timer;
var count = 60;
$("#counter").text(count);
//update display
timer = setTimeout(update, 1000);
//this allows for 'clearTimeout' if needed
function update()
{
if (count > 0)
{
$("#counter").text(--count);
timer = setTimeout(update, 1000);
}
else
{
alert("Done!!!");
}
}
Related
I have a countdown timer that is working, but I cannot figure out how to get it to stop at 0.
Here's what I have:
let totalTime = 10;
let timeElapsed = 0;
let interval;
let currentQuestion = 0;
let currentAnswer = 0;
function startTimer() {
runTimer.textContent = totalTime;
interval = setInterval(function () {
totalTime--;
runTimer.textContent = totalTime;
}
, 1000);
if (interval <= 0) {
stopTimer();
}
}
function stopTimer() {
clearInterval(interval);
}
I tried creating an if statement to clearInterval once the timer reaches 0 but something is not right.
Just check if totalTime is <= 0 but inside the setInterval function like this.
function startTimer() {
runTimer.textContent = totalTime;
interval = setInterval(function () {
totalTime--;
runTimer.textContent = totalTime;
if (totalTime <= 0) {
stopTimer();
}
} , 1000);
}
A have an eggtimer which can be stopped after clicking on the button "stop". What I want is making this timer working again (from the point where it stopped) after clicking "cancel" in a confirm box. Any sugestions? Thanks for help :)
<!DOCTYPE html>
<html>
<body onload="timer();">
<button onclick="exit();">stop</button>
<p id="seconds">30</p>
<script type="text/javascript">
var clock;
function timer () {
var start = new Date().getTime();
clock = setInterval(function() {
var seconds = Math.round(30 - (new Date().getTime() - start) / 1000);
if (seconds >= 0)
document.getElementById('seconds').innerHTML = seconds;
else
clearInterval(clock);
if (seconds==0) {window.location.href="something.com";
return;
}
}, 1000);
}
function exit(){
clearInterval(clock);
var result = confirm("Are you leaving?");
if (result == true) {
window.location.href="somewhere.com";
}
else {
timer();} // <-- ????
}
</script>
</body>
</html>
You can create a variable that holds in what seconds you are ;
var sec = seconds;
Change your function timer with the timer you want to start as a paramerter
function timer (time)
var clock;
var sec;
function timer (time) {
var start = new Date().getTime();
clock = setInterval(function() {
var seconds = Math.round(time - (new Date().getTime() - start) / 1000);
sec = seconds;
if (seconds >= 0){
document.getElementById('seconds').innerHTML = seconds;
}
else{
clearInterval(clock);
}
if (seconds==0){
window.location.href="something.com";
return;
}
}, 1000);
}
function exit(){
clearInterval(clock);
var result = confirm("Are you leaving?");
if (result == true) {
window.location.href="somewhere.com";
}
else {
console.log(sec);
timer(sec);} // <-- ????
}
<body onload="timer(30);">
<button onclick="exit();">stop</button>
<p id="seconds">30</p>
</body>
Here's a working example.
I moved the seconds variable outside the function so it persists and can be used to re-start the timer.
Also, I added an argument to the timer() function so the count down amount can be changed.
Note that the granularity is at the second level, so the actual count down time might eventually be longer than 30 seconds, but I believe it is acceptable in this use case.
var clock;
var seconds;
function timer(wait) {
var start = new Date().getTime();
clock = setInterval(function() {
seconds = Math.round(wait - (new Date().getTime() - start) / 1000);
if (seconds >= 0)
document.getElementById('seconds').innerHTML = seconds;
else
clearInterval(clock);
if (seconds == 0) {
window.location.href = "something.com";
return;
}
}, 1000);
}
function exit() {
clearInterval(clock);
var result = confirm("Are you leaving?");
if (result == true) {
window.location.href = "somewhere.com";
} else {
timer(seconds);
} // <-- ????
}
timer(30);
<button onclick="exit();">stop</button>
<p id="seconds">30</p>
I want to make a jQuery timer count down. It should have days, day, month, hours, seconds. I used this below code, but it is not working. When the browser is refreshed, the counter is restarting. Please help me to correct this code.
This is the jsFiddle
https://jsfiddle.net/saifudazzlings/LfLdo381/
The js code:
var sec = 60;
var min = 100;
var hr = 24;
var updateTimer = function() {
var timer = localStorage.getItem('timer') || 0;
var timermin = localStorage.getItem('timermin') || 0;
var timerhr = localStorage.getItem('timerhr') || 0;
$("div#timermin").html(timermin);
$("div#timerhr").html(timerhr);
if (timer === 0) {
$("div#timer").html("00");
} else if (timer <= 1) {
timer--;
timermin--;
localStorage.setItem('timermin', timermin);
$("div#timermin").html(timermin);
if (timermin < 1) {
if (timerhr == 0) {
localStorage.removeItem('timermin', timermin);
$("div#timermin").html("00");
localStorage.removeItem('timer', timer);
$("div#timer").html("00");
localStorage.removeItem('timerhr', timerhr);
$("div#timerhr").html("00");
} else {
timerhr--;
localStorage.setItem('timerhr', timerhr);
$("div#timerhr").html(timerhr);
localStorage.setItem('timermin', min);
$("div#timermin").html(timermin);
}
//timerhr--;
//localStorage.setItem('timerhr', timerhr);
//$("div#timerhr").html(timerhr);
//localStorage.setItem('timermin', min);
//$("div#timermin").html(timermin);
}
localStorage.setItem('timer', sec);
$("div#timer").html(timer);
} else {
timer--;
localStorage.setItem('timer', timer);
$("div#timer").html(timer);
if (timermin == 0) {
localStorage.removeItem('timer', timer);
$("div#timer").html("00");
$("div#countermessage").html("00");
}
}
};
$(function() {
$("#start").click(function() {
localStorage.setItem('timer', sec);
});
$("#start2").click(function() {
localStorage.setItem('timermin', min);
localStorage.setItem('timerhr', hr);
});
setInterval(updateTimer, 1000);
$(window).load(function() {
localStorage.setItem('timer', sec);
localStorage.setItem('timermin', min);
localStorage.setItem('timerhr', hr);
});
});
I am trying to get this script to count up to a specified number and back down to a specified number as follows: 19200, 38400, 57600, 76800, 96000, 76800, 57600, 38400, 19200 — repeatedly. So far this is what I have but I cannot seem to make it count down in the order above, it restarts from 19200 again.
$(function() {
var seconds = 19200;
var timerId = setInterval(function() {
seconds = seconds + 19200;
$("#counter").text(seconds);
if (seconds > "76800") {
clearInterval(seconds);
seconds = seconds - "19200";
}
}, 500);
});
A little issue with the logic, the condition
if (seconds > "76800") {
would always try to keep the seconds above 76800.
Rather you would want a flag to track the direction of the count. Check out below:
UPDATED:
Working demo at
JSFiddle
$(function () {
var increment = 19200;
var seconds = increment;
var countUp = true;
var timerId = setInterval(function () {
$("#counter").text(seconds);
if (countUp) {
seconds += increment;
} else {
seconds -= increment;
}
if (countUp && seconds > increment*4) {
countUp = false;
} else if (!countUp && seconds <= increment) {
countUp = true;
}
}, 500);
});
Check the below function
$(function() {
var seconds = 19200;
action = 'add';
var timerId = setInterval(function() {
$("#counter").text(seconds);
if (seconds == 96000) {
action = 'remove';
} else if (seconds == 19200) {
action = 'add'
}
if (action == 'add')
seconds += 19200;
else if (action == 'remove')
seconds -= 19200;
}, 500);
});
I think this is a little more elegant
var increment = 19200,
seconds = increment;
var timer = setInterval(function() {
console.log(seconds);
seconds += increment;
if (seconds > 76800 || seconds < 19200) {
increment *= -1;
}
}, 500);
jsfiddle
For practice I am trying to display a number that increments from 0 - 9, then decrements from 9 - 0, and infinitely repeats.The code that I have so far seems to be close, but upon the second iteration the setInterval calls of my 2 respective functions countUp and countDown seem to be conflicting with each other, as the numbers displayed are not counting in the intended order... and then the browser crashes.Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Algorithm Test</title>
</head>
<body onload = "onloadFunctions();">
<script type = "text/javascript">
function onloadFunctions()
{
countUp();
setInterval(countUp, 200);
}
var count = 0;
function countUp()
{
document.getElementById("here").innerHTML = count;
count++;
if(count == 10)
{
clearInterval(this);
countDown();
setInterval(countDown, 200);
}
}
function countDown()
{
document.getElementById("here").innerHTML = count;
count--;
if(count == 0)
{
clearInterval(this);
countUp();
setInterval(countUp, 200);
}
}
</script>
From 0 - 9, up and down: <div id = "here"></div>
</body>
</html>
You need to capture the return value from setInterval( ... ) into a variable as that is the reference to the timer:
var interval;
var count = 0;
function onloadFunctions()
{
countUp();
interval = setInterval(countUp, 200);
}
/* ... code ... */
function countUp()
{
document.getElementById("here").innerHTML = count;
count++;
if(count === 10)
{
clearInterval(interval);
countUp();
interval = setInterval(countUp, 200);
}
}
#Claude, you are right, the other solution I proposed was too different from original code. This is another possible solution, using setInterval and switching functions:
function onloadFunctions() {
var count = 0;
var refId = null;
var target = document.getElementById("aux");
var countUp = function() {
target.innerHTML = count;
count ++;
if(count >= 9) {
window.clearInterval(refId);
refId = window.setInterval(countDown, 500);
}
}
var countDown = function() {
target.innerHTML = count;
count --;
if(count <= 0) {
window.clearInterval(refId);
refId = window.setInterval(countUp, 500);
}
}
refId = window.setInterval(countUp, 500);
}
clearInterval(this);. You can't do that. You need to save the return value from setInterval.
var interval;
function onloadFunctions()
{
countUp();
interval = setInterval(countUp, 200);
}
var count = 0;
function countUp()
{
document.getElementById("here").innerHTML = count;
count++;
if(count == 10)
{
clearInterval(interval);
countDown();
interval = setInterval(countDown, 200);
}
}
function countDown()
{
document.getElementById("here").innerHTML = count;
count--;
if(count == 0)
{
clearInterval(interval);
countUp();
interval = setInterval(countUp, 200);
}
}
try this:
...
<body onload = "onloadFunctions();">
<script>
var cup, cdown; // intervals
var count = 0,
here = document.getElementById("here");
function onloadFunctions() {
cup = setInterval(countUp, 200);
}
function countUp() {
here.innerHTML = count;
count++;
if(count === 10) {
clearInterval(cup);
cdown = setInterval(countDown, 200);
}
}
function countDown() {
here.innerHTML = count;
count--;
if(count === 0) {
clearInterval(cdown);
cup = setInterval(countUp, 200);
}
}
</script>
From 0 - 9, up and down: <div id = "here"></div>
</body>
you could also create a single reference to #here element. Use always === instead of ==
There are many ways to solve this problem, the following is my suggestion:
function onloadFunctions() {
var count = 0;
var delta = 1;
var target = document.getElementById("here");
var step = function() {
if(count <= 0) delta = 1;
if(count >= 9) delta = -1;
count += delta;
target.innerHTML = count;
window.setTimeout(step, 500);
}
step ();
}
PS: it's safer to use setTimeout than setInteval.
/** Tools */
const log = require('ololog').configure({
locate: false
})
let count = 0
let interval__UP
let interval__DOWN
function countUp () {
count++
log.green('countUp(): ', count)
if (count == 5) {
clearInterval(interval__UP)
interval__DOWN = setInterval(function () {
countDown()
}, 1000)
}
}
function countDown () {
count--
log.red('countDown(): ', count)
if (count == 0) {
clearInterval(interval__DOWN)
interval__UP = setInterval(function () {
countUp()
}, 3000)
}
}
function start () {
countUp()
log.cyan('start()')
interval__UP = setInterval(function () {
countUp()
}, 2000)
}
start()
Console Log shows it's working