This type of timer we see in different types of under-construction websites or eCommerce websites. This type of timer is used to show how long it takes for a product or offer to arrive on various e-commerce websites. In addition, this type of timer is used to satisfy the user when a website is under construction.
In this type of countdown clock, you can fix a specific time or date in advance and this clock will gradually reduce that time every second.
As you can see in the picture above. Here I made four small boxes. The first box is designed to show the date, the second box the hour, the third box the minute, and the fourth box the second. These times will continue to decrease every second until the pre-determined time is reached.
First of all, I gave the color of a web page # 90cbf3 then I made four small boxes here. Give the first box, the second hour, the third minute, and the fourth time to show the schedule.
First of all, it will take time from your device then subtract with it in the time you set. The result of that subtraction is divided into days, hours, minutes, and seconds and will continue to decrease every second.
The time used here is not taken from any server. It will take time from your device then subtract the time you set.
If you want to see its live demo, you can follow the demo section below. Here you will find the required source code which you can copy and use in your project or site. But if you are a beginner then you must follow the tutorial below. Where I told the full details of how I made the project.
Step 1: Design the web page with CSS
Using the codes below, I changed the background color of the webpage and some basics. Here I have used background-color # 90cbf3 and font-family: sans-serif. Here I have used padding: 100px 50px which will place these boxes in the middle of the HTML page.
In this case, only a small amount of one-line HTML code has been used.
In this case, I have used new Date () to receive time from the device.
We subtract the present time with the pre-determined time (diff = future – now) and store it in a constant called biff. Now we have got a specific value i.e. how many days, how many hours, how many seconds you will be able to reach at your pre-determined time.
I used Math.floor to calculate how many hours, minutes, and seconds it would take to reach the set date. For I have divided the biff’s stand into seconds, minutes, hours, and days.
We know that one second is equal to 1000 milliseconds. One minute is equal to 60 seconds, that is, one minute is equal to 1000 * 60 milliseconds. In the same way, 60 minutes is equal to 1 hour i.e. one hour is equal to 1000 * 60 * 60 milliseconds. In the same way, 24 hours is equal to one day so one day is equal to 1000 * 60 * 60 * 24 milliseconds.
Now I have found the final time of hours, minutes, and seconds in the diff, respectively.
We have done all the important work above, now we will only show these times on the HTML page. For this, I used ‘innerHTML’ and then I formatted how it can be seen on the webpage.
Now I have been instructed to update this time every 1 second or 1000 milliseconds using setInterval. Because the time will change here every second, so in this case, you have to update these calculations every second.
Step 3: Design it using CSS code
Now I have designed the texts in this countdown timer. As you can see above these tests are much larger in size so in this case I have determined their specific size and color. In this case I have used font-size: .35em and color: #ffffff.