javascript Effect Implementation Simple Example of Current Time and Countdown Effect
- 2021-07-04 17:49:47
- OfStack
The key to this effect is the use of Date objects and setTimeout.
1 There are 3 examples. The HTML structure is as follows, so the CSS style will not be added.
<body>
Current time: <p id="p1"></p>
Countdown to college entrance examination: <p id="p2"></p>
Time-limited snapping: <p id="p3"></p>
</body>Mainly experience the realization of javascript
window.onload=function () {
var p1=document.getElementById("p1"),
p2=document.getElementById("p2");
p3=document.getElementById("p3");
showtime1();
showtime2();
showtime3();
}1. Simple display of current time
function showtime1() {
var nowdate=new Date();// Create Date Object nowdate, To get the current time
var year=nowdate.getFullYear(),// Get Year
month=nowdate.getMonth()+1,// Gets the month, getMonth() What I get is 0-11 , need to add 1
date=nowdate.getDate(),// Get day
day=nowdate.getDay(),// Get 1 Something in the middle of the week 1 God, getDay() What I get is 0-6
week=[" Sunday "," Week 1"," Week 2"," Week 3"," Week 4"," Week 5"," Week 6"],
h=nowdate.getHours(),
m=nowdate.getMinutes(),
s=nowdate.getSeconds(),
h=checkTime(h),// Function checkTime Used for formatting, minutes, seconds
m=checkTime(m),
s=checkTime(s);
p1.innerHTML=year+" Year "+month+" Month "+date+" Day "+week[day]+h+" : "+m+" : "+s;
setTimeout(showtime1, 1000);// Execute the function itself repeatedly
}The checkTime function is as follows:
function checkTime(i) {
if (i<10) {
i="0"+i;
}
return i;
}Because the time format 1 is usually 00:00:01, while the format of getHours, getMinutes and getSeconds is 0 to 9, not 00 to 09. Therefore, in the process of changing from 9 to 10, one digit becomes two digits, which is also changed from 59 seconds to 0 seconds or 59 minutes to 0 minutes or 23 minutes to 0.
For example, at 23:59:59, it should become 00: 00:00 in the next second; If the checkTime function is not used for processing, it will become 0: 0: 0, so the format is a little different, and there is a sudden change in the number of words increasing or decreasing visually. (The last two examples do not use the checkTime function to process time and second! ! ! )
2. The countdown effect of the college entrance examination is realized
function showTime2() {
var nowtime=new Date(),// Get the current time
endtime=new Date("2017/6/6");// Define the end time
var lefttime=endtime.getTime()-nowtime.getTime(),// Number of milliseconds from end time
leftd=Math.floor(lefttime/(1000*60*60*24)),// Calculate days
lefth=Math.floor(lefttime/(1000*60*60)%24),// Calculate hours
leftm=Math.floor(lefttime/(1000*60)%60),// Calculate minutes
lefts=Math.floor(lefttime/1000%60);// Calculate the number of seconds
p2.innerHTML=leftd+" Days "+lefth+":"+leftm+":"+lefts;
setTimeout(showTime2, 1000);
}Some of the more important points:
① Defining the end time endtime=new Date ("2017/6/6") is through new1 Date objects with parameters, and direct new Date () is directly obtained to the current time;
The milliseconds from January 1, 1970 are obtained by getTime () method.
③ Calculation of days, hours, minutes and seconds,% (modular operation). Get the number of milliseconds from the end time (remaining milliseconds), divide by 1000 to get the remaining seconds, divide by 60 to get the remaining minutes, and divide by 60 to get the remaining hours. Divide by 24 to get the remaining days. The remaining seconds lefttime/1000 modulus 60 get the seconds, the remaining minutes lefttime/( 1000*60) modulus 60 get the minutes, and the remaining hours modulus lefttime/( 1000*60*60) modulus 24 get the hours.
3. Time-limited snapping countdown effect
function showtime3() {
var nowtime=new Date(),
endtime=new Date("2020/1/1,00:00:00"),// Set the end time
lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),
d=Math.floor(lefttime/(60*60*24)),
h=Math.floor(lefttime/(60*60)%24),
m=Math.floor(lefttime/60%60),
s=Math.floor(lefttime%60);
p3.innerHTML=d+" Days "+h+" Hours "+m+" Points "+s+" Seconds ";
setTimeout(showtime3, 1000);
}In fact, it is similar to the second example, except that the setting of end time new Date ("2020/1/1, 00:00:00")
Here's the complete code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Countdown effect </title>
<script type="text/javascript">
function checkTime(i) {
if (i<10) {
i="0"+i;
}
return i;
}
window.onload=function () {
var p1=document.getElementById("p1"),
p2=document.getElementById("p2");
showtime1();
showtime2();
showtime3();
}
function showtime1() {
var nowdate=new Date();
var year=nowdate.getFullYear(),// Year
month=nowdate.getMonth()+1,// Month
date=nowdate.getDate(),// Day
week=[" Sunday "," Week 1"," Week 2"," Week 3"," Week 4"," Week 5"," Week 6"],
day=nowdate.getDay(),//getDay Get 0-6
h=nowdate.getHours(),
h=checkTime(h),
m=nowdate.getMinutes(),
m=checkTime(m),
s=nowdate.getSeconds(),
s=checkTime(s);
p1.innerHTML=year+" Year "+month+" Month "+date+" Day "+week[day]+h+" : "+m+" : "+s;
setTimeout(showtime1, 1000);
}
function showtime2() {
var nowtime=new Date(),
endtime=new Date("2017/6/6");
var lefttime=endtime.getTime()-nowtime.getTime(),
leftd=Math.floor(lefttime/(1000*60*60*24)),
lefth=Math.floor(lefttime/(1000*60*60)%24),
leftm=Math.floor(lefttime/(1000*60)%60),
lefts=Math.floor(lefttime/1000%60);
p2.innerHTML=leftd+" Days "+lefth+":"+leftm+":"+lefts;
setTimeout(showtime2, 1000);
}
function showtime3() {
var nowtime=new Date(),
endtime=new Date("2020/1/1,00:00:00"),
lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),
d=Math.floor(lefttime/(60*60*24)),
h=Math.floor(lefttime/(60*60)%24),
m=Math.floor(lefttime/60%60),
s=Math.floor(lefttime%60);
p3.innerHTML=d+" Days "+h+" Hours "+m+" Points "+s+" Seconds ";
setTimeout(showtime3, 1000);
}
</script>
</head>
<body>
Current time: <p id="p1"></p>
Countdown to college entrance examination: <p id="p2"></p>
Time-limited snapping: <p id="p3"></p>
</body>
</html>