Develop Reference

How do I get Date but Manually enter time to then calculate countdown expiry?

I am I want to select a and back date a time, add 8 hours to the timer and start a countdown based on the calculated remaining time. Basic Webpage in HTML/CSS/JS to monitor curing time of a product. I need to set the timer of 8 hours after I have mixed the resin which can be a random start time.
I can hard code the deadline time from the newDate and getTime but I'm struggling to understand how to manually enter the time and to calculate then deadline time. The actual calculation is easy enough for variable t to then start the countdown, it is the backdated start time then adding 8 hours that stumps me.
<script>
var deadline = new Date("March 25, 2021 12:34:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var t = deadline - now;
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
if (t < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "Rotate";
}
}, 1000);
</script>

How to make double "if" condition in a countdown

I have the following javascript code:
function t5am() {
// Set the date we're counting down to
// Year, Month ( 0 for January ), Day, Hour, Minute, Second, , Milliseconds
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//:::::::::::: ::::::::::::
//:::::::::::: 5:00 AM ::::::::::::
//:::::::::::: ::::::::::::
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
// (AAAA,MM,DD,HH,mm,S));
var countDownDate = new Date(Date.UTC(2020,05,29,12,00,00));
// Update the count down every 1 second
var x = setInterval(function () {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
// GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
var distance = countDownDate - now - (3600000 * 1);
// 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"
for (const ele of document.getElementsByClassName("t5am")){
ele.innerHTML = (days + "<span>d</span> " + hours + "<span>h</span> "
+ minutes + "<span>m</span> " + seconds + "<span>s</span><br />")
}
// If the count down is over, write some text
if (distance < 0) {
for (const ele of document.getElementsByClassName("t5am")) {
ele.innerHTML = "<p class='live-text'>Live</p> ";
}
if (distance + 7200000 < 0){
ele.innerHTML = "Ended";
}
}
}, 1000);
}
t5am()
It is a counter that works fine for me, but now I want to do a double "if" function.
When the counter reaches zero, then it shows "Started".
I need that in addition to that, after 2 hours after "Started", it shows "Ended"
How can I do it?

This is how you can do this:
Just need add two more hours to your current time which i have done below and then check if distance + twoHours < 0 to show 'Ended' Message
Also, you have to clearInterval(x) as well i will leave that for you to clear when you want after the condition have been met and it is ended.
Remember: Its NOT ideal to use setTimeout for this because if the user leave the page and come page the setTimeout funtion will start from 2 hours again which is not ideal in your case you want to stop it exactly after 2 hours to when its was started which will be in real time regardless of user staying on the browser / screen or not.
Just to make some correction on using innerHTML as well. Its is not rec-emended to user innerHTML at all. I have used textContent which is exactly the same.
InnerHTML is not rec-emended officially by javascript MDN . You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML why its not good to use innerHTML to change text in elements.
Recreated Demo: https://jsfiddle.net/bv0odyqr/1/
Try this code and should work just fine.
function t5am() {
// Set the date we're counting down to
// Year, Month ( 0 for January ), Day, Hour, Minute, Second, , Milliseconds
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//:::::::::::: ::::::::::::
//:::::::::::: #1 ::::::::::::
//:::::::::::: ::::::::::::
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
// (AAAA,MM,DD,HH,mm,S));
var countDownDate = new Date(Date.UTC(2020, 05, 27, 20, 20, 0));
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
const twoHours = new Date();
twoHours.setHours(twoHours.getHours() + 2);
var two = twoHours.getTime()
// Find the distance between now an the count down date
// GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
var distance = countDownDate - now - (3600000 * 1);
//Results div
var result = document.getElementsByClassName("t5am")[0];
// 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.getElementsByClassName("t5am")[0].textContent = days + "<span>d</span> " + hours + "<span>h</span> " +
minutes + "<span>m</span> " + seconds + "<span>s</span><br />";
// If the count down is over, write some text
if (distance < 0) {
result.textContent = "Started";
} else if (distance + twoHours < 0) {
result.textContent = "Ended";
}
}, 1000);
}
t5am()
<div class="t5am"></div>

Timer that can reset without overlapping? - Javascript

I'm a complete noob to JS trying to use it for the first time for a school project.
My goal is to have a timer that counts down upon pressing a button. The countdownClock function is then called with the Unix time 10 minutes in the future as a parameter. My code seems to work decently well but upon pressing the button again, it creates a weird alternating glitch where both timers are functioning simultaneously.
What can I do to forget about the previous timer upon repressing the button? Thank you!
function countdownClock(time){
// Set the date we're counting down to
var countDownDate = (time + "000");
// 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 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("timer").innerHTML = minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "GAME OVER";
}
}, 1000);
}

I'm guessing you copied this from somewhere, since it already has what you need - clearInterval would give you the result you are looking for, and you should only need minimal changes
var intervalId;
function countdownClock(time){
// Set the date we're counting down to
var countDownDate = (time + "000");
// clear the old one, if relevant
if (intervalId)
clearInterval(intervalId)
intervalId = 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 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("timer").innerHTML = minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(intervalId);
document.getElementById("timer").innerHTML = "GAME OVER";
}
}, 1000);
}

