一:模仿倒计时
1.代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模仿京东倒计时案例</title>
<script>
/* ① 核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时 ,但是不能拿着时分秒
相减,比如 05 分减去25分,结果会是负数的。
② 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时
间的毫秒数。
③ 把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)
转换公式如下:
d = parseInt(总秒数 / 60 / 60 / 24); // 计算天数
h = parseInt(总秒数 / 60 / 60 % 24) // 计算小时
m = parseInt(总秒数 / 60 % 60); // 计算分数
s = parseInt(总秒数 % 60); // 计算当前秒数 */
// 将倒计时的功能封装为方法
// 参数time用来接收用户传入的时间
function countdown(time) {
// 1. 获取当前系统的时间
var nowTime = +new Date();
// 2.获取用户输入的时间的毫秒数
var inputTime = +new Date(time);
// 3.用户输入时间的毫秒数减去系统当前时间的毫秒数,这样拿到了相差的毫秒数,我要转换为秒,这样好计算
var times = (inputTime - nowTime) / 1000; // times拿到的是秒
// 4.计算得出秒数之后,就可以进行转换了
// var day = times / 60 / 60 / 24; // 天,因为这样不够精确,会存在小数点,所以转换为整数
var day = parseInt(times / 60 / 60 / 24);
day = day < 10 ? '0' + day : day;
var hours = parseInt(times / 60 / 60 % 24);
hours = hours < 10 ? '0' + hours : hours;
var minutes = parseInt(times / 60 % 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var seconds = parseInt(times % 60);
seconds = seconds < 10 ? '0' + seconds : seconds;
return day + '天' + hours + '时' + minutes + '分' + seconds + '秒';
}
var result = countdown('2021-2-14 14:00:00');
console.log(result);
// 获取以下当前日期,验证是否正确
var nowDate = new Date();
console.log(nowDate);
</script>
</head>
<body>
</body>
</html>
2.运行结果: