Develop Reference

Javascript time counter running backwards

Hi guys I have a time counter I want to count from 15 to 0. but with the current version it counts from 0 to 15. it should be running backwards. any suggestions?
// Set the minutes
var countDownMins = new Date().getMinutes() + 15;
// Update the count down every 1 second
var x = setInterval(function() {
// Get current time
var now = new Date().getTime();
var distance = now + countDownMins;
mins = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
secs = Math.floor((distance % (1000 * 60)) / 1000);
// Output the results
document.getElementById("minutes").innerHTML = mins;
document.getElementById("seconds").innerHTML = secs;
if (mins < 0) {
clearInterval(x);
}
}, 1000);

A few small modifications should make this work nicely!
You could save the countdown timer to local storage like so:
var countDownTarget = localStorage.getItem('countDownTarget');
if (!countDownTarget) {
countDownTarget = new Date().getTime() + 15 * 60 * 1000;;
localStorage.setItem('countDownTarget', countDownTarget);
}
var countDownTarget = new Date().getTime() + 15 * 60 * 1000;
function showClock(target) {
const distance = target - new Date().getTime();
const mins = distance < 0 ? 0: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const secs = distance < 0 ? 0: Math.floor((distance % (1000 * 60)) / 1000);
// Output the results
document.getElementById("minutes").innerHTML = mins;
document.getElementById("seconds").innerHTML = secs;
}
showClock(countDownTarget);
// Update the count down every 1 second
var x = setInterval(function() {
showClock(countDownTarget);
if (countDownTarget - new Date().getTime() < 0) {
clearInterval(x);
}
}, 1000);
Minutes: <b id="minutes"></b>
Seconds: <b id="seconds"></b>

Try this way
// Set the minutes
var countDownMins = new Date().getTime() + (1000 * 60 * 15);
// Update the count down every 1 second
var x = setInterval(function() {
// Get current time
var now = new Date().getTime();
var distance = countDownMins - now;
mins = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
secs = Math.floor((distance % (1000 * 60)) / 1000);
// Output the results
document.getElementById("minutes").innerHTML = mins;
document.getElementById("seconds").innerHTML = secs;
if (mins < 0) {
clearInterval(x);
}
}, 1000);

How to make timer in JavaScript?

I want reverse timer for session time out. I got one code on codepen. This code is clockwise timer , I tried to make it anti-clock wise , I am failed. Please suggest me. I want to make 1 hour or 59min 59sec time out. Please help me Here is the codepen demo.
if((intervalCounter%1000)==0){
currentTime += 1000;
var appendHour = currentTime / (1000 * 60 * 60) | 0;
var appendMinute = currentTime % (1000 * 60 * 60) / (1000 * 60) | 0;
var appendSecond = currentTime % (1000 * 60) / 1000 | 0;
appendHour = appendHour < 10 ? "0" + appendHour : appendHour;
appendMinute = appendMinute < 10 ? "0" + appendMinute : appendMinute;
appendSecond = appendSecond < 10 ? "0" + appendSecond : appendSecond;
hour.html(appendHour);
min.html(appendMinute);
sec.html(appendSecond);
}

