I found a widget on Codepen and implement it on my website. But, I want to use it twice in 2 different pages in my website. When I copy the HTML to other page, it is not working. I know i have to make some changes in my code but I'm really not good with JS.
Can you show me how to work the second widget?
var countDate = new Date("Jan 01, 2021 00:00:00").getTime();
function newYear() {
var now = new Date().getTime();
gap = countDate - now;
var second = 1000;
var minute = second * 60;
var hour = minute * 60;
var day = hour * 24;
var d = Math.floor(gap / day);
var h = Math.floor((gap % day) / hour);
var m = Math.floor((gap % hour) / minute);
var s = Math.floor((gap % minute) / second);
document.getElementById("day").innerText = d;
document.getElementById("hour").innerText = h;
document.getElementById("minute").innerText = m;
document.getElementById("second").innerText = s;
}
setInterval(function() {
newYear();
}, 1000);
.countdown {
display: flex;
justify-content: center;
}
.countdown .separator {
font-weight: 400;
}
.countdown div {
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #45deb0;
margin: 0 -15px;
font-size: 3em;
font-weight: 500;
}
.countdown div:before {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 35px;
color: #45deb0;
font-size: 0.35em;
line-height: 35px;
font-weight: 300;
}
.countdown div#day:before {
content: "Dagen";
}
.countdown div#hour:before {
content: "Uren";
}
.countdown div#minute:before {
content: "Uren";
}
.countdown div#second:before {
content: "Seconden";
}
<div class="countdown">
<div id="day">na</div>
<div class="separator"><span>:</span></div>
<div id="hour">na</div>
<div class="separator"><span>:</span></div>
<div id="minute">na</div>
<div class="separator"><span>:</span></div>
<div id="second">na</div>
</div>
<p>How can I make the second countdown widget(the one in bottom) work with same codes?</p>
<div class="countdown">
<div id="day">na</div>
<div class="separator"><span>:</span></div>
<div id="hour">na</div>
<div class="separator"><span>:</span></div>
<div id="minute">na</div>
<div class="separator"><span>:</span></div>
<div id="second">na</div>
</div>
You're using duplicate id's and document.getElementById returns a single element. Use class instead and loop through them:
var countDate = new Date("Jan 01, 2021 00:00:00").getTime();
function newYear() {
var now = new Date().getTime();
gap = countDate - now;
var second = 1000;
var minute = second * 60;
var hour = minute * 60;
var day = hour * 24;
var d = Math.floor(gap / day);
var h = Math.floor((gap % day) / hour);
var m = Math.floor((gap % hour) / minute);
var s = Math.floor((gap % minute) / second);
var dayDivs = document.querySelectorAll(".day");
var hourDivs = document.querySelectorAll(".hour");
var minuteDivs = document.querySelectorAll(".minute");
var secondDivs = document.querySelectorAll(".second");
for (let i = 0; i < dayDivs.length; i++) {
dayDivs[i].innerText = d;
hourDivs[i].innerText = h;
minuteDivs[i].innerText = m;
secondDivs[i].innerText = s;
}
}
setInterval(function() {
newYear();
}, 1000);
.countdown {
display: flex;
justify-content: center;
}
.countdown .separator {
font-weight: 400;
}
.countdown div {
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #45deb0;
margin: 0 -15px;
font-size: 3em;
font-weight: 500;
}
.countdown div:before {
content: attr(data-time);
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 35px;
color: #45deb0;
font-size: 0.35em;
line-height: 35px;
font-weight: 300;
}
<div class="countdown">
<div class="day" data-time="Dagen">na</div>
<div class="separator"><span>:</span></div>
<div class="hour" data-time="Uren">na</div>
<div class="separator"><span>:</span></div>
<div class="minute" data-time="Uren">na</div>
<div class="separator"><span>:</span></div>
<div class="second" data-time="Seconden">na</div>
</div>
<p>How can I make the second countdown widget(the one in bottom) work with same codes?</p>
<div class="countdown">
<div class="day" data-time="Day">na</div>
<div class="separator"><span>:</span></div>
<div class="hour" data-time="Hour">na</div>
<div class="separator"><span>:</span></div>
<div class="minute" data-time="Minute">na</div>
<div class="separator"><span>:</span></div>
<div class="second" data-time="Second">na</div>
</div>
Ideally, to make it actually reusable and customisable it would be better to rename the function to countdown() and simply pass in the element for the block of DOM, then use data-* attribute on the elements to define the and labels and separator.
Also simplify the CSS, so things fit, you are only centring some text it does not really need flex.
function countdown(elm) {
var countDate = new Date(elm.getAttribute('data-to') || new Date).getTime();
var now = new Date().getTime();
var gap = countDate - now;
var second = 1000;
var minute = second * 60;
var hour = minute * 60;
var day = hour * 24;
var result = {
day: Math.floor(gap / day),
hour: Math.floor((gap % day) / hour),
minute: Math.floor((gap % hour) / minute),
second: Math.floor((gap % minute) / second)
}
Object.keys(result).forEach((key) => {
var sector = elm.getElementsByClassName(key)[0]
sector.innerText = (result[key] || 0) + sector.getAttribute('data-label') || ''
})
}
document.querySelectorAll('.countdown').forEach((elm) => setInterval(() => countdown(elm), 1000));
.text-center {
text-align: center;
}
.countdown .separator {
font-weight: 400;
}
.countdown div {
display: inline-block;
height: 100px;
line-height: 100px;
color: #45deb0;
font-size: 2em;
font-weight: 500;
}
<div class="text-center">
<div class="countdown" data-to="Jan 01, 2021 00:00:00">
<div class="day">na</div>
<div class="separator"><span>:</span></div>
<div class="hour">na</div>
<div class="separator"><span>:</span></div>
<div class="minute">na</div>
<div class="separator"><span>:</span></div>
<div class="second">na</div>
</div>
<p>How can I make the second countdown widget(the one in bottom) work with same codes?</p>
<div class="countdown" data-to="Jan 01, 2022 00:00:00">
<div class="day" data-label="days, "></div>
<div class="hour" data-label="hours, "></div>
<div class="minute" data-label="minutes, "></div>
<div class="second" data-label="seconds"></div>
</div>
<div class="countdown" data-to="Jan 01, 2023 00:00:00">
<div class="day" data-label="d - "></div>
<div class="hour" data-label="h - "></div>
<div class="minute" data-label="m - "></div>
<div class="second" data-label="s"></div>
</div>
</div>
Related
I wanna make Countdown Timer with input, start button and stop/reset button. I try to make the input and start button but it does kinda not work, how to fix this problem with the input for the timer that can work?
const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("mins");
const secondsEl = document.getElementById("seconds");
const newYears = document.getElementById("Timer").value;
function countdown(){
const newYearsDate = new Date(newYears);
const currentDate = new Date();
const totalSeconds = (newYearsDate - currentDate) / 1000;
const days = Math.floor(totalSeconds / 3600 / 24);
const hours = Math.floor(totalSeconds / 3600 ) % 24;
const mins = Math.floor(totalSeconds / 60) % 60;
const seconds = Math.floor(totalSeconds) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = formatTime(hours);
minsEl.innerHTML = formatTime(mins);
secondsEl.innerHTML = formatTime(seconds);
}
function formatTime(time){
return time < 10 ? `0${time}` : time;
}
// initial call
if(start){
countdown();
setInterval(countdown, 1000);
}
else{
alert("invalid date");
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
*{
box-sizing: border-box;
}
body{
background-image: url("assets/newyear.jpg");
background-size: cover;
background-position: center center;
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
font-family: "Poppins", sans-serif;
margin: 0;
}
h1{
font-weight: normal;
font-size: 4rem;
margin-top: 5rem;
color: white;
}
.countdown-container{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.big-text{
font-weight: bold;
font-size: 6rem;
line-height: 1;
margin: 1rem 2rem;
color: white;
}
.countdown-el{
text-align: center;
color: white;
}
.countdown-el span{
font-size: 1.3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CountDown Timer</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div id="countdowninput">
<input type="text" id="Timer" value="1 Jan 2023"/>
<button id="start" type="submit">Start</button>
</div>
<h1>New Years Eve</h1>
<div class="countdown-container">
<div class="countdown-el days-c">
<p class="big-text" id="days">0</p>
<span>days</span>
</div>
<div class="countdown-el hours-c">
<p class="big-text" id="hours">0</p>
<span>hours</span>
</div>
<div class="countdown-el mins-c">
<p class="big-text" id="mins">0</p>
<span>minutes</span>
</div>
<div class="countdown-el seconds-c">
<p class="big-text" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
</body>
</html>
After this maybe I would do change the image button on the timer bottom, like new year, birthday, Christmas, and more.
Here you go! Create an input with whatever id you choose, in this case I used #dateSearch.
Create an input value, then create a new Date object from the input value.
Then the rest of the code is what is executing the countdown!
Enjoy.
document.getElementById("dateSearch").addEventListener("change", function() {
var input = this.value;
var countDownDate = new Date(input).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);
})
#demo {
font-size: 3rem;
font-weight: bolder;
text-align: center;
}
.form-input, h1 {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" referrerpolicy="no-referrer"></script>
<div class="form-input">
<label for="dateSearch">Enter a Date to Countdown:</label>
<input type="date" id="dateSearch">
</div>
<div class="countdown">
<h1>Countdown Timer:</h1>
<p id="demo"></p>
</div>
I want to create the following resultenter image description here
It is a cowntdown that I want to be in my html code.I have created the timer with javascript and it works fine but I cannot make it appear as I want in my html.I want it to appear exactly like the picture.
Here is my code
my html
<div class="container">
<hr class="new4">
<p class="countdown text-center">Μέχρι το δορυφορικό συμπόσιο απομένουν</p>
<p id="timer" class="timer text-center"></p>
<hr class="new4">
</div>
and my javascript
// Set the date we're counting down to
var countDownDate = new Date("Sep 19, 2020 16:30:00").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("timer").innerHTML = days + " " + hours + " "
+ minutes + " " + seconds + " ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "Συμβαίνει Τώρα";
}
}, 1000);
and my css
hr.new4 {
border: 1px solid white;
}
.timer{
font-size: 117px;
color:white;
}
Here is how it looks for me.enter image description here
I can not understand how to make the text apear exatly bellow the numbers and I cant understand how to add paddings between each of the elements that get return by the javascript document.getElementById() function.
Please help me it is an emerjency I must have it until tomorow
To make each time unit a different element, update the timer HTML like so:
document.getElementById("timer").innerHTML = `
<span data-unit="Days">${days}</span>
<span data-unit="Hours">${hours}</span>
<span data-unit="Minutes">${minutes}</span>
<span data-unit="Seconds">${seconds}</span>
`;
Then style them using CSS, to add margin, and a pseudo element representing the unit:
#timer span {
display: inline-block;
margin: 10px;
}
#timer span:before {
content: attr(data-unit);
position: absolute;
transform: translate(offsetX, offsetY); /* Here you have to find the correct X and Y values */
}
To properly center the text under the numbers I recommend that you use flexbox.
I created additional containers to properly space things with display: flex and used flex-direction: column when necessary or did not defining any value for my flex container in some places because the default value for flex-direction is row.
Note that I separated the timer into different <p> and used static values in our <p> elements for our digits that represent days, hours, minutes and seconds:
Separating them into different <p> allow us to have more control over their positioning.
The static values are only for illustrative purposes because I did not modify your JavaScript code.
You have to modify your JavaScript code to update each <p> in the HTML individually.
Check my CodePen example with the modified HTML and CSS: https://codepen.io/stevescruz/pen/bGpLjKj.
<div class="container">
<hr class="new4">
<div class="timer-container">
<p class="countdown text-center">Μέχρι το δορυφορικό συμπόσιο απομένουν</p>
<div class="content-container">
<div class="unit-container">
<p id="timer" class="timer text-center">22</p>
<p class="timer-text">day</p>
</div>
<div class="unit-container">
<p id="timer" class="timer text-center">23</p>
<p class="timer-text">hours</p>
</div>
<div class="unit-container">
<p id="timer" class="timer text-center">41</p>
<p class="timer-text">min</p>
</div>
<div class="unit-container">
<p id="timer" class="timer text-center">16</p>
<p class="timer-text">sec</p>
</div>
</div>
</div>
<hr class="new4">
</div>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
hr.new4 {
border: 1px solid white;
}
.timer-container {
display: flex;
flex-direction: column;
}
.content-container {
display: flex;
justify-content: space-around;
}
.countdown {
font-size: 48px;
font-weight: bold;
color: white;
align-self: center;
}
.unit-container {
display: flex;
flex-direction: column;
align-items: center;
}
.timer {
font-size: 117px;
color: white;
}
.timer-text {
font-size: 60px;
color: white;
}
body {
background: #194079;
}
I am trying to display a countdown timer for coming soon webpage. Everything is working fine except for the timer that is written in javascript. I also tried by making it an external file. It also reads the file when making external but the timer is not shown on the page.
This is my blade file
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Coming Soon</title>
<link rel="stylesheet" type="text/css" href="{{asset('css/style.css')}}">
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital#1&family=Montserrat&family=Open+Sans+Condensed:wght#300&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="soon">
<p> We will be back with beautiful website</p>
<h1>COMING SOON</h1>
<hr>
<p id="launch"></p>
</header>
<script>
var date = new Date("Jan 1, 2020 00:00:00").getTime();
var countdownfunction = setInterval(function() {
var today = new Date().getTime();
var distance = date - today;
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(countdownfunction);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
And this is css
*
{
margin: 0;
padding: 0;
}
header
{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('/images/comingsoon.jpg');
height: 100vh;
background-position: center;
background-size: cover;
}
.soon {
top: 50%;
left: 50%;
position: absolute;
transform:translate(-50%,-50%);
color: #fff;
text-align: center;
font-family: 'Balsamiq Sans', cursive;
font-family: 'Montserrat', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Playfair Display', serif;
}
h1 {
font-size: 60px;
letter-spacing: 15px;
}
hr{
width: 50%;
margin: 30px auto;
border: 1.5px solid #fff;
}
p{
font-size:20px;
margin-bottom:30px;
}
you have to add a tag with id demo like a div
and also your future date is wrong
<header>
<div class="soon">
<p> We will be back with beautiful website</p>
<h1>COMING SOON</h1>
<hr>
<div id=demo></div>div>
<p id="launch"></p>
</header>
your date is expired change it to something in the future
var date = new Date("Jan 1, 2021 00:00:00").getTime();
change <p id="launch"></p> to <p id="demo"></p> on html code,
or change document.getElementById("demo") to document.getElementById("launch") on script code
I have a problem aligning text inside a border. The text needs to be in the centre of the border.
As you can see the text is slightly right and the number is slightly left
I managed to get it working on chrome but it doesn't work on code pen, safari or internet explorer. Here is the codepen
Here is my HTML
// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();
// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';
// 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 weeks, days, hours, minutes and seconds
// var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
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("Countdown_Days").innerHTML =
days + "<span>" + "<br>" + "Days" + "</span>";
document.getElementById("Countdown_Hours").innerHTML =
hours + "<span>" + "<br>" + "Hours" + "</span>";
document.getElementById("Countdown_Minutes").innerHTML =
minutes + "<span>" + "<br>" + "Minutes" + "</span>";
document.getElementById("Countdown_Seconds").innerHTML =
seconds + "<span>" + "<br>" + "Seconds" + "</span>";
});
h2 {
border: solid 1px #000;
border-radius: 100%;
display: inline-flex;
padding: 30px 25px;
font-size: 20px !important;
color: #fff;
font-weight: 600;
line-height: 25px;
height: 125px;
width: 125px;
margin: auto;
text-align: center;
margin-left: 5px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="overlay">
<div class="row marginnone">
<div class="col-lg-7 col-md-12 center">
<div class="countdown">
<h1>Launch In</h1>
<h2 id="Countdown_Days">58<span><br>Days</span></h2>
<h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
<h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
<h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
</div>
</div>
</div>
</div>
Thanks for any help in advance!
I've changed the flex-direction for the H2 elements and instead of using span and br elements I used div elements. Is this the result you were looking for?
// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();
// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';
// 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 weeks, days, hours, minutes and seconds
// var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
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("Countdown_Days").innerHTML = `<div>${days}</div><div>Days</div>`;
document.getElementById("Countdown_Hours").innerHTML =`<div>${hours}</div><div>Hours</div>`;
document.getElementById("Countdown_Minutes").innerHTML = `<div>${minutes}</div><div>Minutes</div>`;
document.getElementById("Countdown_Seconds").innerHTML = `<div>${seconds}</div><div>Seconds</div>`;
});
h2 {
align-items: center;
border: solid 1px #000;
border-radius: 100%;
display: inline-flex;
flex-direction: column;
padding: 30px 25px;
font-size: 20px !important;
color: #fff;
font-weight: 600;
line-height: 25px;
height: 125px;
width: 125px;
margin: auto;
margin-left: 5px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="overlay">
<div class="row marginnone">
<div class="col-lg-7 col-md-12 center">
<div class="countdown">
<h1>Launch In</h1>
<h2 id="Countdown_Days">58<span><br>Days</span></h2>
<h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
<h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
<h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
</div>
</div>
</div>
</div>
Use this css instead of yours css:
.countdown {
display: flex;
}
h2{
border: solid 1px #000;
border-radius: 100%;
padding: 30px 25px;
font-size: 20px !important;
color: #fff;
font-weight: 600;
line-height: 25px;
height: 125px;
width: 125px;
margin: auto;
text-align: center;
margin-left: 5px;
}
And your h1 is placed above countdown div
<div class="overlay">
<div class="row marginnone">
<div class="col-lg-7 col-md-12 center">
<h1>Launch In</h1>
<div class="countdown">
<h2 id="Countdown_Days">58<span><br>Days</span></h2>
<h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
<h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
<h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
</div>
</div>
</div>
</div>
// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();
// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';
// 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 weeks, days, hours, minutes and seconds
// var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
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("Countdown_Days").innerHTML =
days + "<span>" + "<br>" + "Days" + "</span>";
document.getElementById("Countdown_Hours").innerHTML =
hours + "<span>" + "<br>" + "Hours" + "</span>";
document.getElementById("Countdown_Minutes").innerHTML =
minutes + "<span>" + "<br>" + "Minutes" + "</span>";
document.getElementById("Countdown_Seconds").innerHTML =
seconds + "<span>" + "<br>" + "Seconds" + "</span>";
});
.countdown {
display: flex;
}
h2{
border: solid 1px #000;
border-radius: 100%;
padding: 30px 25px;
font-size: 20px !important;
color: #fff;
font-weight: 600;
line-height: 25px;
height: 125px;
width: 125px;
margin: auto;
text-align: center;
margin-left: 5px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="overlay">
<div class="row marginnone">
<div class="col-lg-7 col-md-12 center">
<h1>Launch In</h1>
<div class="countdown">
<h2 id="Countdown_Days">58<span><br>Days</span> </h2>
<h2 id="Countdown_Hours">22<span><br>Hours</span> </h2>
<h2 id="Countdown_Minutes">42<span> <br>Minutes</span>
</h2>
<h2 id="Countdown_Seconds">40<span> <br>Seconds</span>
</h2>
</div>
</div>
</div>
</div>
What javascript would I need to create in order to have the countdown timer always in double digits if a numeral is down to only one digit. If seconds are at 6 I want it to say 06, if hours at 2 want it to say 02 and so on.
Pen: http://codepen.io/zepzia/pen/MmoVJm
HTML
<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">
<body>
<div class="countdown-wrapper">
<div id="countdown-text">
<div class="timer">
<div id="daysTicker" class="countdown"></div>
<div class="counter-text">DAYS</div>
</div>
<div class="timer">
<div id="hoursTicker" class="countdown"></div>
<div class="counter-text">HOURS</div>
</div>
<div class="timer">
<div id="minsTicker" class="countdown"></div>
<div class="counter-text">MINS</div>
</div>
<div class="timer">
<div id="secsTicker" class="countdown"></div>
<div class="counter-text">SECS</div>
</div>
</div>
</div>
</body>
CSS
body {
background:url(http://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG);
background-size:cover;
background-position:center center;
background-attachment:fixed;
}
.countdown-wrapper {
position: relative;
height: 400px;
}
#countdown, #countdown-text {
font-family: 'Roboto', sans-serif;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.countdown {
font-weight: 900;
font-size: 142px;
color: #fff;
opacity: .7;
letter-spacing: -4px;
}
.counter-text {
font-weight: 900;
font-size: 40px;
color: black;
opacity: .8;
text-align: center;
}
.timer {
display: inline-block;
margin: 10px;
}
JS
// Set the date we're counting down to
var countDownDate = new Date("Oct 7, 2017 12: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("daysTicker").innerHTML = days;
document.getElementById("hoursTicker").innerHTML = hours;
document.getElementById("minsTicker").innerHTML = minutes;
document.getElementById("secsTicker").innerHTML = seconds;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
You can use toLocaleString, and set minimum digits to 2, that way when there is only one digit it will prefix it with 0
var x = 8;
console.log(x.toLocaleString(undefined,{minimumIntegerDigits: 2}));
var y = 12;
console.log(y.toLocaleString(undefined,{minimumIntegerDigits: 2}));
You could use ('0' + myValue).substr(-2) to fix the length with 2 characters. In this case '01' would be stay as '01' and '012' will be '12' because the -2 will cut the string from the end.
Do this for all time fields.
if((hours+"").length === 1){
hours = "0"+hours;
}
This code will test the string length of the variable, and if the length is one, will add the digit "0" in front of it. You have to treat this as a string, because the integer '06' will be interpreted as just '6'
Check if desired numbers are less then 10 and and the 0 as string:
document.getElementById("daysTicker").innerHTML = (days < 10) ? ('0' + days) : days;
My Answer will 100% work
if (days<10) {
document.getElementById("daysTicker").innerHTML ="0"+days ;}else{
document.getElementById("daysTicker").innerHTML =days ;
}
if (hours<10) {
document.getElementById("hoursTicker").innerHTML ="0"+hours ;}else{
document.getElementById("hoursTicker").innerHTML =hours ;
}
if (minutes<10) {
document.getElementById("minsTicker").innerHTML ="0"+minutes ;}else{
document.getElementById("minsTicker").innerHTML =minutes ;
}
if (seconds<10) {
document.getElementById("secsTicker").innerHTML ="0"+seconds ;}else{
document.getElementById("secsTicker").innerHTML =seconds ;
}