// 倒计时
// 所谓的倒计时
// 是 终止时间 至 当前时间的时间差
// 将这个 时间差转化为 天,时,分,秒
// 当前时间对象 new Date()
// 结束时间对象 new Date('时间参数')
// 时间差: 时间对象中获取时间戳
// 两个时间戳的差,就是时间差
// 时间戳的单位是毫秒,必修要转化为秒
// 方法1
// 转化为天: 时间差秒数 / 1天的秒数 取整
// 转化为时: 计算天数之后,剩余的秒数 / 1小时的秒数 取整
// 转化为分: 计算天数,小时数之后,剩余的秒数 / 1分钟的秒数 取整
// 转化为秒: 计算天数,小时,分钟数之后,剩余的秒数
// 方法2
// 转化为天: 时间差秒数 / 1天的秒数 取整
// 转化为时: 转化为天数之后的余数 / 1小时的秒数 取整
// 转化为分: 转化为小时之后的余数 / 1分钟的秒数 取整
// 转化为秒: 转化为分钟之后的余数
// 将获取时间程序,定义为函数,方便在定时器中调用
// 函数有 函数名称 参数 执行体 返回值
// 1,先给div做写入操作,为了防止间隔时间中没有执行程序
document.querySelector('div').innerHTML = mySetTime('2020-10-1');
document.querySelector('div').style.color = mySetColor();
document.querySelector('div').style.backgroundColor = mySetColor();
// 2,通过定时器循环执行
setInterval( function(){
document.querySelector('div').innerHTML = mySetTime('2020-10-1');
document.querySelector('div').style.color = mySetColor();
document.querySelector('div').style.backgroundColor = mySetColor();
} , 1000 )
// 获取时间差,转化为字符串
function mySetTime(endTime) {
// 起始时间是当前时间
var start = new Date();
// 结束事件是设定时间
var end = new Date(endTime);
// 获取计算时间差
// (结束时间戳 - 起始时间戳) / 1000 取整 随便上下四舍五入都可以
var times = parseInt((end.getTime() - start.getTime()) / 1000);
/*
// 转化方法1
// 计算天 时间差秒数 / 1天的秒数 取整
var d = parseInt( times / (24*60*60) ) ;
// 计算小时 ( 时间差 - 天的秒数 ) / 小时的秒数 取整
var h = parseInt( (times - d*24*60*60 ) / (60*60) ) ;
// 计算分钟 ( 时间差 - 天的总秒数 - 小时的总秒数 ) / 分钟的秒数 取整
var m = parseInt( (times - d*24*60*60 - h*60*60 ) / 60 ) ;
// 补零
if(m < 10 ){
m = '0' + m;
}
// 计算秒 ( 时间差 - 天的总秒数 - 小时的总秒数 - 分钟的总秒数
var s = times - d*24*60*60 - h*60*60 - m*60 ;
// 补零
if(s < 10 ){
s = '0' + s;
}
*/
// 方法2
// 计算天 时间差秒数 / 1天的秒数 取整
var d = parseInt(times / (24 * 60 * 60));
// 计算时 转化为天之后的余数 / 1小时的秒数 取整
var h = parseInt((times % (24 * 60 * 60)) / (60 * 60));
// 计算分 转化为小时之后的余数 / 1分钟的秒数 取整
var m = parseInt((times % (60 * 60)) / 60);
if (m < 10) {
m = '0' + m;
}
// 计算秒 转化为分钟之后的余数
var s = times % 60;
if (s < 10) {
s = '0' + s;
}
// 现在有多个数值需要作为返回值,在函数之外使用
// 方法1,返回一个字符串
return `距离${endTime},还有${d}天${h}小时${m}分钟${s}秒`;
// 方法2,可以定义一个数组或者对象,来存储多个数值,并且返回
// 推荐使用对象,可以自定义键名
// 定义一个对象来存储所有的返回值
var obj = {};
// 给对象赋值,键名是可以自定义
obj.d = d;
obj.h = h;
obj.m = m;
obj.s = s;
// return obj;
}
// 随机颜色函数
function mySetColor(){
var c1 = parseInt(Math.random()*256);
var c2 = parseInt(Math.random()*256);
var c3 = parseInt(Math.random()*256);
return `rgb(${c1},${c2},${c3})`;
}