思路

运用时间戳,实现倒计时效果.
Tips:时间戳的三种常见应用场景
1.倒计时
2.验证数据是否被修改
3.防止浏览器强制缓存
实现逻辑:
0. 获取时间元素
1.获取结束时间与当前日期的时间戳
1.1 获取下课时间的时间戳
1.2 获取当前日期的时间戳
1.3 获取两个时间之间的时间差
2加判断语句判断条件为时间差小于等于0 如果满足则关闭定时器,否则执行
3将时间间隔转换为时分秒
4将获取到的数值赋值给对应的变量

语法

设置截至时间new Date()
获取截至时间到1970年1月1日的的时间戳date.getTime()，获取当前时间到 1970年1月1日的的时间戳Data.now(注意D要大写)，
开启定时器setInterval() ，关闭定时器clearInterval(timeId)

CSS样式

.countdown { width: 240px; height: 305px; text-align: center; line-height: 1; color: #fff; background-color: brown; /* background-size: 240px; / / float: left; */ overflow: hidden; }

.countdown .next {
  font-size: 16px;
  margin: 25px 0 14px;
}

.countdown .title {
  font-size: 33px;
}

.countdown .tips {
  margin-top: 80px;
  font-size: 23px;
}

.countdown small {
  font-size: 17px;
}

.countdown .clock {
  width: 142px;
  margin: 18px auto 0;
  overflow: hidden;
}

.countdown .clock span,
.countdown .clock i {
  display: block;
  text-align: center;
  line-height: 34px;
  font-size: 23px;
  float: left;
}

.countdown .clock span {
  width: 34px;
  height: 34px;
  border-radius: 2px;
  background-color: #303430;
}

.countdown .clock i {
  width: 20px;
  font-style: normal;
}

html样式

今天是2022年1月21日

下班倒计时

00 : 00 : 00

21:00:00下班

JS获取时间元素

设置结束时间

let hours = document.querySelector('#hour') let minutess = document.querySelector('#minutes') let sconds = document.querySelector('#scond') //设置时间 let date = new Date('2022-1-21 21:00:00') let num = 0

添加,设置定时器

涉及的算法

通过设置的时间戳减去当前时间戳，计算当前时间与设置时间之间的时差.利用这个时差作对比,当这个时差为0时将定时器移出.
通过计算设置时分秒并将数据输出到页面.

let timeId = setInterval(function () { let newData = Date.now() //设置时间戳减去当前时间戳，计算现在到设置时间的时长 num = +parseInt((date.getTime() - newData) / 1000) if (num < 0) { clearInterval(timeId) } //时 let hour = parseInt(num / 3600) //补0操作 hour = hour < 10 ? '0' + hour : hour //分 let minutes = parseInt((num % 3600) / 60) minutes = minutes < 10 ? '0' + minutes : minutes //秒 let miao = parseInt((num % 3600) % 60 % 60) miao = miao < 10 ? '0' + miao : miao hours.innerHTML = hour minutess.innerHTML = minutes sconds.innerHTML = miao }, 1000)

页面效果

微信图片_20220122134819.png

可能出现的bug

1时间戳Data.now,首字母没有大写导致无法生效
2补0后时间停止出现0-样式

微信图片_20220122140147.png 解决方法： 1退出定时器时把时间戳清0

if (num < 0) { clearInterval(timeId) num = 0 } 2 时间小于等于0时退出循环 if (num <=0) { clearInterval(timeId) return }

微信图片_20220122132002.png

Countdown case倒计时

思路

语法