活动倒计时效果

KXJkang_jing888

于 2022-04-27 13:28:55 发布

阅读量273

点赞数

分类专栏： JavaScript-DOM 文章标签： javascript

本文链接：https://blog.csdn.net/KXJkang_jing888/article/details/124448881

版权

本文介绍了如何使用JavaScript实现计算到下课剩余时间的倒计时效果。通过将来时间戳减去当前时间戳，将剩余时间转换为天、时、分、秒。需要注意的是，从时间戳中获取的是毫秒，需要转换为秒进行计算。转换公式包括计算天数、小时数、分钟数和秒数。

摘要由CSDN通过智能技术生成

倒计时效果

需求：计算到下课还有多少时间

案例

分析：

①：用将来时间减去现在时间就是剩余的时间
②：核心：使用将来的时间戳减去现在的时间戳
③：把剩余的时间转换为天时分秒

注意：

通过时间戳得到是毫秒，需要转换为秒在计算
转换公式：
 d = parseInt(总秒数/ 60/60 /24); // 计算天数
 h = parseInt(总秒数/ 60/60 %24) // 计算小时
 m = parseInt(总秒数 /60 %60 ); // 计算分数
 s = parseInt(总秒数%60); // 计算当前秒数

1. 实例化时间对象
 new Date()
2. 时间对象方法
 时间对象里面的方法转换实际所用
3. 时间戳
 date.getTime()
 +new Date() 
 Date.now()
 重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>