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);
Related
I created 1 min time loop for my website. If the timer ends it will show some results.after that timer will start again 1:00. But sometimes error comming like, something time going very high (2 min ,50min, 5sec, 1sec ). It not stay in 1min loop. Please help me sir to fix this error.
Code:
function timerFunc(date) {
// Set the date we're counting down to
var countDownDate = new Date(date).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);
var forseconds = prependZero(seconds);
// Output the result in an element with id="demo"
document.getElementById("timer").innerHTML = "0" + minutes + ": " + forseconds;
// If the count down is over, write some text
if (distance <= 0) {
clearInterval(x);
}
}, 1000);
}
function prependZero(number) {
if (number <= 9)
return "0" + number;
else
return number;
}
<span id="timer"></span>
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 created a simple extension that works as a countdown with a setTimer, it's suppose to be constantly running, doing his action, and then restarting itself. I displayed the countdown as the badge text of my extension, and I now have it frozen at 56:18 (countdown starts from 59:59 - the timer froze one time before, around 43 minutes so the time seems to be random) after completing his first row
I have a listener on update, that will check the badge text, and if it's empty, starts the timer, otherwise send a message in the console. I'm currently receiving messages in the console if I refresh a page
This script is in the background Script, I haven't made it persistent (don't know the use for it...) and I had Chrome in the background, while I was working on Excel.
Here's the code of my countdown:
var DelaiProtect = 5
var Countdowntimer = 60
function Countdown() {
countDownDate = new Date().getTime()+(Countdowntimer*60*1000+5);
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(seconds < 10 && seconds >= 0) {
seconds = "0"+Math.floor((distance % (1000 * 60)) / 1000);
}
var BadgeCD = minutes + ":" + seconds;
console.log("Countdown : "+ days + " jours "+hours+":"+minutes+":"+seconds)
chrome.browserAction.setBadgeText({text: String(BadgeCD)});
chrome.browserAction.setBadgeBackgroundColor({color: '#336699'});
chrome.tabs.query({url: 'http://localhost:4848/sense/app/*'}, foundTabs => {
if (foundTabs.length >= 1) {
}
else {
console.log("STOP plus d'onglets QlikSense")
clearInterval(x);
chrome.browserAction.setBadgeText({text: ""});
}
});
var DepuisQd = now - lastUseQlik
if (distance < 1 && DepuisQd > (1000*DelaiProtect*60)) {
clearInterval(x);
chrome.browserAction.setBadgeText({text: "..."});
chrome.tabs.query({url: 'http://localhost:4848/sense/app/*'}, foundTabs => {
if (foundTabs && foundTabs.length) {
foundTabs.forEach(tab => chrome.tabs.reload(tab.id));
console.log("chargement effectué ! "+foundTabs.length)
}
});
Countdown();
}
if (distance < (1000*60*DelaiProtect) && (distance+DepuisQd) < (1000*DelaiProtect*60)) {
var minutes2 = Math.floor((((1000*DelaiProtect*60)-DepuisQd) % (1000 * 60 * 60)) / (1000 * 60));
var seconds2 = Math.floor((((1000*DelaiProtect*60)-DepuisQd) % (1000 * 60)) / 1000);
if(seconds2 < 10 && seconds2 >= 0) {
var seconds2 = "0" + Math.floor((((1000*DelaiProtect*60)-DepuisQd) % (1000 * 60)) / 1000);
}
var BadgeCD2 = minutes2+":"+seconds2;
chrome.browserAction.setBadgeText({text: String(BadgeCD2)});
chrome.browserAction.setBadgeBackgroundColor({color: '#FF0000'});
}
}, 1000);
};
Thanks for your help, as I have no idea of where to look at first...
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.
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>