js制作简易倒计时

一.首先介绍用到date的api
new Date():获取当前时间
getTime():获取距离1970年的毫秒数
getFullYear():获取年份
getMonth():获取月份,月份范围是0-11
getDate():获取天份


二.定时器简介
js中主要有以下两种定时器
1.setTimeout(函数,毫秒数)
表示一次性定时器,多久后执行函数
2.setInterval(函数,毫秒数)
表示周期性定时器,隔多久便执行一次函数
用法:
1)function count(){console.log(1);} setTimeout(count,1000);
2)setTimeout(function(){console.log(1);},1000);
3)setTimeout(()=>{console.log(1);},1000);
清除定时器 clearTimeout/clearInterval

var i=1;
var timer=setInterval(()=>{
console.log(i++);
if(i>10){clearInterval(timer);
}
},1000);

三.倒计时原理

1.获取两个时间的时间差:即相差的毫秒数
2.将对应的毫秒数转化成(天)时,分,秒。并以时:分:秒的形式展现
3.设置定时器,每隔1000毫秒,便执行秒钟减一
制作类京东每日秒杀代码如下

<script>
function countDown(){
var time2 = new Date();
var time1 = new Date( time2.getFullYear(), time2.getMonth(),  time2.getDate()+1, 10, 0, 0);
var time = time1 - time2;//获取相差毫秒数,可以直接相减
var d = parseInt(time / 1000);
var day = parseInt(d / 3600 / 24);
var h = parseInt(d / 3600 % 24);
var m = parseInt(d % 3600 / 60);
var s = parseInt(d % 60);
timer.innerHTML = (parseInt(h / 10) + '' + h % 10) + ":" + (parseInt(m / 10) + '' + m % 10) + ":" + (parseInt(s / 10) + '' + s % 10);
setInterval(
() => {
s--;
timer.innerHTML = (parseInt(h / 10) + '' + h % 10) + ":" + (parseInt(m / 10) + '' + m % 10) + ":" + (parseInt(s / 10) + '' + s % 10);
if (s == 0&&(h!=0||m!=0)) {
s = 60;
if (m == 0&&h!=0) { m = 60;
h-- ;}
m--;
}
else{countDown();}
}, 1000
);
}
countDown();
</script>

最终效果如下:
在这里插入图片描述
说明:
a.如何得到时分秒和天数

m/1000=d*24*3600+h*3600+m*60+s;

second:直接模60,就是秒

minute:直接模3600,就是m*60+s,再除以60就是分

hour:1.直接模3600*24,得到h*3600+m*60+s,然后再除以3600就是小时

2.直接除以3600得到d*24+h,然后再模24就是小时

day:直接除以3600*24就是天数

b.怎么显示00:00:00形式

通过字符串拼接

parseInt(second/10)+’’+second%10

c.要判断几种特殊情况
1)1:0:0
2)0:1:0
3)0:0:1

猜你喜欢

转载自blog.csdn.net/weixin_44003190/article/details/86257969