dayjs计算过去时间到现在的时长。

ThridTianFuStreet小貂蝉

于 2024-04-24 10:39:47 发布

阅读量467

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/Blues_han/article/details/138151853

版权

示例图

2022-07-20 01:13:00 到现在的时间。
在这里插入图片描述

页面代码

注意：需要引入dayjs,我是从BootCDN引入的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="https://upload.51yunmeng.com:9000/operation/BUSINESS_LICENSE/QQ图片20240206150247_1707202982530.png" type="image/x-icon" />
    <title>小土豆</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
    <style>
       *{padding:0;margin:0;}
        html,body{ 
           width:100%;height:100%;
           overflow:hidden;
        }
        body{
           background-size:100% 100%;
           position:relative;
        }
        #box {
            line-height: 50px;
            text-align: center;
            background-color: #000;
            color: #fff;
            font-size: 30px;
            margin:40px auto;
            border-radius:20px;
            border:4px solid rgba(255, 255, 255, 0.5);
        }
        .copy{
            position:absolute;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%,0);
            font-style: italic;
            color:#409EFF;
        }
	    @keyframes move{ /*  炫酷旋转提示 */
			0%{transform:rotateY(0deg);background: #409EFF;}
		   50%{transform: rotateY(90deg); background: green;}
		   100%{transform: rotateY(0deg);background: pink;}
		}
        /* 媒体查询：兼容手机端 */
        @media screen and (max-width: 600px) { #box  { background: #409EFF;}}
        @media screen and (min-width: 650px) { #box  { background: green;} }
        @media screen and (min-width: 768px) { #box  { background: blue;}} 
        @media screen and (min-width: 992px) { #box  { background: orange;width:350px;} } 
        @media screen and (min-width: 1200px) { #box  { background: pink;width:350px;}}
    </style>
</head>

<body>
    <div id="box">xxx天xxx时xxx分xxx秒</div>
    <div class="copy">&copy;Author:hantao20240122</div>
    <script>
       window.onload = function(){
            // 得到时间戳
            let endTime = dayjs().format("YYYY-MM-DD 18:30:00");
            clearInterval(timerNew);
            var timerNew = setInterval(()=>{initTime(); },100)
            // 补零
            function fillZero(t) {
                return t < 10 ? `0${t}` : t;
            }
            // 补毫秒
            function fillSconedZero(t) {
                if(t<10){
                    return `00${t}`;
                }else if(t>=10 && t<=99){
                    return `0${t}`;
                }else{
                    return t;
                }
            }
            function initTime(){
                let now = dayjs().format("YYYY-MM-DD HH:mm:ss:SSS")
                let timeCha = dayjs().diff(dayjs("2022-07-20 01:13:00"));
	            let lastDay = Math.floor(timeCha/86400000);
                let lastHour = Math.floor(timeCha/3600000%24);
                let lastMin = Math.floor(timeCha / 1000 / 60 % 60);
                let lastSecond = Math.floor(timeCha / 1000 % 60);
                let lastMiniSecond = Math.floor(timeCha%1000);
                lastHour = fillZero(lastHour);
                lastMin = fillZero(lastMin);
                lastSecond = fillZero(lastSecond);
                lastMiniSecond = fillSconedZero(lastMiniSecond);
                box.innerHTML = `&nbsp;${lastDay}天${lastHour}小时${lastMin}分钟${lastSecond}秒${lastMiniSecond}&nbsp;`;  
            }
            initTime();
       }
    </script>
</body>
</html>