jq计算总时长 

1：
<style>
        .item {
            width: 500px;
            height: 50px;
            margin: 0 auto;
            text-align: center;
            font-size: 30px;
            color: orange;
        }

        strong {
            background-color: orange;
            padding: 0 10px;
            color: #fff;
            border-radius: 4px;
        }
    </style>

2：
<div class="days-coming">
    <div class="container">
        <h3 class="title tittle">我们的恋爱时长</h3>
        <div class="timer_wrap">
{{--          计时器--}}
            <div class="item">
                <span><span class="day">00</span>天</span>
                <strong><span class="hour">00</span>时</strong>
                <strong><span class="min">00</span>分</strong>
                <strong><span class="second">00</span>秒</strong>
            </div>
        </div>
    </div>
</div>

3：
<script>

    var endTime = new Date("2021-10-06");
    var dayel = document.querySelector(".day");
    var hourel = document.querySelector(".hour");
    var minel = document.querySelector(".min");
    var secondel = document.querySelector(".second");

    //计算
    setInterval(
        function () {
            // 获取现在的时间
            var nowTime = new Date();
            // 相差的时间
            var stamp = nowTime - endTime;
            // console.log(stamp);
            var day_ms = 24 * 60 * 60 * 1000;
            var hour_ms = 60 * 60 * 1000;
            var min_ms = 60 * 1000;
            var day = Math.floor(stamp / day_ms);
            var hour = Math.floor((stamp % day_ms) / hour_ms);
            var min = Math.floor((stamp % hour_ms) / min_ms);
            var s = Math.floor((stamp % min_ms) / 1000);

            // console.log(day,hour,min,s);
            dayel.innerText = wrap(day);
            hourel.innerText = wrap(hour);
            minel.innerText = wrap(min);
            secondel.innerText = wrap(s);
        }, 1000);

    function wrap(n) {
        return n>=10?n:"0"+n;
    }
</script>

 

 

以上是从几年几月几日，到现在过去的天数 ，注意看字体的大小，以下是从现在距离以后还有多少天

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>恋爱倒计时</title>
    <style>
        h1 {
            width: 250px;
            margin: 100px auto 50px auto;
        }

        .item {
            width: 500px;
            height: 50px;
            margin: 0 auto;
            text-align: center;
            font-size: 30px;
            color: orange;
        }

        strong {
            background-color: orange;
            padding: 0 10px;
            color: #fff;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <h1>距离恋爱一千天,还有</h1>
    <div class="item">
        <span><span class="day">00</span>天</span>
        <strong><span class="hour">00</span>时</strong>
        <strong><span class="min">00</span>分</strong>
        <strong><span class="second">00</span>秒</strong>
    </div>
    <script>
        alert("段铭锟和王娟的恋爱倒计时！");
        alert("亲爱的乖!");
        alert("爱你呀");
        alert("恋爱一千天，珍惜到永远！");
        var endTime = new Date("2021-4-2");
        var dayel = document.querySelector(".day");
        var hourel = document.querySelector(".hour");
        var minel = document.querySelector(".min");
        var secondel = document.querySelector(".second");


        //计算
        setInterval(
            function () {
                // 获取现在的时间
                var nowTime = new Date();
                // 相差的时间
                var stamp = endTime - nowTime;
                // console.log(stamp);
                var day_ms = 24 * 60 * 60 * 1000;
                var hour_ms = 60 * 60 * 1000;
                var min_ms = 60 * 1000;
                var day = Math.floor(stamp / day_ms);
                var hour = Math.floor((stamp % day_ms) / hour_ms);
                var min = Math.floor((stamp % hour_ms) / min_ms);
                var s = Math.floor((stamp % min_ms) / 1000);

                // console.log(day,hour,min,s);
                dayel.innerText = wrap(day);
                hourel.innerText = wrap(hour);
                minel.innerText = wrap(min);
                secondel.innerText = wrap(s);
            }, 1000);

        function wrap(n) {
            return n>=10?n:"0"+n;
        }
    </script>

</body>

</html>

 

posted @ 2022-02-14 20:12  王越666  阅读(58)  评论(0)  编辑  收藏  举报