js实现日期天数、时分秒的倒计时完整代码

更新时间：2023年11月03日 10:16:18 作者：西门吹雪~

这篇文章主要给大家介绍了关于js实现日期天数、时分秒的倒计时的相关资料,实现倒计时功能首先是得到目标时间,然后用当前时间减去目标时间,最后将时间差传化为天数、时、分、秒,需要的朋友可以参考下

前言

在用js实现倒计时的时候，可以先算出截止日期和今天之间相差的毫秒数，然后进行相应的比例进行day、 month 、hour、minute、second的计算，便可以准确的计算出相差的时间。

倒计时格式为：纯天数倒计时

function CountDown(year, month, day, hours) {
      let now = new Date();
      let endDate = new Date(year, month - 1, day, hours);
      let leftTime = endDate.getTime() - now.getTime();//计算剩余的毫秒数
      if (leftTime <= 0) {
        leftTime = 0;
      }
      let leftsecond = parseInt(leftTime / 1000);//计算剩余的秒数
      let countDay = Math.floor(leftsecond / (60 * 60 * 24));
      return  countDay;
    },
    //直接调用就好了
     CountDown(2050, 12, 31, 24)

倒计时格式为：天数+小时+分钟+秒

function CountDown(year, month, day, hours) {
    let now = new Date();
    let endDate = new Date(year, month - 1, day, hours);
    let leftTime = endDate.getTime() - now.getTime();//计算剩余的毫秒数
    if (leftTime <= 0) {
        leftTime = 0;
    }
    let leftsecond = parseInt(leftTime / 1000);//计算剩余的秒数
     day = Math.floor(leftsecond / (60 * 60 * 24));
    let hour = Math.floor((leftsecond - day * 24 * 60 * 60) / 3600);
    let minute = Math.floor((leftsecond - day * 24 * 60 * 60 - hour * 3600) / 60);
    let second = Math.floor(leftTime / 1000 % 60, 10);
    return `${day}天${hour}小时${minute}分钟${second}秒`;
}
//直接调用即可
CountDown(2050, 12, 31, 24)

总结

到此这篇关于js实现日期天数、时分秒的倒计时的文章就介绍到这了,更多相关js日期天数、时分秒倒计时内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript打印大全(打印页面设置/打印预览代码)
打印页面设置,打印页面预览在打印过程中经常会遇到，网上搜集整理了一些实用的打印方法与大家分享，感兴趣的朋友可以了解下哈
2013-03-03
浅谈Sublime Text 3运行JavaScript控制台
下面小编就为大家带来一篇浅谈Sublime Text 3运行JavaScript控制台。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
Javascript类型系统之undefined和null浅析
这篇文章主要介绍了Javascript类型系统之undefined和null的知识，通过本文还简单给大家介绍了javascript中null和undefined的区别的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07
简单理解js的prototype属性及使用
这篇文章主要介绍了简单理解js的prototype属性及使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
Javascript中的对象和原型(二)
这篇文章给大家介绍了js中的对象和原型，从工厂模式，构造函数方面展开话题，介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08
基于微前端qiankun的多页签缓存方案实践
这篇文章主要介绍了基于微前端qiankun的多页签缓存方案实践,本文对qiankun框架的使用没有做太多的发散总结，官网和Github上已经有很多相关问题的总结和踩坑经验可供参考，需要的朋友可以参考下
2022-08-08
jquery动态添加删除div 具体实现
这篇文章介绍了jquery动态添加删除div实现代码，有需要的朋友可以参考一下
2013-07-07
Bootstrap Multiselect 常用组件实现代码
bootstrap-multiselect插件是一款基于bootstrap的下拉框美化插件，我们一般用来请求后台返回具有label和text对象的json数组即可渲染。接下来通过本文给大家分享Bootstrap Multiselect 常用组件实现代码，感兴趣的朋友一起看看吧
2017-07-07
详解Bootstrap网格垂直和水平对齐方式
网格在网页布局中是一个重点和难点，布局是网页设计的起点和基础，本文主要介绍了Bootstrap网格垂直和水平对齐方式，感兴趣的可以了解一下
2021-07-07
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
这篇文章主要介绍了最简单纯JavaScript实现Tab标签页切换的方式(推荐)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07