This code is work for anti-clockwise direction.I hope you get some idea from below example.
// Set the date we're counting down to
var countDownDate = new Date("July 5, 2019 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="demo"></p>

I want make a local timer

i want make a local countdown for 1H & i want code to pause the timer & resume it of course! & i searched on web but i found codes that work to count incoming days
PS: code is demo from w3schools (but it's still counting incoming days so yeah)
var countDownDate = new Date("Jan 5, 2019 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
expected results: code counting 1h
actual results: code counting incoming days

Starting from your code, you can get what you want with just a few changes:
const ONE_HOUR_ON_MILLIS = 1000 * 60 * 60;
var countDownDate;
var running;
var remainingMillis;
var update;
initCountdown();
function startInterval() {
return setInterval(function () {
var now = new Date().getTime();
remainingMillis = countDownDate - now;
var hours = Math.floor((remainingMillis % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((remainingMillis % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remainingMillis % (1000 * 60)) / 1000);
var millis = Math.floor((remainingMillis % 1000));
document.getElementById("demo").innerHTML = hours + ":" + minutes + ":" + seconds + "." + millis;
if (remainingMillis < 0) {
clearInterval(update);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 10);
}
function stop() {
if (running) {
var now = new Date().getTime();
remainingMillis = countDownDate - now;
running = false;
clearInterval(update);
} else {
alert('cant stop');
}
}
function start() {
if (!running) {
countDownDate = new Date().getTime() + remainingMillis;
update = startInterval();
running = true;
}
}
function initCountdown() {
countDownDate = new Date().getTime() + ONE_HOUR_ON_MILLIS;
update = startInterval();
running = true;
}
function restart() {
initCountdown();
debugger;
}
<span id="demo">COUNTDOWN</span>
<div class="controls">
<button id="start" onclick="start()">Start</button>
<button id="stop" onclick="stop()">Stop</button>
<button id="restart" onclick="restart()">Restart</button>
</div>
This should do what you want.

Pure JS countdown timer

I am trying to create a countdown timer, when i click on a button the timer will run according to the value 5, 15, 30 .
I could create a timer but my problem when using the set interval is i can't pass argument to the callback function, when i run the callback function with a preset value it runs fine, but when i am passing an argument it crashes,
var currentTime = new Date();
function displayCurrentTime() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var display = document.getElementById('now');
display.innerHTML = (hours + '.' + minutes + '.' + seconds);
return(new Date().getTime());
}
setInterval(displayCurrentTime, 1000);
function endTime(m) {
var display = document.getElementById('endTime');
var endingTime = new Date(currentTime.getTime() + (m * 60 * 1000));
var hours = endingTime.getHours();
var minutes = endingTime.getMinutes();
var seconds = endingTime.getSeconds();
display.innerHTML = (hours + '.' + minutes + '.' + seconds);
return endingTime.getTime();
}
function counter() {
var display = document.getElementById('counter');
var countingTime = endTime(1) - displayCurrentTime();
var days = Math.floor(countingTime / (1000 * 60 * 60 * 24));
var hours = Math.floor((countingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((countingTime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((countingTime % (1000 * 60)) / 1000);
return (display.innerHTML = (hours + '.' + minutes + '.' + seconds));
}
<button id="5" onclick="setInterval(counter, 1000)">5</button>
<button id="15" onclick="setInterval(counter, 1000)">15</button>
<button id="30" onclick="setInterval(counter, 1000)">30</button>
<h3>Current Time</h3>
<p id="now"></p>
<h3>Your time will end at</h3>
<p id="endTime"></p>
<h3>You still have</h3>
<p id="counter"></p>

You can pass any arguments that you want after the delay param in the setInterval. Eg. setInterval(foo, 1000, bar). bar will be passed as a argument to foo every second.

I would simply set the end-time on click and start the counter. So your counter
var endTime = null;
function displayCurrentTime() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var display = document.getElementById('now');
display.innerHTML = (hours + '.' + minutes + '.' + seconds);
//just call counter here if endTime is set. in this case you only need to call updateEndTime on click
//if(endTime != null) {
// counter();
//}
}
//to avoid 1 second delay on start up
displayCurrentTime()
setInterval(displayCurrentTime, 1000);
function updateEndTime(m) {
var display = document.getElementById('endTime');
var currentTime = new Date();
endTime = new Date(currentTime.getTime() + (m * 60 * 1000));
var hours = endTime.getHours();
var minutes = endTime.getMinutes();
var seconds = endTime.getSeconds();
display.innerHTML = (hours + '.' + minutes + '.' + seconds);
}
function counter() {
var display = document.getElementById('counter');
var currentTime = new Date();
var countingTime = endTime - currentTime;
var days = Math.floor(countingTime / (1000 * 60 * 60 * 24));
var hours = Math.floor((countingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((countingTime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((countingTime % (1000 * 60)) / 1000);
display.innerHTML = (hours + '.' + minutes + '.' + seconds);
}
<button id="5" onclick="updateEndTime(5);counter();setInterval(counter, 1000)">5</button>
<button id="15" onclick="updateEndTime(15);counter();setInterval(counter, 1000)">15</button>
<button id="30" onclick="updateEndTime(30);counter();setInterval(counter, 1000)">30</button>
<h3>Current Time</h3>
<p id="now"></p>
<h3>Your time will end at</h3>
<p id="endTime"></p>
<h3>You still have</h3>
<p id="counter"></p>
Btw. you probably should only use 1 setInterval and update both counters in 1 call checking if endTime is set or not

Countdown timer expires start a different countdown

I have the following code. I want when this timer expires, another timer should start instead of expired text.
var countDownDate = new Date("Oct 25, 2017 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + " Days " + hours + " Hrs "
+ minutes + " Min " + seconds + " Sec ";
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "T**imer Expired - instead of this another timer**";
}
}, 1000);

Create a function, and call it every time the timer is finished.
$(document).ready(function() {
var i = 1 ;
setTimer(i) ;
}) ;
function setTimer(i) {
var countDownDate = new Date().getTime() + 3000 ;
var x = setInterval(function() {
var now = new Date().getTime() ;
var distance = countDownDate - now ;
if (distance < 0) {
clearInterval(x);
console.log("Timer " + i + " Finished. New Timer Stated!") ;
setTimer(i+1) ;
}
else {
console.log("Timer " + i + " Running") ;
}
}, 1000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This code should do the trick. Each time the counter get to 0, you redefined your count down to the same amount of time there was initially between countDownDate and Now. If this amount is variable, you might modify the assignment of distanceToAdd
// Changed the value to reach for the demo
var countDownDate = new Date().getTime() + 20000;
// Fixed Value to add each time the counter get to 0
var distanceToAdd = countDownDate - new Date().getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (distance < 0) {
//Add Time to your timer goal instead of canceling interval
countDownDate += distanceToAdd;
}
else {
document.getElementById("demo").innerHTML = days + " Days " + hours + " Hrs "
+ minutes + " Min " + seconds + " Sec ";
}
}, 1000);
<html>
<head>
</head>
<body>
<div id="demo"></div>
</body>
</html>