js制作简易倒计时-蒲公英云

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>