一、原理
/*Date() ---- 用来获取事件的对象*/
/*getTime() ---- 用到获取从1970年1月1日凌晨8点开始算起的毫秒数*/
var date0 = new Date();
console.log(date0);//什么都不填的情况下,获取到此时的星期、月份、年份、日期、时、分、秒
console.log(date0.getTime());//什么都不填的情况下,获取的是当前时间到(中国-东八区)的毫秒数
setInterval(function(){},1000);//每隔1秒执行一次函数
注意:
- 1、Date()函数可以传入具体的时间,来获取你想要得到的一个时间。
- 2、在js中月份需要减1个月算起!。
二、JS实现代码
这里现在html中给一个div放 倒计时:
<div class="time"></div>
var date2 = new Date(2019,5,25,10,14,40,1000);//设置一个终止日期(注:月份要减掉1个月,即是2019年6月25日10时14分40秒1000毫秒)
var ms1 = date2.getTime();//获取date2距离1970年的毫秒数
//封装一个函数(参数 ms,type的值可变)
function daojishi(ms,type){//ms表示设置的时间,type表示时间输出的格式
var date1 = new Date();
var curTime = date1.getTime();//获取一个当前时间距离1970年的毫秒数
var timeLag = ms - curTime;//当前时间 距离 设置时间的毫秒数
//转为 时间单位格式
timeLag = Math.floor(timeLag/1000); //毫秒转化为秒 并且 取整 省略精确值
if(timeLag<=0){
clearInterval(intervalTime);//清除定时器
return "剩余:"+00+"天"+00+"时"+00+"分"+00+"秒";//判断如果小于当前时间则变0 --把下面的格式也可以代入这个判断,这里就不写了
}
var day = Math.floor(timeLag/24/60/60);//换算剩余 天数 取整
var h = Math.floor(timeLag/(60*60)%24);//换算剩余 时数 取整
var m = Math.floor(timeLag/60%60);//换算剩余 分钟数 取整
var s = Math.floor(timeLag%60);//换算剩余 秒数 取整
//个数补零,用三目运算符设置成00格式
h = h>=10?h:"0"+h;
m = m>=10?m:"0"+m;
s = s>=10?s:"0"+s;
//设置返回格式模板
if(type == "/"){
return "剩余: "+day+"天"+h+"小时"+m+"分钟"+s+"秒!";//设置输出格式1
}else if(type == ":"){
return "剩余: "+day+"天"+h+":"+m+":"+s;//设置输出格式2
}else{
return "剩余: "+day+"天"+h+"时"+m+"分"+s+"秒";//设置输出格式3
}
}
//获取装倒计时的div
var timeBox = document.querySelector(".time");
//下面两句复写一个倒计时函数:是为了在刷新页面是直接显示倒计时,否则会在1秒后才在页面中显示出来
var timer = daojishi(ms1,"");//""输出的是时间格式3
timeBox.innerText = timer;
//设置每隔1秒,更新时间(通过改变盒子的innerText)
var intervalTime = setInterval(function(){
var timer = daojishi(ms1,"");
timeBox.innerText = timer;
},1000)
网友评论