微信小程序实现给一个时间去设置倒计时

这篇具有很好参考价值的文章主要介绍了微信小程序实现给一个时间去设置倒计时。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

设置倒计时

此方法仅限不超过一个月的倒计时文章来源地址https://www.toymoban.com/news/detail-505904.html

   <view> 
    <text>{{year>9?year:"0"+year}}</text><text>{{month>9?month:"0"+month}}</text><text>{{day>9?day:"0"+day}}</text><text>{{hour>9?hour:"0"+hour}}</text><text>{{minute>9?minute:"0"+minute}}</text><text>{{second>9?second:"0"+second}}</text></view>
page({
  data: {
    day:0,
    hour:0,
    minute:0,
    second:0,
  },
  // 设置倒计时 计算距离结束还有几天几时几分几秒
  setCountDown(endTime) {
    var s1 = new Date(endTime.replace(/-/g, "/")),
      s2 = new Date(),
      runTime = parseInt((s1.getTime() - s2.getTime()) / 1000);
    var year = Math.floor(runTime / 86400 / 365);
    runTime = runTime % (86400 * 365);
    var month = Math.floor(runTime / 86400 / 30);
    runTime = runTime % (86400 * 30);
    var day = Math.floor(runTime / 86400);
    runTime = runTime % 86400;
    var hour = Math.floor(runTime / 3600);
    runTime = runTime % 3600;
    var minute = Math.floor(runTime / 60);
    runTime = runTime % 60;
    var second = runTime;
    if (day < 0 || hour < 0 || minute < 0 || second < 0) {
      console.log("已经结束")
      return;
    }
    this.setData({
      day,
      hour,
      minute,
      second
    })
    console.log("日" + day + ",时" + hour + ",分" + minute + ",秒" + second)
    let that = this
    let _setItv = setInterval(() => {
      that.countDownStart()
    }, 1000);
    this.setData({
      setItv: _setItv
    })
  },
  // 开始做倒计时 
  countDownStart() {
    if (this.data.day == 0 && this.data.hour == 0 && this.data.minute == 0) {
      if (this.data.second > 0) {
        this.setData({
          second: this.data.second - 1
        })
      } else if (this.data.second == 0) {
        clearInterval(this.data.setItv)
        console.log("倒计时结束")
      }
    } else if (this.data.day == 0 && this.data.hour == 0) {
      // 不会出现minute等于0
      if (this.data.minute > 0) {
        if (this.data.second > 0) {
          this.setData({
            second: this.data.second - 1
          })
        } else if (this.data.second == 0) {
          this.setData({
            second: 59,
            minute: this.data.minute - 1
          })
        }
      }
    } else if (this.data.day == 0) {
      if (this.data.hour > 0) {
        if (this.data.minute > 0) {
          if (this.data.second > 0) {
            this.setData({
              second: this.data.second - 1
            })
          } else {
            this.setData({
              second: 59,
              minute: this.data.minute - 1
            })
          }
        } else {
          this.setData({
            second: 59,
            minute: 59,
            hour: this.data.hour - 1
          })
        }
      }
    } else {
      if (this.data.day > 0) {
        if (this.data.hour > 0) {
          if (this.data.minute > 0) {
            if (this.data.second > 0) {
              this.setData({
                second: this.data.second - 1
              })
            } else {
              this.setData({
                second: 59,
                minute: this.data.minute - 1
              })
            }
          } else {
            this.setData({
              second: 59,
              minute: 59,
              hour: this.data.hour - 1
            })
          }
        } else {
          this.setData({
            second: 59,
            minute: 59,
            hour: 23,
            day: this.data.day - 1
          })
        }
      }
    }
  },
})

到了这里,关于微信小程序实现给一个时间去设置倒计时的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序-全局倒计时+全局弹窗提示

    1、在计时页面中点击【开始】按钮开始倒计时,当退出该页面时计时仍然继续 2、计时结束后,弹出提示(无论当前处于哪个页面) 一、全局定义 1、app.json:加上下面这个 2、app.wxss:需要导入dialog.wxss,否则自定义的弹窗样式失效 3、app.js:实现倒计时+设置变量监听器 二、

    2024年02月10日
    浏览(48)
  • python实现一个简单的桌面倒计时小程序

    本章内容主要是利用python制作一个简单的桌面倒计时程序,包含开始、重置 、设置功能。 目录 一、效果演示 二、程序代码

    2024年02月04日
    浏览(57)
  • 帮我写一个跨年html倒计时代码,达到预定时间切换为放烟花

    以下是一个简单的 HTML 倒计时代码,在跨年时会切换为放烟花的效果: 上面的

    2024年02月03日
    浏览(61)
  • Unity实现倒计时和获取系统时间

      一:创建UGUI 1.创建Canvas画布组件,调节Canvas画布的分辨率等其他设置。我们可以把视图设置为2D模式下。   2.创建Text文本组件,取名为Timer计时器,我们调整Text文本组件的大小,用锚点设置Text文本组件的位置,并且设置好Text文本组件的颜色。   3.我们再创建一个Text文本组

    2024年02月10日
    浏览(47)
  • 使用css3实现一个超浪漫的新年倒计时

    新年快到了,使用css3实现一个超浪漫的新年倒计时吧,希望大家喜欢。 目录 1 实现思路  2 实现浪漫的心形背景 3 布局小时分钟和秒的区域 4、js倒计时  5、然后就是将所得的小时、分钟、秒对DOM进行赋值  6、每秒一更新  7、补充知识点1- 倒计时为什么不写1000 8、补充知识

    2024年02月03日
    浏览(44)
  • vue-element-table表格实现每一条数据绑定定时器实现倒计时或者持续时间

    前言 最近在开发中遇到一个需求,每一条数据前端计算处理时间,或者是倒计时时间。 第一表格不可能展示所有数据,所以我们需要当前时间和数据库开始时间获取一个初始值。 第二我们需要把定时器持续时间绑给每一条数据中,方便展示,和操作时候传递给后端存储。

    2024年01月20日
    浏览(71)
  • [Unity]Lua本地时间、倒计时和正计时。

    惯例,直接上代码:

    2024年02月12日
    浏览(49)
  • JavaScript 倒计时的时间偏差问题与解决方法

    倒计时是前端开发中常见的功能,但是使用 setTimeout 和 setInterval 方法实现的倒计时存在一个严重的问题:时间偏差。这是因为 JavaScript 的事件循环机制导致的,本文将详细解释时间偏差的原因,并提供解决方案。 时间偏差的原因 在 JavaScript 中,setTimeout 和 setInterval 方法的工

    2024年02月11日
    浏览(46)
  • 倒计时组件:可视化如何自定义目标时间 / 数字倒数

    倒计时组件支持通过自定义目标时间或倒数数字,在报表和大屏中展示时间倒数和数字倒数。 下面以Sugar BI为例,为大家展示 倒计时组件提供「时间倒数」和「数字倒数」两种展示模式,效果如下: 默认为「时间倒数」模式,打开「倒数模式」开关,可切换为「数字倒数」

    2023年04月08日
    浏览(48)
  • 基于51单片机交通灯带紧急开关+黄灯倒计时+可调时间

    仿真图proteus 7.8 程序编译器:keil 4/keil 5 编程语言:C语言 设计编号:J000 功能说明: 采用51单片机以及单片机最小系统和三极管驱动电路以及外围的按键和数码管显示等部件,设计一个基于单片机的交通灯设计。 1.四路交通灯,带有红绿灯倒计时,绿灯倒计时结束后转黄灯

    2024年02月06日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包