【06】倒计时 demo_v2 【vue写的】

 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>倒计时应用_v2</title>

</head>


<body>
    <div id="app">
        <div>剩余时间：<span>{{remainingTime}}</span> </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                remainingTime: "",
            }
        },
        methods: {
            // 倒计时 code star------------------------------
            // 格式化总秒数
            formatTime(sections) {
                var d = parseInt(sections / 60 / 60 / 24),
                    h = parseInt(sections / 60 / 60 % 24) < 10 ? `0${parseInt(sections / 60 / 60 % 24)}` : `${parseInt(sections / 60 / 60 % 24)}`,
                    m = parseInt(sections / 60 % 60) < 10 ? `0${parseInt(sections / 60 % 60)}` : `${parseInt(sections / 60 % 60)}`,
                    s = parseInt(sections % 60) < 10 ? `0${parseInt(sections % 60)}` : `${parseInt(sections % 60)}`;
                return {
                    d,
                    h,
                    m,
                    s
                }
            },
            //倒计时封装函数  startTime:开始时间，endTime：截止时间
            getCountdown(startTimeStamp, endTimeStamp) {
                endTimeStamp && endTimeStamp.toString().length == 13 ? endTimeStamp = endTimeStamp : endTimeStamp = endTimeStamp * 1000; //时间戳设置成13位数
                console.log("截止时间：" + new Date(parseInt(endTimeStamp)).toLocaleString())
                setInterval((startTimeStamp) => {
                    var startTimeStamp = Date.now(); //输出13位数时间戳
                    var remainingSeconds = parseInt((endTimeStamp - startTimeStamp) / 1000); //输出剩余总秒数
                    if (startTimeStamp < endTimeStamp) {
                        var remainingTimeObj = this.formatTime(remainingSeconds); //获取剩余时间对象
                        console.log(remainingTimeObj);
                        // 更新试图
                        this.remainingTime = `${remainingTimeObj.d} 天 ${remainingTimeObj.h}:${remainingTimeObj.m}:${remainingTimeObj.s}`;
                    } else {
                        this.remainingTime = "已过截止时间！";
                        console.log("已过截止时间！")
                    }
                }, 1000);
            }
            // 倒计时 code end------------------------------
        },
        created() {
            this.getCountdown(Date.now(), "1739161680")
        },

    })
</script>


</html>

 

posted @ 2021-03-26 14:07  半遮  阅读(63)  评论(0)    收藏  举报