倒计时

最新推荐文章于 2023-03-13 10:27:54 发布

年轻就该去拼搏奋斗

最新推荐文章于 2023-03-13 10:27:54 发布

阅读量106

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44096380/article/details/103327483

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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">
    <title>倒计时</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
    <div class="subs-title ContentDistance">
        <span>倒计时</span>
        <span id="J_Day"></span>
        <span>天</span>
        <span class="time_Blank" id="J_Hours"></span>
        <span class="time_sign">:</span>
        <span class="time_Blank" id="J_Minute"></span>
        <span class="time_sign">:</span>
        <span class="time_Blank" id="J_Second"></span>
    </div>
</body>
<script>
    var countDownInterval;
    var app = new Vue({
            el: '#app',
            data: {
                down_time: 0.000,
                times: {
                        day: "",
                        Hours: "",
                        Minute: "",
                        Second: "",
                }
            },
            created: function () {
                var date1 = new Date()
                var date2 = new Date('2019/12/12 12:12:12')
                var s1 = date1.getTime(), s2 = date2.getTime();
                this.down_time = (s2 - s1) / 1000;
            },
            mounted(){
                this.countTime();
            },
            methods:{
                countTime: function () {
                var that = this;
                if (!countDownInterval) {
                var that = this;
                if (typeof that.down_time != "number") {
                    that.countDown = false;
                    return;
                    }
                    countDownInterval = setInterval(function () {
                        that.down_time--;
                        if (that.down_time === 0) {
                        that.times.day = 0;
                        that.times.Hours = 0;
                        that.times.Minute = 0;
                        that.times.Second = 0;
                        that.countDown = false;
                        if (countDownInterval) {
                            clearInterval(countDownInterval);
                            countDownInterval = null;
                        }
                        } else {
                        that.times.day = Math.floor(that.down_time/86400);
                        that.times.day = that.times.day < 10 ? "0" + that.times.day : that.times.day;
                        that.times.Hours = Math.floor((that.down_time%86400)/3600);
                        that.times.Hours = that.times.Hours < 10 ? "0" + that.times.Hours : that.times.Hours;
                        that.times.Minute = Math.floor((that.down_time%3600)/60);
                        that.times.Minute = that.times.Minute < 10 ? "0" + that.times.Minute : that.times.Minute;
                        that.times.Second = Math.floor(that.down_time%60);
                        that.times.Second = that.times.Second < 10 ? "0" + that.times.Second : that.times.Second;
                        document.querySelector("#J_Day").innerHTML = that.times.day;
                        document.querySelector("#J_Hours").innerHTML = that.times.Hours;
                        document.querySelector("#J_Minute").innerHTML = that.times.Minute;
                        document.querySelector("#J_Second").innerHTML = that.times.Second;
                        }
                    }, 1000);
                    }
                }
            }
            
            })
</script>
</html>

年轻就该去拼搏奋斗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
倒计时

<!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-U...
复制链接

扫一扫