How to make a countdown timer in Javascript
If you need to advertise an event (like the launch of a new product or an ICO) in your web site then you need a countdown timer.
This post explains how to build one
Keep in ming that this is a very simple countdown timer made in HTML, CSS and Javascript but you can personalize it to your event by editing the CSS and HTML file.
In this guide you can:
1- Read the post if you want to know how to build it step by step or otherwise..
2- if you are in a hurry pick it from JSFiddle https://jsfiddle.net/alketcecaj/c64mjjkj/
Step 1: First prepare the HTML, note that the div where the countdown timer goes has an id called timer. Have a look at the jsfiddle code.
Step 2 Prepare the css file in particular for the timer div
#timer {
font-size: 16px;
font-family: 'Teko', sans-serif;
width: 5OOpx;
border: 1px solid rgba(255,255,255,.2);
}
Step 3 Finally the Javascript code
// refresh every 1 second the timer }, 1000); And here is how the timer will look. It is set at "May 31, 2018 15:37:25" and the countdown timer shows the days, hours, minutes and seconds until the given date. Now you know how to build it :-)
var countDownDate = new Date("May 31, 2017 15:37:25").getTime();
var x = setInterval(function() {// this will give you current date and time
var now = new Date().getTime();
// calculate how much time from now on the count down date
var distance = countDownDate - now;
// Time in 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);
// The result goes to an element with id="timer"
document.getElementById("timer").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("timer").innerHTML = "EXPIRED";
}
@originalworks
The @OriginalWorks bot has determined this post by @datatreemap to be original material and upvoted it!
To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!
To enter this post into the daily RESTEEM contest, upvote this comment! The user with the most upvotes on their @OriginalWorks comment will win!
For more information, Click Here! || Click here to participate in the @OriginalWorks sponsored writing contest(125 SBD in prizes)!
Special thanks to @reggaemuffin for being a supporter! Vote him as a witness to help make Steemit a better place!
Congratulations @datatreemap! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOPcan i create in the steemit ?