js原生编写倒计时原理及方法详解，解决刷新页面倒计时不显示问题

最新推荐文章于 2022-12-12 14:17:25 发布

草帽小子的女人

最新推荐文章于 2022-12-12 14:17:25 发布

阅读量519

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_45102071/article/details/113461882

版权

本文详细解析了使用JavaScript原生代码实现倒计时的原理和步骤，包括获取当前时间、计算剩余时间戳、转换为秒以及转化为日、时、分、秒的详细过程，同时解决了刷新页面后倒计时不显示的问题。

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

关于原生js倒计时编写：
原理：用户输入时间 - 当前时间 = 剩余时间
步骤：
1、获取当前时间：var nowTime = +new Date()；
2、获取用户输入时间： var InTime = +new Date(‘2020-01-01’)；
3、剩余时间戳 = 输入时间戳 - 当前时间戳：var Times = InTime - nowTime
4、将获取到的时间戳转为秒：Times = Times / 1000；
4、将时间戳转化成日、时、分、秒
a、var d = parseInt(Times/60/60/24)； //获取天数
b、var h = parseInt(Times / 60 / 60 %24) ; // 获取当前小时
c、var c = parseInt(Times / 60 % 60); //获取当前分钟
d、var s = parseInt(Times % 60);//获取当前秒
完整代码：

<style>
.cont{
   
  display: flex;
  justify-content: center;
  align-items: center;
}
.cont>span{
   
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: #000;
}
</style>
<div class