Please help me! I make some simple app for bike renting in local storage. How to alert("Expired") when counter reach zero. When i put alert inside setInterval method, i have repeating alert evry second.
var interval = 5000;
function reset() {
localStorage.endTime = +new Date + interval;
}
if (!localStorage.endTime) {
reset();
}
var remaining = localStorage.endTime - new Date;
setInterval(brojanje, 100)
function brojanje() {
if (remaining > 0) {
$('#timer').text(Math.floor(remaining / 1000));
} else {
return;
}
}
<div Time remaining: <span id="timer">
</span>
</div>
<button onclick="reset()">Click me</button>
You need to stop your timer using clearInterval function.
var interval = setInterval(brojanje, 100);
function brojanje() {
if (remaining > 0) {
$('#timer').text(Math.floor(remaining / 1000));
} else {
console.log('Alert and kill timer');
alert('STOP!');
clearInterval(interval);
}
}
Here's a version I worked on. I removed the use of jquery too.
<script>
let duration = 5000
let end_time = 0
let the_interval
function reset () {
end_time = Date.now() + duration
localStorage.endTime = end_time
}
function start_interval () {
clearInterval(the_interval)
let timer = document.querySelector("#timer")
the_interval = setInterval(function () {
let remaining = end_time - Date.now()
if (remaining <= 0) {
clearInterval(the_interval)
return
}
timer.textContent = Math.floor(remaining / 1000)
}, 100)
}
window.onload = function () {
document.querySelector("#reset_button").addEventListener("click", function () {
reset()
start_interval()
})
end_time = parseInt(localStorage.endTime)
start_interval()
}
</script>
<span>Time remaining:</span> <span id="timer"></span></div>
<button id="reset_button">Click me</button>
Related
I want to call the function "displayTime" in "startTimer" but for some reason I get "Uncaught TypeError: this.displayTime is not a function" in the console.
let endTimer = "0";
let isRunning = false;
//! CLASS
class Timer {
constructor(endTimer, isRunning) {
this.endTimer = endTimer;
this.isRunning = isRunning;
}
startTimer() {
if (this.endTimer === "0") {
this.endTimer = new Date().getTime() + 1500000;
}
displayTime();
if (this.isRunning === true) {
this.pauseTimer();
this.isRunning
}
this.isRunning = true;
}
displayTime() {
let now = new Date().getTime();
let remainingTime = this.endTimer - now;
let minutes = Math.floor(remainingTime / 1000 / 60);
let seconds = Math.floor((remainingTime / 1000) % 60);
if (seconds < 10) {
seconds = "0" + seconds;
}
timer.innerHTML = `<h1>${minutes}:${seconds}</h1>`;
start.textContent = "STOP"
this.update = setInterval(this.displayTime, 100);
}
}
let newTimer = new Timer(endTimer, isRunning);
//! EVENT LISTENERS
start.addEventListener("click", newTimer.startTimer);
I think that I'm missing something obvious, but I don't understand what...
start.addEventListener("click", newTimer.startTimer.bind(newTimer));
Calling displayTime(); without the prepended keyword 'this' is the main issue (line 16 below) as mentioned by GenericUser and Heretic Monkey in the comments above.
You probably already know this but you'll want to define a pauseTimer() method/function as well.
let endTimer = "0";
let isRunning = false;
//! CLASS
class Timer {
constructor(endTimer, isRunning) {
this.endTimer = endTimer;
this.isRunning = isRunning;
}
}
Timer.prototype.startTimer = function() {
if (this.endTimer === "0") {
this.endTimer = new Date().getTime() + 1500000;
}
this.displayTime(); // this is the important line
if (this.isRunning === true) {
this.pauseTimer();
this.isRunning
}
this.isRunning = true;
}
Timer.prototype.displayTime = function() {
let now = new Date().getTime();
let remainingTime = this.endTimer - now;
let minutes = Math.floor(remainingTime / 1000 / 60);
let seconds = Math.floor((remainingTime / 1000) % 60);
if (seconds < 10) {
seconds = "0" + seconds;
}
//timer.innerHTML = `<h1>${minutes}:${seconds}</h1>`;
//start.textContent = "STOP"
this.update = setInterval(this.displayTime, 100);
}
Timer.prototype.pauseTimer = function() {
this.isRunning = false;
}
let newTimer = new Timer("0", true);
newTimer.startTimer();
//! EVENT LISTENERS
//start.addEventListener("click", newTimer.startTimer);
class Timer {
startTimer() {
// You forgot this keyword
this.displayTime();
}
displayTime() {
console.log('do something');
}
}
let newTimer = new Timer();
// addEventListener changes the context of this.
// Using an arrow function will keep 'this' keyword in tact inside startTimer method
start.addEventListener('click', () => newTimer.startTimer)
I'm trying to make my countdown timer do the following 4 things
When 'start' is clicked, change button to 'stop'
When 'stop' is clicked, stop the timer
When timer is stopped, show 'start' button
When 'reset' is clicked, reset the timer
$(document).ready(function() {
var counter = 0;
var timeleft = 5;
function nf(num) {
var s = '0' + num;
return s.slice(-2);
}
function convertSeconds(s) {
var min = Math.floor(s / 60);
var sec = s % 60;
return nf(min, 2) + ' ' + nf(sec, 2);
}
function setup() {
var timer = document.getElementById("timer");
timer.innerHTML = (convertSeconds(timeleft - counter));
var interval = setInterval(timeIt, 1000);
function timeIt() {
counter++;
timer.innerHTML = (convertSeconds(timeleft - counter));
if (counter == timeleft) {
clearInterval(interval);
}
}
}
$("#timer-button").click(function() {
setup();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I recently needed something like this too. I ended up writing an ES6 class for that.
In my solution, I used Events to notify other components about the timer. Here is a fiddle in which I met your needs, but I left my EventManager() calls to show what I actually did.
The used EventManager is this one. The timer counts in 100ms steps by default, but you can adjust this by calling startTimer() with the interval of choice.
class Timer {
constructor(maxTime, startValue = 0) {
// Actual timer value 1/10s (100ms)
this.value = startValue;
// Maximum time of the timer in s
this.maxTime = maxTime * 10;
this.timerRunning = false;
}
/**
* Starts the timer. Increments the timer value every 100ms.
* #param {number} interval in ms
*/
startTimer(interval = 100) {
if (!this.timerRunning) {
let parent = this;
this.timerPointer = setInterval(function() {
if (parent.value < parent.maxTime) {
parent.value++;
//EventManager.fire('timerUpdated');
$("span").text(parent.value / 10 + "/" + parent.maxTime / 10);
} else {
parent.stopTimer();
//EventManager.fire('timeExceeded');
$("button").text("Start");
this.resetTimer();
$("span").text("Countdown over");
}
}, interval);
this.timerRunning = true;
}
}
// Stops the Timer.
stopTimer() {
clearInterval(this.timerPointer);
this.timerRunning = false;
}
// Resets the timer and stops it.
resetTimer() {
this.stopTimer();
this.value = 0;
$("span").text("0/" + this.maxTime/10);
//EventManager.fire('timerUpdated');
}
// Resets the timer and starts from the beginning.
restartTimer() {
this.resetTimer();
this.startTimer();
}
}
let timer = new Timer(6);
$("#start-stop").click(function() {
if (timer.timerRunning) {
timer.stopTimer();
$("#start-stop").text("Start");
} else {
timer.startTimer();
$("#start-stop").text("Stop");
}
});
$("#reset").click(function() {
timer.resetTimer();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="start-stop">
Start
</button>
<button id="reset">
Reset
</button>
<span>Timer: </span>
const div = document.querySelector('div');
const btn = document.querySelector('#timerBtn');
const resetbtn = document.querySelector('#reset');
let startFlag = 0;
let count = 0;
let intervalId;
const ms = 1000;
div.textContent = count;
btn.addEventListener('click', function() {
startFlag = startFlag + 1;
if(startFlag%2 !== 0) { // Start button clicked;
btn.textContent = 'Stop';
startTimer();
} else {
btn.textContent = 'Start';
stopTimer();
}
});
resetbtn.addEventListener('click', function() {
count = 0;
div.textContent = count;
});
function startTimer() {
intervalId = setInterval(() => {
count = count + 1;
div.textContent = count;
}, 1000);
}
function stopTimer() {
clearInterval(intervalId);
}
<div></div>
<button id="timerBtn">Start</button>
<button id="reset">Reset</button>
If I can try to make everyone understand what I am looking for, I am looking for the value of the interval to change to lets say "5000ms" after "1000ms" and then it would go on to the next value such as "2000ms" and repeat all over again! The current code I have is pretty much a stopwatch, It adds the number 1 to a paragraph every 1000ms. Any help is extremely appreciated!
<script>
function myFunction() {
clicks += 1;
}
setInterval(myFunction, 1000);
var clicks = 0;
function myFunction() {
clicks += 1;
document.getElementById("demo").innerHTML = clicks;
// connects to paragraph id
}
</script>
<p id="demo"></p>
<!--connects to getElementById-->
Don't use setInterval - this functions will perform the action in any given interval, which you set once.
Use setTimeout instead. Which performs the action only once after given interval, and then call it again and again with different interval values.
what about this
<script>
var clicks = 0;
myFunction(1000);
function myFunction( currentInterval ) {
clicks ++;
document.getElementById("demo").innerHTML = clicks;
if ( currentInterval == 1000 )
{
currentInterval = 5000;
}
else if ( currentInterval == 5000 )
{
currentInterval = 2000;
}
else
{
currentInterval = 1000;
}
setTimeout( function(){ myFunction( currentInterval ) }, currentInterval );
}
</script>
<p id="demo"></p>
you should try using recursive timeout instead of interval
var timeout = 1000;
var timer;
function startTimer() {
clearTimeout(timer);
timer = setTimeout(function() {
console.log('tick');
startTimer();
}, timeout);
}
startTimer();
// timeout = 2000
// timeout = 500
// clearTimeout(timer); to cancel
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
This might look a little complicated but you can try something like this:
JSFiddle.
(function() {
var interval = null;
var limit = 5;
function initInterval(callback, index) {
var msToSec = 1000;
if (interval) {
clearInterval();
}
console.log("Delay: ", index)
interval = setInterval(callback, index * msToSec);
}
function clearInterval() {
window.clearInterval(interval);
interval = null;
}
function resetInterval(callback, count) {
clearInterval();
initInterval(callback, count);
}
function main() {
var count = 1;
var notify = function() {
console.log("Hello World: ", count);
var _nextCount = ((count++) % limit) + 1;
if (count < 10) {
resetInterval(notify, _nextCount);
} else {
console.log("Stoping loop...");
clearInterval();
}
}
initInterval(notify, count);
}
main()
})()
I have this countDown, each time I press the buttons I want to add 5 more seconds.
When the time is updated the function count down the new value but the old value as well.
Can someone explain me why?
http://jsfiddle.net/xqdj3uz8/1/
$('button').on('click', function() {
var newtime = parseInt(seconds + 5);
timer(newtime);
});
You could try by using a global variable to track the amount of seconds left. Clicking on the button will increment this variable.
var timeLeft = 10;
function timer() {
var i = setInterval(function () {
$('span').text(timeLeft);
timeLeft--
if (timeLeft === 0) clearInterval(i)
}, 1000)
}
function addSeconds(n) {
timeLeft += n
}
timer()
$('button').on('click', function () {
addSeconds(5)
});
Demo (1): http://jsfiddle.net/xqdj3uz8/21/
please use it
function timer(time) {
var interval = setInterval(countDown, 1000);
function countDown() {
time--;
$('span').text(time);
if(time === 0) {
clearInterval(interval);
}
}
$('button').on('click', function() {
time=parseInt(time + 5);
$('span').text(time);
});
}
var seconds = 5;
timer(seconds);
Try This
Working JSFIDDLE
var gblTime=0;
function timer(time) {
var interval = setInterval(countDown, 1000);
gblTime = time;
function countDown() {
gblTime--;
$('span').text(gblTime);
if(gblTime <= 0) {
clearInterval(interval);
}
}
}
var seconds = 5;
timer(seconds);
$('button').on('click', function() {
gblTime = parseInt(gblTime +1+ 5);
//timer(newtime);
});
You are adding new intervals that are independent form each other, try:
var time = 5;
var seconds = 5;
function timer() {
var interval = setInterval(countDown, 1000);
function countDown() {
$('span').text(time);
if(time === 0) {
clearInterval(interval);
}
time--;
}
}
timer();
$('button').on('click', function() {
if(time==0){
timer();
}
time += seconds;
});
Currently I have a timer that counts down from two minutes. What i need is a button that will stop and reset the timer. Here is the code i have.
js
$(function () {
var $startTimer = $('#startTimer');
var $timerDisplay = $('#timerDisplay');
var time = 120;
$timerDisplay.hide();
$startTimer.click(function () {
$startTimer.prop('disabled', true);
$timerDisplay.show();
var timeRemaining = time;
var intervalId = setInterval(function () {
var timeStamp = Math.floor(timeRemaining/60) + ':' + timeRemaining%60;
$timerDisplay.text(timeStamp);
if (timeRemaining === 0) {
clearInterval(intervalId);
$timerDisplay.fadeOut();
alert('Time is up, please submit a vote :)');
$startTimer.prop('disabled', false);
} else {
timeRemaining--;
}
}, 1000);
});
});
HTML
<div id="timerDisplay"></div>
<button id="startTimer">Start Timer</button>
here is a working code pen of the timer but not the color change http://codepen.io/Chevex/pen/RNomGG
Try ...
HTML:
<div id="timerDisplay"></div>
<button id="startTimer">Start Timer</button>
<button id="stopTimer" disabled>Stop and Reset Timer</button>
JS:
$(function () {
var $startTimer = $('#startTimer');
var $stopTimer = $('#stopTimer');
var $timerDisplay = $('#timerDisplay');
var time = 120;
var intervalId;
$timerDisplay.hide();
$startTimer.click(function () {
$startTimer.prop('disabled', true);
$stopTimer.prop('disabled', false);
$timerDisplay.show();
var timeRemaining = time;
intervalId = setInterval(function () {
var timeStamp = Math.floor(timeRemaining / 60) + ':' + timeRemaining % 60;
$timerDisplay.text(timeStamp);
if (timeRemaining === 0) {
clearInterval(intervalId);
$timerDisplay.fadeOut();
alert('Time is up, please submit a vote :)');
$startTimer.prop('disabled', false);
} else {
timeRemaining--;
}
}, 1000);
});
$stopTimer.click(function() {
time = 120;
$startTimer.prop('disabled', false);
$stopTimer.prop('disabled', true);
$timerDisplay.hide();
clearInterval(intervalId);
$timerDisplay.text("");
});
});
Basically, I moved the interval variable and created a stop timer button; the click functionality performs the reset, using the code similar to what you performed before.
jsFiddle: http://jsfiddle.net/rfornal/w29ofkek/
create a input button as follows
<input type='button' value="Stop" onclick="StopTimer();"/>
Change your code to following
var intervalId =null;
$(function () {
var $startTimer = $('#startTimer');
var $timerDisplay = $('#timerDisplay');
var time = 120;
$timerDisplay.hide();
$startTimer.click(function () {
$startTimer.prop('disabled', true);
$timerDisplay.show();
var timeRemaining = time;
intervalId = setInterval(function () {
var timeStamp = Math.floor(timeRemaining/60) + ':' + timeRemaining%60;
$timerDisplay.text(timeStamp);
if (timeRemaining === 0) {
clearInterval(intervalId);
$timerDisplay.fadeOut();
alert('Time is up, please submit a vote :)');
$startTimer.prop('disabled', false);
} else {
timeRemaining--;
}
}, 1000);
});
});
function StopTimer()
{
clearInterval(intervalId);
}