JS 时间运算大全

2024-02-07 13:04:59

用JavaScript(js)对时间格式化

https://blog.csdn.net/cplvfx/article/details/113032537

注意引入jq

作者推荐

效果

开始时间:2021-1-1 12:10:10
结束时间:2021-2-1 13:13:13
时间差的毫秒数:2682183000
计算出-相差天数:31
计算出-小时数:1
计算出-分钟数:3
计算出-秒数 :3
计算结果 : 相差 31天 1小时 3 分钟3 秒

html

    <h1>作者推荐</h1>
    <div>开始时间:<span id="hot_ks"></span></div>
    <div>结束时间:<span id="hot_js"></span></div>
    <div>时间差的毫秒数:<span id="hot_sjc"></span></div>
    <div>计算出-相差天数:<span id="hot_xcts"></span></div>
    <div>计算出-小时数:<span id="hot_xss"></span></div>
    <div>计算出-分钟数:<span id="hot_fzs"></span></div>
    <div>计算出-秒数 :<span id="hot_ms"></span></div>
    <div>计算结果 :<span id="hot_jg"></span></div>

js-调用

        //作者推荐
      var Hot=function(){ 
          var ks='2021-1-1 12:10:10';
          var js='2021-2-1 13:13:13';
          let data=TimeDifference(ks,js);
            $("#hot_ks").html(ks);
            $("#hot_js").html(js);
            $("#hot_sjc").html(data.Milliseconds);
            $("#hot_xcts").html(data.days.days);
            $("#hot_xss").html(data.days.hours);
            $("#hot_fzs").html(data.days.minutes);
            $("#hot_ms").html(data.days.seconds);
            $("#hot_jg").html(" 相差 " + data.days.days + "天 " + data.days.hours + "小时 " + data.days.minutes + " 分钟" + data.days.seconds + " 秒");
      }; 
      Hot();

js-公共函数

        //作者推荐
        function TimeDifference(d1, d2) {  
            var date1 = new Date(d1);   //开始时间  
            var date2 = new Date(d2);    //结束时间  
            var Milliseconds = date2.getTime() - new Date(date1).getTime();   //时间差的毫秒数        

            //------------------------------  

            //计算出相差天数  
            var days = Math.floor(Milliseconds / (24 * 3600 * 1000))

            //计算出小时数   
            var leave1 = Milliseconds % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数  
            var hours = Math.floor(leave1 / (3600 * 1000))
            //计算相差分钟数  
            var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数  
            var minutes = Math.floor(leave2 / (60 * 1000))
            //计算相差秒数  
            var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数  
            var seconds = Math.round(leave3 / 1000)


            var ResultJson = {
                days: {
                    days: days >= 0 ? days : days + 1,
                    hours: hours >= 0 ? hours: hours + 1,
                    minutes: minutes >= 0 ? minutes : minutes + 1,
                    seconds: seconds >= 0 ? seconds: seconds + 1
                },
                Milliseconds: Milliseconds
            }; 
            return ResultJson;
        }

测试源码

注意引入jq

