微信小程序倒计时功能实现代码

2024-10-05 14:51:09

倒计时功能是一个比较常见的功能，比如用户获取验证码就需要用到。这里记录一下在微信小程序里面倒计时功能的简单实现。

直接看看代码吧

//倒计时60秒
function countDown(that,count) {
 if (count == 0) {
 that.setData({
  timeCountDownTop: '获取验证码',
  counting:false
 })
 return;
 }
 that.setData({
 counting:true,
 timeCountDownTop: count + '秒后重新获取',
 })
 setTimeout(function(){
 count--;
 countDown(that, count);
 }, 1000);
}

在需要倒计时的地方调用

Page({
 data:{
  counting:false
 },
 //生成验证码
 generateVerifyCode:function() {
  var that = this;
  if (!that.data.counting) {
   wx.showToast({
   title: '验证码已发送',
   })
   //开始倒计时60秒
   countDown(that, 60);
  }
 },
})

下面简单介绍下功能的实现

首先倒计时的方法是写在Page的外面，这个别搞错了

实现倒计时关键的地方在于setTimeout方法，也即下面这段代码。setTimeout方法可以设置在指定的时间间隔执行某个函数。应用的格式是setTimeout(function(),time),function就是对应要执行的方法，time就是时间间隔，这里的1000表示1000毫秒，也就是间隔1秒执行一次countDown方法。

setTimeout(function(){
 count--;
 countDown(that, count);
 }, 1000);

countDown方法中利用count字段来设置倒计时的时间，比如这里是60秒
countDown方法中把that也传递进去是为了在倒计时状态改变时利用setData方法更新页面
countDown方法中利用counting字段来判断是否已经在倒计时了，避免重复开始倒计时

倒计时结束是通过count来判断，通过return直接退出

总结

以上所述是小编给大家介绍的微信小程序倒计时功能实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

微信小程序实现倒计时60s获取验证码

本文实例为大家分享了微信小程序倒计时获取验证码的具体代码,供大家参考,具体内容如下 1.工具类(引用微信小程序提供的工具类) countdown.js class Countdown { constructor(options = {}) { Object.assign(this, { options, }) this.__init() } /** * 初始化 */ __init() { this.page = getCurrentPages()[getCurrentPages().length
Android中微信小程序支付倒计时功能

看效果由于web 经验弱爆- - 一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全OK吗- 事实证明,线程还是王道啊,一开始就应该这么搞嘛- 度娘上面也看了很多都是用js写的,but,可能刚做没几天吧,我对js与微信小程序掌握还不够熟练思路: onLoad:function(options)调用倒计时方法函数定义线程进行数据动态现实 1. 日期转化成毫秒 2.定义线程动态显示 3.渲染倒计时 1.毫秒转成固定格
微信小程序之发送短信倒计时功能

点击后代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo
微信小程序动态显示项目倒计时效果

本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下 1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: <p> <block wx:if="{{total_micro_second<=0}}">剩余时间:已经截止</block> <block wx:if="{{clock!='已经截止'}}">剩余时间:{{clock}}</block>
微信小程序倒计时组件实现代码

功能: 适用于电商应用的限时团购.商品秒杀等先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段代码. wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) { var second = that.data.second
微信小程序倒计时功能实现代码

倒计时功能是一个比较常见的功能,比如用户获取验证码就需要用到.这里记录一下在微信小程序里面倒计时功能的简单实现. 直接看看代码吧 //倒计时60秒 function countDown(that,count) { if (count == 0) { that.setData({ timeCountDownTop: '获取验证码', counting:false }) return; } that.setData({ counting:true, timeCountDownTop: count +
微信小程序倒计时功能实例代码

本实例的主要功能是:单击按钮弹出一个半透明的弹出层,在规定的时间后才能激活关闭按钮,关闭弹出层. wxml部分 <view class="wrap"> <view class="btns"> <button formType="submit" class="btn" hover-class='btn_on' bindtap='show'>使用说明</button> <but
微信小程序收藏功能的实现代码

需求点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目需要解决的问题点击收藏后需要显示已收藏,并且文字状态改变另一个页面如何知道你点击了收藏,并且获得你点击收藏的数据如何解决? 数据状态绑定,并且由状态控制样式(三元运算符) 缓存(setStorageSync,getStorageSync),点击页面设置缓存(数据的id),显示页面获取缓存,通过获得缓存id,将整个数据中的获得的id那一项,取出,放入新的数组具体实现 wxml <image class="save &qu
微信小程序12行js代码自己写个滑块功能(推荐)

效果图如下所示 .wxml <view class="jindu" bindtap="cuin"> <view class="xian" style="width:{{towards}}px;"> <view class="yuan" bindtouchmove='touchMove'></view> </view> </view> &
绘制微信小程序验证码功能的实例代码

1.在 utils 文件中新建 mcaptcha.js 文件,写入以下代码: module.exports = class Mcaptcha { //画板 constructor(options) { this.options = options; this.fontSize = options.height * 3 / 4; this.init(); this.refresh(this.options.code); } init() { this.ctx = wx.createCanvasCo
微信小程序支付功能（前端）的实现

微信小程序支付功能(前端)的实现只提供微信小程序端代码: var app = getApp(); Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 var that = this //登陆获取code wx.login({ success: function (res) { console.log(res.code) //获取openid that.getOpenId(res.code) } }
微信小程序支付功能实现PHP实例详解

微信小程序支付功能实现PHP实例详解前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee',//改成你自己的链接 header: { 'Content-Type': 'application/x-www-form-urlencoded' }, method:'POST', success: function(res) { console.log(res.data); console.lo
.NET Core 实现微信小程序支付功能（统一下单）

最近公司研发了几个电商小程序,还有一个核心的电商直播,只要是电商一般都会涉及到交易信息,离不开支付系统,这里我们统一实现小程序的支付流程(与服务号实现步骤一样). 开通小程序的支付能力开通小程序支付功能比较简单,基本上按微信文档一步一步的申请就好,如图以上三个步骤就申请完成 1.提交资料给微信 2.微信审核并签署协议 3.商户后台绑定同主体的APPID 商户后台绑定同一主体的APPID并授权 1.登录商户后台https://pay.weixin.qq.com,进入产品中心-APPID授权管理
微信小程序签到功能

本文实例为大家分享了简易微信小程序签到功能的具体代码,供大家参考,具体内容如下一.效果图点击签到后二.数据库用一张数据表存用户签到的信息,每次用户签到都会往表中添加一条记录了用户id和签到日期的数据,如下图三.后端后端写两个接口,一个用于查询用户今日是否签到和签到记录总数,一个用于添加用户签到信息到数据库.这里用的是python的flask框架. (1)查询用户签到信息接口: @app.route('/get_sign/<user_id>') def get_sign(user_i

微信小程序倒计时功能实现代码

相关推荐

随机推荐