Set Countdown timer then display voting open then after voting period display voting ends

Here are my code on my current program. I have a running code for countdown timer my problem now is when the VOTING PERIOD ENDS I want to display Voting Ends instead of it always displaying voting open.
<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php echo $countdown['datestart']; ?>").getTime();
var endDate = new date("<?php echo $countdown['dateend']; ?>").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an 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 = "Voting now Opens";
}
// If date end is over display some text
//display voting period ends
}, 1000);
</script>

At a glance, i can see that your "endDate" line has an error:
var endDate = new date(.....
it should be Date with a capital 'D' as is for the var countDownDate i.e.
var endDate = new Date(.....
Assuming the rest of the code is correct (and it seems ok) - should be fine.
If that doesn't solve it - from your question it is easy to decipher that the if the following function always resolves to false and hence will never fire enclosed code which clears the 'x' interval and shows that voting is open.
if (distance < 0) {...}
If what I would do is console.log(countDownDate);, console.log(now); and why not also console.log(distance); ideally immidiately after the declaration:
// Find the distance between now an the count down date
var distance = countDownDate - now;
if you are unsure how to use the console.log() function please refer to the following link: https://developers.google.com/web/tools/chrome-devtools/console/

To add the end voting message, you will need to continue the interval until the voting has ended. To make things a little simpler, we have split the code into 3 sections using if...else if...else. In each of these, we handle the respective display for that scenario. It has the added benefit of not doing calculations when it is not needed.
If distance > 0, the voting has not started.
If endDate > now, the voting hasn't ended. I am assuming that the PHP output will result in an accurate date for this scenario. Read more.
Any other scenario means voting has ended.
<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php echo $countdown['datestart']; ?>").getTime();
var endDate = new Date("<?php echo $countdown['dateend']; ?>").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
if (distance > 0) {
// 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 ";
}
else if (endDate > now) {
// If the count down is over, write some text
document.getElementById("demo").innerHTML = "Voting now Opens";
}
else {
// If date end is over display some text
//display voting period ends
document.getElementById("demo").innerHTML = "Voting Ended";
clearInterval(x);
}
}, 1000);
</script>

How to create minutes count down using javascript

I have a program which I wrote with html just like a website but runs offline so I want to add 35 minutes countdown after the user have logged in then when the 35 minutes is exusted the user will be logged out
But I can't get the code right because I am new to javascript but I was able to get it to count for 60seconds and after that it will alert the user with "logout" but I want it to log the user out not to alert the user to logout
This is the html code
<div id="counter">1:00</div>
And this is the javascript code
function countdown() {
var seconds = 60;
function tick() {
var counter = document.getElementById("counter");
seconds--;
counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);
if( seconds > 0 ) {
setTimeout(tick, 1000);
} else {
alert("Game over");
}
}
tick();
}
countdown();

<script>
// Set the date we're counting down to
var countDownDate = new Date("July 12, 2017 09:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an 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="counter"
document.getElementById("counter").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("counter").innerHTML = "EXPIRED";
}
}, 1000); // time changes in every 1 second
</script>
<p2>to go</p2>
try this out, change date and time according to your need

Handling sessions in the frontend is not the best way to approach this, but since you asked...
Your method seems correct, I mean you just have to change 60 seconds with 2100 (for 35 minutes) seconds. To logout you'd need a function or a page to log them out.
The problem with this method is that if they refresh the page the counter also refreshes, also they can directly change the javascript if they want, rewrite the function and so many other things...
Luckily for you Javascript now supports something called session storage and local storage, so you can store your timer in one of these variables and even if they refresh the page you don't lose their latest value. Session variables last for as long as the browser is open, local variables last until forever, or if until you unset them.
You can set storage values like this:
var latestTime = localStorage.getItem('secondsPassed');
localStorage.setItem('secondsPassed', lastTime+1);
This will at least get around them refreshing the page and closing-reopening the browser to refresh the timer!
If you want to learn how to handle sessions properly read into PHP since the backend is the best way to handle these kind of things.

function countdown() {
var timeoutMinutes = 35;
var startTime = new Date();
var elapsedSecond = 0;
function tick() {
var counter = document.getElementById("counter");
var currentTime = new Date();
elapsedSecond = (currentTime - startTime) / 1000;
counter.innerHTML = formatPlaces("0") + ":"
+ formatPlaces(elapsedSecond / 60) + ":"
+ formatPlaces(elapsedSecond % 60);
if (elapsedSecond <= timeoutMinutes * 60) {
setTimeout(tick, 1000);
} else {
alert("Game over");
}
}
tick();
}
function formatPlaces(value) {
var intValue = parseInt(value);
return intValue.toString().length == 1 ? "0" + intValue.toString() : intValue.toString();
}
countdown();
<div id="counter">00:00</div>