This video is about creating a countdown clock in JS using HTML & CSS.
Website: http://samsolomonprabu.com/
Source file: https://drive.google.com/file/d/0B6RD52SkI2-cX0xETEQ0R256V1k/view?usp=sharing
Original source
Countdown clock in JS using HTML & CSS | JavaScript Tutorials | Web Development Tutorials
Shetuham International
This is a very good work
ZerefGG
Thank you
Mario Berner
Nice, but the date not finish 00:00:00:00 🙁
Randa Elkhashen
Great Work, but I have a problem in new date function, when I give it a date of the event and try to print it in the console it gives me a wrong date, it adds about 30 days or month more ! how can I fix it thanks in advanced.
chaudhary Majidjatt
hy
Alex Burke
Great video. Is there an easy tweak to make it count UP from a certain date instead of count down? Thanks
Nathan D
hey can I have help? How can i detect when the timer reaches 0 so I could make an output like, "the timer has reached 0"
Fred & Nika
Thank you very much for this tutorial!
DATTATRAYA BHABAL
it's not even working on sublime
DATTATRAYA BHABAL
I am working on visual studio
DATTATRAYA BHABAL
it's not working dude
Bob Raynor
Sam, this is a great tutorial. But how do you stop the counter once it hits 0? Right now it starts counting in negative numbers. Thanks!
Mike
Cant get it to work in firefox 🙁 but works great everywhere else
Audrey Belair
Hey, my countdown is not running! I compared my code with yours and can't find what's wrong with it. Please help me find a solution 🙂
<html>
<head>
<style type="text/css">
body{
background: #f6f6f6;
}
.countdownContainer{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
background: #ddd;
padding: 10px;
margin-top: 200px;
}
.countdown{
font-size: 60px;
background-color: black;
opacity: 0.85;
}
</style>
</head>
<body>
<table class="countdownContainer">
<tr class="info">
<td colspan="4"></td>
</tr>
<tr class="countdown">
<td id="days">200</td>
<td id="hours">50</td>
<td id="minutes">33</td>
<td id="seconds">12</td>
</tr>
<tr>
<td>Days</td>
<td>Hours</td>
<td>Minutes</td>
<td>Seconds</td>
</tr>
</table>
<script type="text/javascript">
function countdown(){
var now = new Date();
var eventDate = new Date(2017, 07, 12);
var currentTime = now.getTime();
var eventTime = eventDate.getTime();
var remTime = eventTime – currentTime;
var s = Math.floor(remTime / 1000);
var m = Math.floor(s / 60);
var h = Math.floor(m / 60);
var d = Math.floor(h / 24);
// var w = Math.floor(d / 7);
h%= 24;
m%= 60;
s%= 60;
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
document.getElementById("days").textContent = d;
document.getElementById("days").innerText = d;
// document.getElementById("weeks").textContent = w;
document.getElementById("hours").textContent = h;
document.getElementById("minutes").textContent = m;
document.getElementById("seconds").textContent = s;
setTimeout(countdown, 1000);
}
countdown();
</script>
</body>
</html>
Der Gondor
nice dankeschön
Syed Ali
I couldn't do itdidn't work
Kevin Rouwkema
Great video you got, only one problem if i change the date to the date i want it is counting plus 30 days so it says 165 days and it must be 135 days can you plz help me out
my eventDate code:
var eventDate = new Date(2017, 6, 9);
kiwicrafter kiwi
Hi Sam, great stuff. My question is this:
I want the time left to a specific date to be showing the same no matter where you are in the world.
If you use this script, say to Christmas your time, then the time remaining will be different in other time zones around the world.
How can I set it so that visitors to my website all see the same amount of time remaining, lets say 1st April, no matter where you are in this world.
Like an auction countdown.
Cheers
Nwafor Sylvanus
Hi Sam,
This is great work!
Weldone!
I tried it on my website.
It worked but the days calculation from start time to eventTime was wrong.
What can I do?
Again WELDONE!
THUMBS UP!
LengChai Krishna
Can u help me to post in my fb fan page need urgent….
Jesuye David
NVM I found it.
Jesuye David
Hey! Thanks for posting your work. Please where can I find the source code?
Antonis Ioannou
great tutorial. how can I add a loop so that that when the timer ends, another div(html) is shown instead? thanks!!
Max Rigoli
great job !!!!!!!
Pratik Sharma
Its a great video covering a very subtle topic!
Aliasgor Apu
thanks for this tuotrial
Christy Wood
I'm not getting the correct time to display on my website.
Here is the code I'm using.
<table class="countdownContainer1">
<tr class="info">
<td colspan="5"><font color="#00ff00"><font size="+4">Cerner Go-Live</font></font></td>
</tr>
<tr class="info">
<td id="weeks">58</td>
<td id="days">6</td>
<td id="hours">5</td>
<td id="minutes">23</td>
<td id="seconds"><font color="#ff0000">59</font></td>
</tr>
<tr class="info">
<td>Weeks</td>
<td>Days</td>
<td>Hours</td>
<td>Minutes</td>
<td><font color="#ff0000">Seconds</font></td>
</tr>
</table>
<script type="text/javascript">
function countdown()
{
var now = new Date();
var eventDate = new Date("2018, 01, 08");
var currentTime = now.getTime();
var eventTime = eventDate.getTime();
var remTime = eventTime – currentTime;
var s = Math.floor(remTime / 1000);
var m = Math.floor(s / 60);
var h = Math.floor(m / 60);
var d = Math.floor(h / 24);
var w = Math.floor(d /7);
d %= 7;
h %= 24;
m %= 60;
s %= 60;
document.getElementById("weeks").textContent = w;
document.getElementById("days").textContent = d;
document.getElementById("hours").textContent = h;
document.getElementById("minutes").textContent = m;
document.getElementById("seconds").textContent = s;
setTimeout(countdown, 1000);
}
countdown();
</script>
Any help would be greatly appreciated. I am relatively new to coding. 🙂
Joseph Pinder
Sam, how would I apply this to multiple dates on the same page?
Laura Yepes Aranda
Hi, if i want to change the date, not for christmas but other date, which element i have to modify?
Saíd Ahmed
Video was very helpful.
Thank you.
Would love to see more content.
Taiwo Adefala
Thanks for the tutorial but i am facing issues converting it to a function, so i use it in multiple places on the same page
Below is the code:
function mysqlTimeStampToDate(timestamp) {
//function parses mysql datetime string and returns javascript Date object
//input has to be in this format: 2007-06-05 15:26:02
var regex=/^([0-9]{2,4})
([0-1][0-9])([0-3][0-9]) (?:([0-2][0-9]):([0-5][0-9]):([0-5][0-9]))?$/;var parts=timestamp.replace(regex,"$1 $2 $3 $4 $5 $6").split(' ');
return new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5]);
}
function countdown(date){
var now = new Date();
var eventDate = new Date(Date.parse(mysqlTimeStampToDate(date)));
var currentTiime = now.getTime();
var eventTime = eventDate.getTime();
var remTime = eventTime – currentTiime;
var s = Math.floor(remTime / 1000);
var m = Math.floor(s / 60);
var h = Math.floor(m / 60);
var d = Math.floor(h / 24);
h %= 24;
m %= 60;
s %= 60;
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
document.getElementById("days").textContent = d;
document.getElementById("days").innerText = d;
document.getElementById("hours").textContent = h;
document.getElementById("minutes").textContent = m;
document.getElementById("seconds").textContent = s;
setTimeout(countdown(mysqlTimeStampToDate(date)), 1000);
}
countdown("2016-11-09 12:00:00");
justkamil com
Great thanks
Danton
How can I stop countdown when it hits zero. Or show other text?
Ali Asadi
hello can you help me to add this code to my site for my giveaway countdown
https://mrartix.com/giveaway.html
Dominik Ježík
what's name of this editor(you was used)
atika gupta
Hi…my timer is not running…kindly give a solution..
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Heading Elements</title>
<style type="text/css">
body{
background: url(maintenancebackground2.jpg) no-repeat left top;
background-size: 100%;
}
.box{
text-align: center;
}
h4{
font-family:sans-serif;
font-size:14px;
color: WHITE;
text-align: center;
}
.countdown{
position: absolute;
top:70%;
left:50%;
transform: translateX(-50%)translateY(-50%);
padding: 10px;
font-size: 50px;
}
</style>
</head>
<body>
<br>
<br>
<div class="box">
<img src="logoo.png" height="130" width="250">
</div>
<p><h1 style="color:WHITE;font-family:fantasy;text-align:center;"> MAINTENANCE PAGE</h1></p>
<h4>Our website is currently undergoing scheduled maintenance.Sorry for the inconvenience</h4>
<table class="countdown" style="color:#d9d9d9;text-align:center;" width="400" cellspacing="50">
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td id="days">7</td>
<td id="hours">2</td>
<td id="minutes">30</td>
<td id="seconds">40</td>
</tr>
</table>
<script type="text/javascript">
function countdown(){
var now = new Date();
var eventDate = new Date(2016, 11, 25);
var currentTime=now.getTime();
var eventTime=eventDate.getTime();
var remTime=eventTime-currentTime;
var s=Math.floor(remTime / 1000);
var m=Math.floor(s/60);
var h=Math.floor(m/60);
var d=Math.floor(h/24);
h%=24;
m%=60;
s%=60;
h= (h<10) ? "0" + h : h;
m= (m<10) ? "0" + m : m;
s= (s<10) ? "0" + s : s;
document.getElementByID("days").textContent =d;
document.getElementByID("days").innerText =d;
document.getElementByID("hours").textContent =h;
document.getElementByID("hours").innerText =h;
document.getElementByID("minutes").textContent =m;
document.getElementByID("minutes").innerText =m;
document.getElementByID("seconds").textContent =s;
document.getElementByID("seconds").innerText =s;
setTimeout(countdown,1000);
}
countdown();
</script>
</body>
Md Saidul
great boss