zoukankan      html  css  js  c++  java
  • 微信小程序【获取验证码】倒计时效果

    最近开始接触微信小程序,会记录一些相关的小功能——例如这次是点击【获取验证码】按钮出现的倒计时效果。

    原文: http://blog.csdn.net/Wu_shuxuan/article/details/78539075  感谢

    .wxml

       <button class="buttonget" disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode">
                {{time}}
            </button>

    .js

    var interval = null //倒计时函数
    Page({
      data: {
        date: '请选择日期',
        fun_id: 2,
        time: '获取验证码', //倒计时 
        currentTime: 60
      },
      getCode: function (options) {
        var that = this;
        var currentTime = that.data.currentTime
        interval = setInterval(function () {
          currentTime--;
          that.setData({
            time: currentTime + ''
          })
          if (currentTime <= 0) {
            clearInterval(interval)
            that.setData({
              time: '获取',
              currentTime: 60,
              disabled: false
            })
          }
        }, 1000)
      },
      getVerificationCode() {
        this.getCode();
        var that = this
        that.setData({
          disabled: true
        })
      },
    
    })

    .wxss

    .buttonget
    {  
       margin-right: 250rpx;
       110rpx;
       height:55rpx;
       color: #20B6C5;
       line-height: 50rpx;
       font-size: 25rpx;
       border:1rpx solid #20B6C5;
    }
    
    /*隐藏Button按钮本身的边框*/
    
    button[class="buttonget"]::after {
      border: 0;
    } 
  • 相关阅读:
    OC基础框架
    协议代理
    内存管理
    重写init或自定义init方法
    iOS输入框UITextField输入限制
    iOS 打包FrameWork
    iOS 持续往文件写入数据。
    ld: library not found for -lxxx 问题的解决办法
    iOS 侧滑返回过程中导航栏的黑色问题解决办法
    iOS 蓝牙分包发送数据
  • 原文地址:https://www.cnblogs.com/Early-Bird/p/8184193.html
Copyright © 2011-2022 走看看