zoukankan      html  css  js  c++  java
  • js之封装(秒数)转化为时分秒倒计时组件 vue版本

    效果如上图;

    <!--
     * @Author: lhl
     * @Date: 2021-09-09 21:43:00
     * @LastEditors: lhl
     * @LastEditTime: 2021-09-09 22:21:55
     * @Description:  组件调用 <Test :remainTime="5000"></Test>
    -->
    <template>
      <span>{{
        hour
          ? hourString + ':' + minuteString + ':' + secondString
          : minuteString + ':' + secondString
      }}</span>
    </template>
    
    <script>
    export default {
      data() {
        return {
          hour: '',
          minute: '',
          second: '',
          timer: ''
        }
      },
      props: {
        remainTime: {
          // 倒计时间总秒数
          default: ''
        }
      },
      mounted() {
        if (this.remainTime > 0) {
          this.hour = Math.floor((this.remainTime / 3600) % 24)
          this.minute = Math.floor((this.remainTime / 60) % 60)
          this.second = Math.floor(this.remainTime % 60)
          this.countDowm()
        } else {
          this.minute = 0
          this.second = 0
        }
      },
      methods: {
        countDowm() {
          var self = this
          clearInterval(this.timer)
          this.timer = setInterval(function () {
            if (self.hour === 0) {
              if (self.minute !== 0 && self.second === 0) {
                self.second = 59
                self.minute -= 1
              } else if (self.minute === 0 && self.second === 0) {
                self.second = 0
                self.$emit('countDowmEnd', true)
                clearInterval(self.timer)
              } else {
                self.second -= 1
              }
            } else {
              if (self.minute !== 0 && self.second === 0) {
                self.second = 59
                self.minute -= 1
              } else if (self.minute === 0 && self.second === 0) {
                self.hour -= 1
                self.minute = 59
                self.second = 59
              } else {
                self.second -= 1
              }
            }
          }, 1000)
        },
        formatNum(num) {
          return num < 10 ? '0' + num : '' + num
        }
      },
      computed: {
        hourString() {
          return this.formatNum(this.hour)
        },
        minuteString() {
          return this.formatNum(this.minute)
        },
        secondString() {
          return this.formatNum(this.second)
        }
      }
    }
    </script>

    组件有不完善的地方请多多指出;多数场景自己已经测过了;

     

  • 相关阅读:
    轻节点如何验证交易的存在
    梯度爆炸/消失与初始化参数
    归一化能够加速训练的原因
    正则化可以防止过拟合的原因
    关于周志华《机器学习》中假设空间规模大小65的计算
    linux学习0001
    目标检测算法
    opencv安装与卸载
    前端学习02
    前端学习01
  • 原文地址:https://www.cnblogs.com/lhl66/p/15249360.html
Copyright © 2011-2022 走看看