I am making a countdown timer where the text for Days Hours Minutes Seconds is just below to their respective values. Also it must be responsive too. I have some code below:
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").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 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);
// Display the result in the element with id="demo"
document.getElementById("timer").innerHTML = "<h1>" + days + " <span> days </span>: " + hours + " <span>hours</span>: " + minutes + " <span>minutes </span>: <font color='red'>" + seconds + "<span> s</span></font> </h1>";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
<div align="center" id="timer"></div>
My code has a problem in the case that the day symbol D is on left of the Day value but I want it to be on right. I mean just like picture below
You can wrap the text in <div> to create a line break. Secondly create a function which takes text,value and color as parameter and return html string.
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();
function timePart(val,text,color="black"){
return `<h1 class="timer" style="color:${color};">${val}<div>${text}</div></h1>`
}
// 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 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);
// Display the result in the element with id="demo"
let res = timePart(days,'days') + timePart(hours,'hours') + timePart(minutes,'Mins') + timePart(seconds,'Seconds','red');
document.getElementById("timer").innerHTML = res
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
.timer{
display:inline-block;
padding:10px;
}
<div align="center" id="timer"></div>
Okay so I fixed it according to your requirements. It's not exactly like the picture but I'm sure you can do a little bit of styling. Here is the snippet in action.
var countDownDate = new Date("Jan 5, 2021 15:37:25").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 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);
// Display the result in the element with id="demo"
document.getElementById("dd").innerHTML = days
document.getElementById("hh").innerHTML = hours
document.getElementById("mm").innerHTML = minutes
document.getElementById("ss").innerHTML = seconds
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
h1 span {
margin: 0px 10px;
}
p span {
margin: 0px 11px;
}
<div align="center">
<h1>
<span id="dd"></span>:
<span id="hh"></span>:
<span id="mm"></span>:
<span style="color:red;" id="ss"></span>
</h1>
<p>
<span>Days</span>
<span>Hours</span>
<span>Minutes</span>
<span>Seconds</span>
</p>
</div>
Related
Please, how do I make HTML form button disable when countdown date expires, I was able to create a count-down date, but I don't really know how to disable the button once the count-down displays "expired".
// The output of the count-down date
<div class="value text-danger" id="demo"></div>
//html form button
<form>
<input type="text" placeholder="your full name">
<button>Join</button>
</form>
// count down JavaScript
<script>
// Set the date we're counting down to
var countDownDate = new Date("Nov 22, 2022 11:34:38") .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 + " days remaining" ;
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
give ID to the button and use this
document.getElementById(BUTTON_ID).disabled = true;
use this code:
<div class="value text-danger" id="demo"></div>
//html form button
<form>
<input type="text" placeholder="your full name">
<button id="button">Join</button>
</form>
// count down JavaScript
<script>
// Set the date we're counting down to
var countDownDate = new Date("Oct 22, 2022 11:34:38") .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 + " days remaining" ;
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
document.getElementById("button").disabled = true;
}
}, 1000);
</script>
You need to set the disabled attribute to "true". Can you try with the example below?
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
document.querySelector('#button').disabled = true;
}
https://www.w3schools.com/tags/att_button_disabled.asp
You can add a line in Jquery or Javascript whatever you want:
// in JQuery
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
$("#button").attr("disabled", true);
}
// in JS
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
document.getElementById(BUTTON_ID).disabled = true;
}
set the button's disabled attribute to true.
<!-- // The output of the count-down date -->
<div class="value text-danger" id="demo"></div>
<!-- //html form button -->
<form>
<input s type="text" placeholder="your full name">
<button id="btn">Join</button>
</form>
<!-- // count down JavaScript -->
<script>
// Set the date we're counting down to
var countDownDate = new Date("Oct 24, 2022 11:34:38") .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 + " days remaining" ;
let btn = document.getElementById("btn");
// If the count down is over, write some text
if (distance <= 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
btn.disabled = true;
}
}, 1000);
</script>
I took some JS code from w3 to create a countdown. (https://www.w3schools.com/howto/howto_js_countdown.asp)
Because I want to display the countdown multiple times on one page I changed the getElementById("demo") to > getElementsByClassName("demo")
Unfortunately, this doesn't work. Nothing shows up. Why is that and how can I display the same counter multiple times? I tried some things but nothing worked out. This is my code:
html
<p class="demo"></p>
js
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2022 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.getElementsByClassName("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.getElementsByClassName("demo").innerHTML = "EXPIRED";
}
}, 1000);
As #ShanieMoonlight mentioned you need to iterate over the HTMLCollection. You can easily do it with minimal adjustments. E.g. when you use the spread-operator the forEach-function will be available.
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2022 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.getElementsByClassName("demo")].forEach(e => e.innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ");
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
[...document.getElementsByClassName("demo")].forEach(e=>e.innerHTML = "EXPIRED");
}
}, 1000);
<p class="demo"></p>
<p class="demo"></p>
<p class="demo"></p>
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 have a working count up timer but it resets everytime I change the page, for example index.php -> help.php -> index.php(and here the timer starts again from 0 instead of counting in the background)
The code is here:
<h1 id="demo"></h1>
countDownDate = new Date(); localStorage.setItem('startDate', countDownDate);
var countDownDate = localStorage.getItem('startDate');
if (countDownDate) {
countDownDate = new Date(countDownDate);
} else {
countDownDate = new Date();
localStorage.setItem('startDate', countDownDate);
}
// 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 = now - countDownDate.getTime();
// 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 ";
}, 1000);
I have a Javascript code for a countdown timer. I want to use this code in a online shop order process. However I don't want to edit the date every day manually.
Now my question is: How can i display the div container from 6am to 2am (06.00 to 14.00).
From 14.00 to 06.00 i want that this container is display:none
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2018 18: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);
// Display the result in the element with id="demo"
document.getElementById("timer").innerHTML = "Bestellen Sie innerhalb der nächsten <span style='font-size:18px;color: #008a00!important;'>" + hours + " Stunden und "
+ minutes + " Minuten " + "</span>und wir versenden noch am gleichen Tag!";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
var d = new Date();
if(d.getHours() >= 7 && d.getHours() <= 18 ){
$("#timer").show();
$(".closed").hide();
} else {
$(".closed").show();
$("#timer").hide();
}
<!-- Display the countdown timer in an element -->
<p id="timer"></p>
<p class="closed"></p>
Have anyone a solution for that?
// Edit the post with new HTML/JS Data