【学习笔记35】JavaScript计算两个指定日期的时间差

一、要求

计算两个指定日期的时间差（2023年元旦到来的时间）

二、分析

1. 先获取到两个时间距离1970（格林尼时间）~~~毫秒数
2. 计算两个毫秒数的差值 ----> 得到了总毫秒数
3. 计算总毫秒数内, 有多少个完整的天
   • parseInt(总毫秒数 / 一天的毫秒数)
4. 用剩余不足一天的毫秒数去计算出时分秒

三、代码实现

    1秒   === 1000毫秒
    1分钟 === 1000*60毫秒
    1小时 === 1000*60*60毫秒
    1天   === 1000*60*60*24毫秒

1、代码实现

        /* 1. 获取当前的时间和指定时间 */
        // 当前时间
        var currentTime = new Date();
        // 指定时间
        var prevTime = new Date('2023-1-1 0:0:0');

        /* 2. 获取当前时间和指定时间到1970(格林尼时间)的毫秒差 */
        var currentTimeMilli = currentTime.getTime();
        var prevTimeMilli = prevTime.getTime();

        // 获取当前时间和指定时间的时间差
        var times = prevTimeMilli - currentTimeMilli;

        /* 4. 计算出 天 时 分 秒 */
        /**
         * 4.1 计算有多少完整的天
         *   计算公式：parseInt(总的毫秒数 / 一天的毫秒数)
         *            parseInt( times / (1000 * 60 * 60 * 24) )
         * 
         * 4.2 计算剩余不足一天的毫秒数
         *   计算公式: 总毫秒 - (完整天数 * 一天的毫秒数)
        */
        // 一天的毫秒数
        var oneDayMilli = 1000 * 60 * 60 * 24;

        // 有多少个完整的天
        var days = parseInt(times / oneDayMilli);

        // 减去完整天数的毫秒数
        leave1 = times - days * oneDayMilli;

        /**
         * 4.3 计算有多少完整的小时
         *   计算公式：parseInt(不足一天的毫秒数 / 一个小时的毫秒数)
         *            parseInt(leave1 / ( 1000 * 60 * 60 ) )
         * 
         * 4.4  计算一下不足一小时的毫秒数
         *   计算公式: leave1 - (完整的小时 * 一小时的毫秒数)
        */

        // 一小时的毫秒数
        var onHoursMilli = 1000 * 60 * 60;

        // 计算出有多少个完整的小时
        var hours = parseInt(leave1 / onHoursMilli);

        // 计算剩余不足一小时的毫秒数
        leave2 = leave1 - hours * onHoursMilli;

        /**
         * 4.5 计算有多少完整的分钟
         *   计算公式: parseInt(leave2 / 一分钟的毫秒数)
         * 
         * 4.6 计算一下不足一分钟的毫秒数
         *   计算公式: leave2 - (完整分钟 * 一分钟的毫秒数)
        */

        // 一分钟的毫秒数
        var oneMinutesMilli = 1000 * 60;

        // 计算出了有多少完整的分钟
        var minutes = parseInt(leave2 / oneMinutesMilli);

        // 计算不足一分钟的毫秒数
        leave3 = leave2 - minutes * oneMinutesMilli;

        /**  
         * 4.8 计算一下有多少完整的秒
         *   计算公式: parseInt(leave3 / 一秒钟的毫秒数)
        */

        var seconds = parseInt(leave3 / 1000);
        document.write(`<h1>距离2023元旦还相差${days}天${hours}小时${minutes}分钟${seconds}秒</h1>`);

2、代码优化

        /* 1. 获取当前的时间和指定时间 */
        // 当前时间
        var currentTime = new Date();
        // 指定时间
        var prevTime = new Date('2023-1-1 0:0:0');

        /* 2. 获取当前时间和指定时间的时间差*/
        var times = prevTime.getTime() - currentTime.getTime();

        /* 3. 计算出 天 时 分 秒  */

        // 3.1 计算相差的天数 
        var days = parseInt(times / (1000 * 60 * 60 * 24));

        // 3.2 计算相差小时数
        // 计算天数后剩余的毫秒数
        var leave1 = times % (1000 * 60 * 60 * 24);
        var hours = parseInt(leave1 / (1000 * 60 * 60));

        // 3.3 计算相差分钟数
        // 计算小时后剩余的毫秒数
        var leave2 = leave1 % (1000 * 60 * 60);
        var minutes = parseInt(leave2 / (1000 * 60));

        // 3.4 计算相差的秒数
        // 计算分钟后剩余的毫秒数
        var leave3 = leave2 % (1000 * 60);
        var seconds = parseInt(leave3 / 1000);

        document.write(`<h1>距离2023元旦还相差${days}天${hours}小时${minutes}分钟${seconds}秒</h1>`)

三、函数封装

1、函数说明

• 实际项目中每一个自定义函数(程序员自己写的函数) 必须有函数说明
• 在实际项目中，函数说明会有具体的格式要求

函数说明的基本格式(内容)

1. 函数名称，基本作用
2. 说明参数：数据类型 参数名称 基本说明
3. 说明返回值：数据类型、返回值名称、基本说明
4. 函数的执行原理，参数要求，函数的基本说明，越详细越好

2、函数封装

        /**
         * myGetTimeDifference 获取时间差数据
         *     @param    string  endTime       结束时间字符串
         *     @param    string  startTime     起始时间字符串
         *     @return   object                返回时间差的结果的天 小时 分钟 秒
         *     如果没有输出起始时间，以当前时间作为起始时间
        */

        /**
         * 1分钟 === 60秒
         * 1小时 === 60 * 60秒
         * 1天   === 60 * 60 * 24秒
        */
       function myGetTimeDifference(endTime, startTime){
        // 必须要有最终时间
        // 如果没有输入 返回一个报错信息
        if(endTime === undefined) return '您必须输入一个终止时间';

        // 创建终止时间
        // 如果开始时间 startTime 没有实参 当前时间作为起始时间
        var startTimeObj = startTime === undefined ? new Date() : new Date(startTime);
        
        // 计算时间差 转化为秒数
        var time = parseInt((endTimeObj.getTime() - startTimeObj.getTime) / 1000);

        // 总秒数转化为对应的天数
        var days = parseInt(time / (24 * 60 * 60));

        // 计算小时
        var hours = parseInt((time % (24 * 60 * 60)) / (60 * 60));

        // 计算分钟
        var minutes = parseInt((time % (60 * 60)) / 60);

        // 计算秒
        var seconds = time % 60;

        // 以对象的形式返回结果
        return {days, hours, minutes, seconds}
       }

3、函数调用

    <div>当前时间距离元旦放假还有XX天XX小时XX分钟XX秒</div>

    <script src="./qq.js"></script>

        // 通过DOM操作将字符串写入div中
        var oDiv = document.querySelector('div');

        // 通过函数获取时间差数据对象
        var time = myGetTimeDifference();
        // console.log(time);

        oDiv.innerHTML = `<h1>距离2023元旦放假还相差${time.days}天${time.hours}小时${time.minutes}分钟${time.seconds}秒</h1>`;

        // 通过定时器将程序每秒重复执行一次
        setInterval(function () {
            // 每次都要重新获取时间差数据
            var time = myGetTimeDifference('2023-1-1 0:0:0');
            console.log(time);

            // 将新的时间差数据写入div标签中
            oDiv.innerHTML = `<h1>距离2023元旦放假还相差${time.days}天${time.hours}小时${time.minutes}分钟${time.seconds}秒</h1>`;

        }, 1000)