微信小程序实现倒计时功能,一看就懂,直接用

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

实现一个最高单位为分钟(08:00)的倒计时功能

结构完整,直接用就可以文章来源地址https://www.toymoban.com/news/detail-789484.html

data: {
    time:0, //时间
    timer:'', //倒计时定时器
}
onLoad(){
    this.loadData();
},
onUnload() {
    if (this.data.timer) {
        console.log('销毁计时器')
        clearInterval(this.data.timer)
    }
},

loadData(){
    //res.data.paper.time是调用接口后获取到的分钟数
    var totalSeconds = res.data.paper.time * 60; // 设置倒计时时间,单位为秒
    this.countdown(totalSeconds);
},

// 倒计时函数
countdown(totalSeconds) {
    let that = this;
    if (totalSeconds <= 0) {
        this.setData({
            time: "00:00"
        });
        clearTimeout(this.data.timer)
        return;
    }
    this.data.timer = setTimeout(function () {
        that.setData({
            time: that.dateformat(totalSeconds - 1)
        });
        that.countdown(totalSeconds - 1);
    }, 1000);
},

// 将秒数转换为分秒格式,例如:01:30
dateformat(micro_second) {
    var second = Math.floor(micro_second % 60);
    var minute = Math.floor(micro_second / 60);
    return (minute < 10 ? '0' + minute : minute) + ":" + (second < 10 ? '0' + second : second);
},

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

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

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

相关文章

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

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

    2024年02月10日
    浏览(48)
  • Flutter实现倒计时功能,秒数转时分秒,然后倒计时

    Flutter实现倒计时功能 发布时间:2023/05/12 本文实例为大家分享了Flutter实现倒计时功能的具体代码,供大家参考,具体内容如下 有一个需求,需要在页面进行显示倒计时,倒计时结束后,做相应的逻辑处理。 实现思路:在Flutter中,Timer.periodic提供了循环功能,查看函数定义:

    2024年02月13日
    浏览(53)
  • Kotlin:使用flow实现倒计时功能

    一、效果图 二、ExtendContext.kt 文件代码 注意:创建ExtendContext.kt选择file 使用kotlin扩展方法的特性创建countDown扩展方法,避免多个地方使用倒计时重复创建countDown方法 三、MainActivity.kt代码 四、build.gradle.kts代码

    2024年02月19日
    浏览(39)
  • uni-app小程序中实现倒计时功能

    在uni-app小程序中实现倒计时功能,可以按照以下步骤进行: 在data中设置一个变量用于存储倒计时的剩余时间: 在methods中创建一个函数,用于控制倒计时的逻辑: 可以在点击按钮或其他事件触发时调用startCountdown方法来开始倒计时: 在页面中显示倒计时时间: 可以在页面中

    2024年02月07日
    浏览(48)
  • Flutter 之Bloc入门指南实现倒计时功能

    使用Bloc开发Flutter的项目,其项目结构都很简单明确,需要创建状态,创建事件,创建bloc,创建对应的View。flutter_timer项目来分析下Bloc的使用方法。 通过这篇博客,你

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

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

    2024年02月04日
    浏览(57)
  • 51单片机实现倒计时,按键控制倒计时

    基于AT89C52的答辩倒计时。四个按键分别控制倒计时开始,暂停,时间加和减。剩下30S时蜂鸣器响,倒计时结束蜂鸣器响。  

    2024年02月07日
    浏览(59)
  • jquery 实现倒计时

    $(\\\".tableText\\\").click(function () {     var time = 60;     var timer = setInterval(function(){         time--;         $(\\\".tableText\\\").text(\\\"(\\\"+time+\\\"秒)重发\\\");         if(time==0){             clearInterval(timer);             $(\\\".tableText\\\").text(\\\"获取验证码\\\");         }     },1000); });

    2024年04月14日
    浏览(51)
  • Linux小程序:倒计时和进度条

    在Linux中我们实现两个小程序来体会r和n的区别,以及缓冲区是什么? 对于 r 和 n 的理解: n 表示换行且回到下一行的最开始的位置 r 表示的是回车,即将光标回到当前行最开始的位置 在C语言中,我们单单使用“n”就可以实现换行回车,但是”r“只能表示回车 Linux缓

    2024年02月17日
    浏览(43)
  • 51单片机通过计时器实现倒计时

    软件 : Keil5+Proteus7 元件 : AT89C51 * 1,7SEG-MPX2-CA * 1

    2024年02月16日
    浏览(72)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包