js计算两个时间戳的时间差之多少天、时、分、秒，格式0000、动态显示年月日时分秒（不足两位补0）

最新推荐文章于 2024-05-16 07:03:33 发布

viceen

最新推荐文章于 2024-05-16 07:03:33 发布

阅读量2k

点赞数

分类专栏： js知识文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_44867717/article/details/132524924

版权

js知识专栏收录该内容

152 篇文章 12 订阅

订阅专栏

js计算两个时间戳的时间差之多少天、时、分、秒，格式00:00、00:00:00、动态显示年月日时分秒（不足两位补0）

实例1-几天几小时几分钟几秒

src\utils\utils.ts

几天几小时几分钟几秒

1、定义方法

//计算两个时间之间的时间差 多少天时分秒
function intervalTime(startTime,endTime) {
    // var timestamp=new Date().getTime(); //计算当前时间戳
    var timestamp = (Date.parse(new Date()))/1000;//计算当前时间戳 (毫秒级)
     var date1 = ""; //开始时间
    if(timestamp<startTime){
        date1=startTime;
    }else{
        date1 = timestamp; //开始时间
    }
    var date2 = endTime; //结束时间
    // var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
    var date3 =  (date2- date1)*1000; //时间差的毫秒数
    //计算出相差天数
    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);
    console.log(days + "天 " + hours + "小时 ")
    // return   days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
    return   days + "天 " + hours + "小时 "
}

2、暴露给外部调用

module.exports = {
    intervalTime
}

3、其他页面导入

import {
    intervalTime
} from "@/common/util.js"

4、data中声明

 data() {
     return {
        intervalTime:intervalTime
     };
},

5、页面中使用

<view class="cu-tag bg-green light sm round">     {{intervalTime(dataItem.volunteer_start_time,dataItem.volunteer_end_time)}}
</view>

6、效果

在这里插入图片描述

注意：后面如果自己需分、秒，自己同理加上去。

实例2、动态显示年月日时分秒（不足两位补0）

1、

<html>
    <head>
        <meta http-equiv="Content-Type” content="text/html; charset=gb2312">
        <title>动态显示年月日星期时分秒</title>
        <script type="text/javascript">
            var days = new Array("日", "一", "二", "三", "四", "五", "六");
            function showDT() {
                var currentDT = new Date();
                var y, m, date, day, hs, ms, ss, theDateStr;
                y = currentDT.getFullYear(); //四位整数表示的年份
                m = currentDT.getMonth() + 1; //月
                date = currentDT.getDate(); //日
                day = currentDT.getDay(); //星期
                hs = currentDT.getHours(); //时
                ms = currentDT.getMinutes(); //分
                ss = currentDT.getSeconds(); //秒
                theDateStr =
                    y +
                    "年" +
                    m +
                    "月" +
                    date +
                    "日 星期" +
                    days[day] +
                    " " +
                    hs +
                    ":" +
                    ms +
                    ":" +
                    ss;
                document.getElementById("theClock").innerHTML = theDateStr;
                // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
                window.setTimeout(showDT, 1000);
            }
        </script>
    </head>
    <body onload="showDT()">
        <div id="theClock" style="font-weight: bold; width: 300px"></div>
    </body>
</html>

补0

    <body οnlοad="showDT()">
        <div id="theClock" style="font-weight: bold; width: 300px"></div>
    </body>
    <script>
        function showDT() {
            var date = new Date();
            //年
            var year = date.getFullYear();
            //月
            var month =
                date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1;
            //日
            var day =
                date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            //时
            var hh =
                date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            //分
            var mm =
                date.getMinutes() < 10
                    ? "0" + date.getMinutes()
                    : date.getMinutes();
            //秒
            var ss =
                date.getSeconds() < 10
                    ? "0" + date.getSeconds()
                    : date.getSeconds();

            var nowTime =
                year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;

            nowTime =
                year +
                "年" +
                month +
                "月" +
                day +
                "日" +
                " " +
                hh +
                ":" +
                mm +
                ":" +
                ss;
            document.getElementById("theClock").innerHTML = nowTime;
            // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
            window.setTimeout(showDT, 1000);
        }
    </script>

注

// 用这两句代码替换，能得到的补零效果
var hour = ('0' + date.getHours()).slice(-2);
var hour = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours();

// 三元表达式
function add0(time){
   if(time<10){
         time = ""+"0"+time;
    }
   return time;
  }

效果

在这里插入图片描述

实例3、格式00:00

1、定义方法

src\utils\utils.ts

//将时间戳-毫秒转为分秒  00:00
export const  formatSeconds = (value:number) => { // value: 205223
  var millisecond = value % (24 * 3600 * 1000); //计算时间戳转换的的毫秒数
  //计算相差分钟数
  var num1 = millisecond % (3600 * 1000); //计算小时数后剩余的毫秒数
  var minutes = Math.floor(num1 / (60 * 1000)) < 10  ? "0" + Math.floor(num1 / (60 * 1000)) :Math.floor(num1 / (60 * 1000));  // 0~9前补0
  //计算相差秒数
  var num2 = num1 % (60 * 1000); //计算分钟数后剩余的毫秒数
  var seconds = Math.round(num2 / 1000) < 10 ? "0" + Math.round(num2 / 1000) : Math.round(num2 / 1000);
  return minutes + ':'+ seconds
}

2、页面使用

index.vue

<template>
   <div v-for="(item, index) in newSongList" :key="item.id">
         <!-- 数组排序补0 -->
        <span>{{ index+ 1 < 10 ? '0' + `${index + 1}` : `${index + 1}`}}</span>
        <!-- playTime: 205223 -->
     <span>{{ formatSeconds(item.bMusic.playTime) }}</span>
    </div>
</template>
<script lang="ts" setup>
import { formatSeconds } from '@/utils/utils'
</script>

3、效果

在这里插入图片描述

viceen

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js计算两个时间戳的时间差之多少天、时、分、秒，格式0000、动态显示年月日时分秒（不足两位补0）

/ setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次。注意：后面如果自己需分、秒，自己同理加上去。//四位整数表示的年份。几天几小时几分钟几秒。
复制链接

扫一扫