In this tutorial we will see that how to make countdown timer using javascript language so friend if you are a bignner and you don't have any idea about it .
so don't worry because in this tutorial made for bignner .it this tutorial full explain step by step which by any visiter can understand of this very easly
Let's break it
1. first we need to create variable and get date of paste or future through Date method
and enter your Month name Date, years, hour, minutes, second like this
//here i created a object then get time in milliseconds from this date, check DOB
var d = new Date("Jan 1,2021 00: 00:01");
// you can also do like this
var variable_name= new Date("Month 1,year,hour,minutes,second");
//script tag is not close it is example
2. Now we will creat a function and in this block we get present time through
this method like this
function myFunction() {
//object for date present date
var nowDate = new Date();
// again i get time in milliseconds of present date
var again = nowDate.getTime();
//you can also do this like
var variable_name= new Date().getTime();
//script tag is not close it is example
2. Here we will get different between future/paste time- and present time.
see this example of from code-source :
<script>
//here i created a object then get time in milliseconds from this date, check DOB
var d = new Date("Jan 1,2021 00: 00:01");
var final = d.getTime();
var well = "2021 will coming soon";
function myFunction() {
//object for date present date
var nowDate = new Date();
// again i get time in milliseconds of present date
var again = nowDate.getTime();
// now different between "d" and "again"
var different = final - again;
//script tag is not close it is example
3. Here we will change of this var different value in day and month and minutes and also in second. like this :
var days = Math.floor(different / (1000 * 60 * 60 * 24));
// change of this different in hours
var hours = Math.floor((different % (1000 * 60 * 60 * 24))
/ (1000 * 60 * 60));
// change of this different in minutes
var minutes = Math.floor((different % (1000 * 60 * 60)) / (1000 * 60));
//change of this different in seconds
var seconds = Math.floor((different % (1000 * 60)) / 1000);
//script tag is not shown it is example
3. Print all this changed variable . you can also show this in defferent-defferent
type but i used this method
example from source-code:
//here i am printing of this all days, hours , minutes, seconds
document.getElementById("demo").innerHTML = well + "<br>" + days + "Day " + hours + "hour " + minutes + "minute " + seconds + "second"
//script tag is not shown it is example
4. when we run this scource code .this second will not update every second so we need to update in every second for this we will use of setInterval in this block like :
// setInterval(Function_name, time_in_millisecond)
setInterval(myFunction, 1000)
5. In the time i used if condition that if day == 0 so my time came in this case you can print any offer but i print Happy new years dears enjoy this days
otherwise else="" . it is optional you can skip this code-source who i showen here
//when days =0 in this case 1 january optional you can leave of this code-source
if (days === 0) {
document.getElementById('happy').innerText =
"Happy new years dears enjoy this days";
}
else // else nothing
document.getElementById('happy').innerText = "";
}
/* -----*/
5. And after closing of this block we need to call the our function
see this example :
function myFunction{
}
myFunction();
you can use of this source-code through copy and paste.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0;
box-sizing: border-box;
}
body {
background-image: url("domenico-loia-hGV2TfOh0ns-unsplash.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}
//css of box where countdownlist will show
#demo {
background-color: black;
color: white;
background-color: black;
font-weight: bold;
font-size: 35px;
width: 700px;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
height: 180px;
padding-top: 40px;
border-radius: 30px;
letter-spacing: 3px;
opacity: 0.8;
font-stretch: ultra-expanded;
}
</style>
</head>
<body>
<p id="demo">
<h5 id="happy"></h5>
</p>
<script>
//here i created a object then get time in milliseconds from this date, check DOB
var d = new Date("Jan 1,2021 00: 00:01");
var final = d.getTime();
var well = "2021 will coming soon";
function myFunction() {
//object for date present date
var nowDate = new Date();
// again i get time in milliseconds of present date
var again = nowDate.getTime();
// now different between "d" and "again"
var different = final - again;
// change of different in days
var days = Math.floor(different / (1000 * 60 * 60 * 24));
// change of this different in hours
var hours = Math.floor((different % (1000 * 60 * 60 * 24))
/ (1000 * 60 * 60));
// change of this different in minutes
var minutes = Math.floor((different % (1000 * 60 * 60)) / (1000 * 60));
//change of this different in seconds
var seconds = Math.floor((different % (1000 * 60)) / 1000);
//here i am printing of this all days, hours , minutes, seconds
document.getElementById("demo").innerHTML = well + "<br>" + days + "Day " + hours + "hour " + minutes + "minute " + seconds + "second";
//when days =0 in this case 1 january optional you can leave of this code-source
if (days === 0) {
document.getElementById('happy').innerText =
"Happy new years dears enjoy this days";
} else {
// else nothing
document.getElementById('happy').innerText = "";
}
/* -----*/
setInterval(myFunction, 1000)
}
myFunction();
</script>
</body>
</html>
Comments
Post a Comment