首页 > 其他分享 >倒计时

倒计时

时间:2023-07-24 13:45:22浏览次数:28  
标签:60 secNum 倒计时 parseInt time var localSecNum

<template>
  <span v-if="this.localSecNum > 0 " style="margin-left:30px;">
    注意:<span style="color: #f5222d;margin: 0 12px;">{{ this.localSecNum > 0 ? getRemainTime() : '' }}</span>后所有任务将被释放,请尽快审核!
  </span>
</template>
<script>
export default {
  name: 'CountDown',
  props: {
    secNum: {
      type: Number,
      default: 0
    }
  },

  data () {
    return {
      localSecNum: 0,
      timer: null
    }
  },
  watch: {
    localSecNum (newv, oldv) {}
  },
  created () {
    console.log('new create countdown time ..', this.secNum)
  },
  mounted () {
    this.localSecNum = this.secNum
    if (this.localSecNum > 0) {
      this.beginCount = true
      // 设置定时器
      this.timer = setInterval(() => {
        this.localSecNum--
        if (this.localSecNum == 0) {
          this.timer = null
          this.$emit('endCount')
        }
      }, 1000)
    } else {
      this.beginCount = false
    }
  },
  activated () {
  },
  methods: {
    getRemainTime () {
      const time = this.localSecNum
      // var d  = parseInt(time/3600/24)
      var h = parseInt(time / (60 * 60)) % 24
      var m = parseInt(time / 60) % 60
      var s = parseInt(time % 60)

      return h + ' 小时 ' + m + ' 分 ' + s + '秒'
    }

  }
}
</script>

 

标签:60,secNum,倒计时,parseInt,time,var,localSecNum
From: https://www.cnblogs.com/dhjy123/p/17577001.html

相关文章

  • C#倒计时关闭提示框
    前两天实现某个功能需要做一个提示框并且能够自动关闭的,就从网上搜了一个能够自动关闭的提示框,但由于我需要的场景是不确定计时时间的,所以并没有使用到该窗体,但是我觉得可以留存备用,后边也把我这种倒计时的提示框用处还是很多的,用于自动弹窗自动关闭,虽然在我的项目......
  • 直播平台搭建,小小倒计时器
    直播平台搭建,小小倒计时器 publicclassjishiqi:MonoBehaviour{  Imagem_image;  Textm_text;  voidStart()  {    m_image=GetComponent<Image>();    m_text=GameObject.Find("Text").GetComponent<Text>();    m_i......
  • 倒计时 6 天!京东技术 20 年实践分享邀您莅临
    ......
  • 按钮倒计时
    <el-buttonsize="default":loading="codeLoading"@click="getCode"><spanv-show="!codeLoading">获取验证码</span>......
  • 2023年6月17号英语四六级考试倒计时,这些考前准备事项一定要注意
    2023年6月全国大学英语四六级考试将于6月17日(本周六)举行,冰雪为大家总结了四六级考前及考中注意事项,供同学们参考!考试时间四级考试时间:6月17日上午9:00-11:20六级考试时间:6月17日下午15:00-17:25考前一天复习准备:记得多看错题,建议四级考生考前一天刷一套真题,六级考生考试当天早......
  • Android:倒计时、定时器、定时执行次数使用笔记
    原文:https://blog.csdn.net/weixin_40420578/article/details/103876900一.倒计时(3、2、1)CountDownTimer() //一共3秒,每隔1秒执行一次 CountDownTimertimer=newCountDownTimer(3000,1000){ @Override publicvoidonTick(longmillisUntilFi......
  • 倒计时
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><div><inputtype="number"placeholder="请输入时间">分钟&l......
  • 倒计时 2 天!预约本周六 ShardingSphere 线上圆桌会,赢取惊喜好礼!
    ......
  • Tab切换以及倒计时组件封装
    1、Tab组件功能支持默认选中tab子元素可以是文本或者图片自定义tab的数量,并自适应展示实现方式用ul>li标签遍历传入的tabs数组参数渲染判断是否传入背景,未传则显示文字绑定点击事件特点简单易用可适配性2、倒计时组件功能常用于榜单或者活动结束倒计时......
  • 倒计时21天!2023架构·可持续未来峰会全嘉宾阵容亮相,各城市出品方邀您来!
    2023年6月29-30日,TheOpenGroup携手国内知名信息出版内容提供商机械工业出版社,为业界带来一个横跨北京-上海-成都-深圳等多城市的架构视听盛会—「架构·可持续未来峰会」! 本届峰会将将重点关注在经济与社会全面发展的大环境下,企业架构(EA)与技术标准在推动可持续发展过程中的关键......