微信小程序实现倒计时功能(超简单)

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

 声明倒计时长和当前剩余时长(字符串形式),我这里是30分钟(单位为秒)

data: {
        time:1800,
        countdown:''

    },

 定义倒计时函数,把倒计时长除以60的整数部分作为分,把倒计时长除以60的余数作为秒;

执行完后减一秒,用定时器每隔一秒执行一次。

 如果秒数不够两位,则在秒前加上字符串'0'。如:20:07

countdown(){
        var minute=Math.floor(this.data.time  / 60 );
        var second=this.data.time  % 60
        if(second<10){
            second='0'+second;
            this.setData({
                countdown:minute+':'+second
            })
        }else{
            this.setData({
                countdown:minute+':'+second
            })
        }
        this.setData({
            time:this.data.time-1
        })
        setTimeout(this.countdown, 1000);
    },

 在页面加载时调用

onLoad(options) {
        this.countdown()
    },

wxml:

<text>{{countdown}}</text>

使用三元运算使代码更简洁文章来源地址https://www.toymoban.com/news/detail-510290.html

countdown(){
        var minute=Math.floor(this.data.time  / 60 );
        var second=this.data.time  % 60
        second<10?second='0'+second:'';
        this.setData({
            countdown:minute+':'+second,
            time:this.data.time-1
        })
        setTimeout(this.countdown, 1000);
    },

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

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

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

相关文章

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

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

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

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

    python实现一个简单的桌面倒计时小程序

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

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

    Flutter实现倒计时功能,秒数转时分秒,然后倒计时

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

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

    Kotlin:使用flow实现倒计时功能

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

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

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

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

    Flutter 之Bloc入门指南实现倒计时功能

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

    2024年02月14日
    浏览(12)
  • 【C#】当重复使用一段代码倒计时时,使用静态类和静态方法,实现简单的this扩展方法

    【C#】当重复使用一段代码倒计时时,使用静态类和静态方法,实现简单的this扩展方法

    欢迎来到《小5讲堂》 大家好,我是全栈小5。 这是《C#》序列文章,每篇文章将以博主理解的角度展开讲解, 特别是针对知识点的概念进行叙说,大部分文章将会对这些概念进行实际例子验证,以此达到加深对知识点的理解和掌握。 温馨提示:博主能力有限,理解水平有限

    2024年01月19日
    浏览(12)
  • 简单的倒计时(html + css + javaScript)

    这个页面包含一个输入日期的输入框、一个“开始倒计时”的按钮以及一个显示倒计时的元素。当用户点击按钮时,会通过JavaScript获取输入的日期,并开始一个定时器,每秒更新倒计时并随机改变颜色。当倒计时结束时,定时器会被清除,倒计时元素将显示\\\"倒计时已结束\\\",

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

    51单片机实现倒计时,按键控制倒计时

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

    2024年02月07日
    浏览(11)
  • 【C#】当重复使用一段代码倒计时时,使用普通类和静态方法,实现简单的封装性、可扩展性、可维护性

    【C#】当重复使用一段代码倒计时时,使用普通类和静态方法,实现简单的封装性、可扩展性、可维护性

    欢迎来到《小5讲堂》 大家好,我是全栈小5。 这是《C#》序列文章,每篇文章将以博主理解的角度展开讲解, 特别是针对知识点的概念进行叙说,大部分文章将会对这些概念进行实际例子验证,以此达到加深对知识点的理解和掌握。 温馨提示:博主能力有限,理解水平有限

    2024年02月01日
    浏览(13)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包