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>

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

     

  • 相关阅读:
    portal商品展示功能逻辑
    springboot读取自己定义的配置文件的方式以及使用joda_time来处理时间日期
    文件上传与下载总结
    swagger2的常用注解,传递参数的注意使用方法
    小知识回顾
    springboot如何集成mybatis的pagehelper分页插件
    MySQL基础之第8章 视图
    MySQL基础之第7章 索引
    MySQL基础之第6章 创建、修改和删除表 .
    MySQL基础之第5章 操作数据库
  • 原文地址:https://www.cnblogs.com/lhl66/p/15249360.html
Copyright © 2011-2022 走看看