• 使用moment.js写一个倒计时


    使用uniapp 直接复制全部代码粘贴到页面就可以使用,确定引入的moment.js文件位置

     1 <template>
     2     <view>
     3         <view class="one">
     4             {{starTime}}
     5             <view class="">
     6                 
     7             </view>
     8             {{temporaryTime}}
     9             <view class="">
    10                 
    11             </view>
    12             {{counTime}}
    13         </view>
    14     </view>
    15 </template>
    16 
    17 <script>
    18     import moment from '../../utis/moment.js';                    //引入moment.js
    19     var Inter;                                                                                    //设置定时器变量名
    20     export default {
    21         data() {
    22             return {
    23                 starTime:"2020-02-02 12:00:00",                                    //开始时间
    24                 endTime:"2020-02-02 12:00:00",                                    //结束时间
    25                 temporaryTime:"2020-02-02 12:00:00",                        //临时时间
    26                 counTime:"00:00:00",                                                        //计算后的时间
    27             }
    28         },
    29         onLoad() {
    30         
    31         },
    32         onShow() {
    33             let that = this;
    34             that.starTime = moment().format()                                        //获取到的当前时间
    35             that.endTime = moment().add(10,'m').format()                //设置一个10分钟后的时间
    36             that.temporaryTime = that.endTime                                        //设置一个临时时间
    37             Inter = setInterval(function(){                                                            //设置计时器,每一秒调用一次
    38                 that.timeArray(that.endTime)
    39             },1000)
    40         },
    41         methods: {
    42             timeArray(time){                                                                                                    // 倒计时数组,外边放置一个定时器就可以实现倒计时
    43                 let that = this;
    44                 
    45                 let diff = moment(time, 'YYYY-MM-DD hh:mm:ss').diff(moment(), "seconds");                //对比两个时间差距,获得相差的秒数
    46                 
    47                 if (diff <= 0) {                                                                //如果两个时间没有差距
    48                     clearInterval(Inter)                                                    //清除定时器
    49                     that.counTime = "00:00:00"
    50                     return "00:00:00";
    51                 }
    52                 
    53                 let days = parseInt(diff / (3600 * 24));                    //根据获得的秒数计算有多少天
    54                 diff = diff - days * 3600 * 24;
    55                 let hour = parseInt(diff / 3600);                                    //根据获得的秒数计算有多少小时
    56                 diff = diff - hour * 3600;
    57                 let minute = parseInt(diff / 60);                                    //根据获得的秒数计算有多少分钟
    58                 let second = diff - 60 * minute;
    59                 
    60                 if (days < 10) {
    61                     days = "0" + days;
    62                 }
    63                 
    64                 if (hour < 10) {
    65                     hour = "0" + hour;
    66                 }
    67                 
    68                 if (minute < 10) {
    69                     minute = "0" + minute;
    70                 }
    71                 
    72                 if (second < 10) {
    73                     second = "0" + second;
    74                 }
    75                 
    76                 if (days == '00') {
    77                     that.counTime = hour + ":" + minute + ":" + second
    78                 } else {
    79                     that.counTime = days + "" + hour + ":" + minute + ":" + second
    80                 }
    81                 
    82             }
    83         }
    84     }
    85 </script>
    86 
    87 <style>
    88 
    89 </style>
    忍一时,越想越气; 退一步,哎呦我去!
  • 相关阅读:
    20165222第八周课上补做
    20165222—第八周学习
    20165222《Java程序设计》——实验二 面向对象程序设计
    20165222 结对编程学习
    20165222 第七周学习总结
    20165222 第六周学习总结
    20165222 实验一java开发环境的熟悉
    20165222 第五周学习总结
    JSP
    Servlet
  • 原文地址:https://www.cnblogs.com/l-ialiu/p/14735691.html
Copyright © 2020-2023  润新知