效果

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 时间运算</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <h1>作者推荐</h1>
    <div>开始时间:<span id="hot_ks"></span></div>
    <div>结束时间:<span id="hot_js"></span></div>
    <div>时间差的毫秒数:<span id="hot_sjc"></span></div>
    <div>计算出-相差天数:<span id="hot_xcts"></span></div>
    <div>计算出-小时数:<span id="hot_xss"></span></div>
    <div>计算出-分钟数:<span id="hot_fzs"></span></div>
    <div>计算出-秒数 :<span id="hot_ms"></span></div>
    <div>计算结果 :<span id="hot_jg"></span></div>
    <hr>

    <h1>JS 时间运算--天数运算--演示1</h1>
    <p style="color: #ccc;">转载：https://my.oschina.net/u/3913672/blog/2878194</p>
    <div>付款时间：<input type="text" name="fukuan" id="fukuan" value="2020-01-11"></div>
    <div>冲账期限（天）：<input type="text" name="chongzhang" id="chongzhang" value="1"></div>
    <div>延期天数：<input type="text" name="yanqi" id="yanqi">(*修改-然后按下 enter 键触发运算)</div>
    <div>计算结果的日期：<span id="jieguo_span"></span></div>
    <hr>

    <h1>JS 时间运算--天数运算--演示2</h1>
    <div>开始日期：<input type="text" name="kaishi" id="kaishi" value="2020-01-10"></div>
    <div>提前提醒天数：<input type="text" name="tixing" id="tixing" value="10"></div>
    <div>执行日期：<span id="zhixingshijian"></span></div>
    <div><input type="button" id="jisuan" value="执行计算"></div>
    <hr>

    <h1>Js计算时间差（天、小时、分钟、秒）--演示3</h1>
    <p style="color: #ccc;">转载：https://www.cnblogs.com/chenlove/p/8643036.html</p>
    <div>开始时间:<span id="demo3_kaishi"></span></div>
    <div>结束时间:<span id="demo3_jieshu"></span></div>
    <div>时间差的毫秒数:<span id="demo3_sjc"></span></div>
    <div>计算出-相差天数:<span id="demo3_xcts"></span></div>
    <div>计算出-小时数:<span id="demo3_xss"></span></div>
    <div>计算出-分钟数:<span id="demo3_fzs"></span></div>
    <div>计算出-秒数 :<span id="demo3_ms"></span></div>
    <div>计算结果 :<span id="demo3_jg"></span></div>
    <hr>


    <h1>演示4</h1>

    <h3>日期减去/加上天数等于第二个日期--演示4.1</h3>
    <p style="color: #ccc;">转载：https://blog.csdn.net/sat472291519/article/details/18077005</p>
    <div>开始时间:<span id="demo4_ks"></span></div>
    <div>天数:<span id="demo4_ts"></span></div>
    <div>减去结果:<span id="demo4_jg1"></span></div>
    <div>加上结果:<span id="demo4_jg11"></span></div>

    <h3>两个日期的差值(d1 - d2)--演示4.2</h3>
    <p style="color: #ccc;">转载：https://blog.csdn.net/sat472291519/article/details/18077005</p>
    <div>开始时间:<span id="demo4_kssj"></span></div>
    <div>结束时间:<span id="demo4_jssj"></span></div>
    <div>结果:<span id="demo4_jg2"></span></div>
    <div>结果:<span id="demo4_jg22"></span></div>



    <script type="text/javascript">

        //例子1
        $('#yanqi').change(function () {
            console.log('修改触发运算');
            var beginTimeVal = $('#fukuan').val();//获取页面中的付款时间，格式为2017-01-11类型 
            days = $("#chongzhang").val().trim();//获取页面中的冲账期限（天）val（）
            days1 = $("#yanqi").val();//获取页面中的延期天数
            console.log('付款时间:' + beginTimeVal);
            console.log('冲账期限（天）:' + days);
            console.log('延期天数:' + days1);
            daysInt = parseInt(days) + parseInt(days1);//强制转换为int类型【不转换不会报错但是时间不准确】
            var val = addDate(beginTimeVal, daysInt);//调用已经封装好的函数addDate $('#nextTime').val(val); })
            $("#jieguo_span").html(val);
        });

        //例子2
        $('#jisuan').click(function () {
            var kaishi = $('#kaishi').val();
            var tixing = $('#tixing').val();
            daysInt = parseInt(tixing);//强制转换为int类型【不转换不会报错但是时间不准确】
            var val = addDate(kaishi, daysInt);
            $("#zhixingshijian").html(val);
        });

        //例子3 
        var demo3 = function () {
            var date1 = '2020/12/01 00:00:00';  //开始时间  
            var date2 = new Date();    //结束时间  
            var date3 = date2.getTime() - new Date(date1).getTime();   //时间差的毫秒数        

            //------------------------------  

            //计算出相差天数  
            var days = Math.floor(date3 / (24 * 3600 * 1000))

            //计算出小时数   
            var leave1 = date3 % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数  
            var hours = Math.floor(leave1 / (3600 * 1000))
            //计算相差分钟数  
            var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数  
            var minutes = Math.floor(leave2 / (60 * 1000))
            //计算相差秒数  
            var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数  
            var seconds = Math.round(leave3 / 1000)

            $("#demo3_kaishi").html(date1);
            $("#demo3_jieshu").html(date2.toLocaleString());//将一个日期按照本地操作系统格式显示
            $("#demo3_sjc").html(date3);
            $("#demo3_xcts").html(days);
            $("#demo3_xss").html(hours);
            $("#demo3_fzs").html(minutes);
            $("#demo3_ms").html(seconds);
            $("#demo3_jg").html(" 相差 " + days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒");
        };
        demo3();

        ///计算函数
        //日期加减法  date参数为计算开始的日期，days为需要加的天数   
        //格式:addDate('2017-1-11',20)
        function addDate(date, days) {
            var d = new Date(date);

            //核心就是setDate()方法， date参数是要进行加减的日期，days参数是要加减的天数，如果往前算就传入负数，往后算就传入正数 ，注意js中的月份是0-11月，计算的时候要加1
            d.setDate(d.getDate() + days);
            var m = d.getMonth() + 1;
            return d.getFullYear() + '-' + m + '-' + d.getDate();
        }


        /

        //例子4 
        var demo4 = function () {

            //例子4.1
            var ks = new Date();
            var ts = 10;
            $("#demo4_ks").html(ks.toLocaleString()); //将一个日期按照本地操作系统格式显示
            $("#demo4_ts").html(ts);
            $("#demo4_jg1").html(demo4_MinusDays(ks, ts));
            $("#demo4_jg11").html(demo4_AddDays(ks, ts));


            //例子4.2
            var demo4_kssj = '2021-1-1';//开始
            var demo4_jssj = '2021-10-1';//结束
            $("#demo4_kssj").html(demo4_kssj); //将一个日期按照本地操作系统格式显示
            $("#demo4_jssj").html(demo4_jssj);
            $("#demo4_jg2").html(demo4_DateDiff(demo4_jssj, demo4_kssj));
        };
        demo4();
        //日期减去天数后的新日期.
        function demo4_MinusDays(dd, dadd) {
            //可以加上错误处理
            var a = new Date(dd);
            a = a.valueOf();
            a = a - dadd * 24 * 60 * 60 * 1000;
            a = new Date(a);
            return a.getFullYear() + "-" + (a.getMonth() + 1) + "-" + a.getDate();
        }
        //日期加上天数后的新日期.
        function demo4_AddDays(date, days) {
            var nd = new Date(date);
            nd = nd.valueOf();
            nd = nd + days * 24 * 60 * 60 * 1000;
            nd = new Date(nd);
            //alert(nd.getFullYear() + "年" + (nd.getMonth() + 1) + "月" + nd.getDate() + "日");
            var y = nd.getFullYear();
            var m = nd.getMonth() + 1;
            var d = nd.getDate();
            if (m <= 9) m = "0" + m;
            if (d <= 9) d = "0" + d;
            var cdate = y + "-" + m + "-" + d;
            return cdate;
        }
        // 这里不得不做补充,浪费好多时间得出教训:
        // Javascript 对时间的代号 
        // 0-11数字表示1-12月: var a= new Date(2006,5,6) 结果是2006-6-6
        // 0-6表示星期
        // 1-31表示日期
        // 0-23小时
        // 0-59分钟,秒


        //两个日期的差值(d1 - d2).
        function demo4_DateDiff(d1, d2) {
            var day = 24 * 60 * 60 * 1000;
            try {
                var dateArr = d1.split("-");
                var checkDate = new Date();
                checkDate.setFullYear(dateArr[0], dateArr[1] - 1, dateArr[2]);
                var checkTime = checkDate.getTime();

                var dateArr2 = d2.split("-");
                var checkDate2 = new Date();
                checkDate2.setFullYear(dateArr2[0], dateArr2[1] - 1, dateArr2[2]);
                var checkTime2 = checkDate2.getTime();

                var cha = (checkTime - checkTime2) / day;
                return cha;
            } catch (e) {
                return false;
            }
        }//end fun


        //作者推荐
      var Hot=function(){ 
          var ks='2021-1-1 12:10:10';
          var js='2021-2-1 13:13:13';
          let data=TimeDifference(ks,js);
            $("#hot_ks").html(ks);
            $("#hot_js").html(js);
            $("#hot_sjc").html(data.Milliseconds);
            $("#hot_xcts").html(data.days.days);
            $("#hot_xss").html(data.days.hours);
            $("#hot_fzs").html(data.days.minutes);
            $("#hot_ms").html(data.days.seconds);
            $("#hot_jg").html(" 相差 " + data.days.days + "天 " + data.days.hours + "小时 " + data.days.minutes + " 分钟" + data.days.seconds + " 秒");
      }; 
      Hot();

        //作者推荐
        function TimeDifference(d1, d2) {  
            var date1 = new Date(d1);   //开始时间  
            var date2 = new Date(d2);    //结束时间  
            var Milliseconds = date2.getTime() - new Date(date1).getTime();   //时间差的毫秒数        

            //------------------------------  

            //计算出相差天数  
            var days = Math.floor(Milliseconds / (24 * 3600 * 1000))

            //计算出小时数   
            var leave1 = Milliseconds % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数  
            var hours = Math.floor(leave1 / (3600 * 1000))
            //计算相差分钟数  
            var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数  
            var minutes = Math.floor(leave2 / (60 * 1000))
            //计算相差秒数  
            var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数  
            var seconds = Math.round(leave3 / 1000)


            var ResultJson = {
                days: {
                    days: days >= 0 ? days : days + 1,
                    hours: hours >= 0 ? hours: hours + 1,
                    minutes: minutes >= 0 ? minutes : minutes + 1,
                    seconds: seconds >= 0 ? seconds: seconds + 1
                },
                Milliseconds: Milliseconds
            }; 
            return ResultJson;
        }
    </script>
</body>

</html>

码农公寓

作者推荐

效果

html

js-调用

js-公共函数

测试源码

效果

代码

相关文章