精华内容
下载资源
问答
  • 微信小程序倒计时

    2017-04-26 09:28:54
    微信小程序倒计时,点击之后开始倒计时,时间结束时还原为点击前的状态,可再次点击触发,微信小程序关注“任信了”可以体验效果。
  • 微信小程序 倒计时

    千次阅读 2017-05-27 19:42:58
    微信小程序倒计时功能 可以用于短信验证码的倒计时等 方法1. Js: function countdown(that) { var second = that.data.countdown_time if(second == 0) { console.log("001"); // console.log("Time Out..."); ...

    微信小程序倒计时功能 可以用于短信验证码的倒计时等


    方法1.  

    Js:

    function countdown(that) {
      var second = that.data.countdown_time
        if(second == 0) {
          console.log("001");
          // console.log("Time Out...");
          that.setData({
              // second: "Time Out..."
          
            showtime1: true,
            showtime2: false,
            reg_hqyzm: "重新获取",
            countdown_time:5,
          });
          console.log("002");
          return;
        }
        console.log("003");
        var time = setTimeout(function () { 
        that.setData({
          countdown_time: second - 1
        });  
        countdown(that);
      }
        , 1000)
    }
    
    
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        
        showtime1: true,
        showtime2: false,
        reg_hqyzm: "获取验证码",
        countdown_time: 5,
      
      },
    
      reg_yanzhengma_huoqu:function(){
        console.log("004");
         this.setData({
           showtime1: false,
           showtime2: true,
           
         });
         countdown(this);
        // wxTimer.start(this);
      },});

    wxml:

     <view class="reg_yanzhengma">
          <image class="img_yanzhenma" src="https://img-blog.csdn.net/20170527164756495?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"></image>
          <input class="input_reg_yanzhengma" bindconfirm="input_reg_yanzhengma" placeholder="请输入验证码" type="number"/>
          <view wx:if="{{showtime1}}" class="reg_yanzhengma_time1" bindtap="reg_yanzhengma_huoqu">
          {{reg_hqyzm}}
          </view>
          <view wx:if="{{showtime2}}" class="reg_yanzhengma_time2" >
          倒计时:{{countdown_time}}s
          </view>
          
        </view>

    wxss:

    .reg_yanzhengma{
      width: 100%;
      height:100rpx;
      margin-top: 10rpx;
      display: flex;
      background: #fff
    }
    .img_yanzhenma{
      width: 10%;
      height:60rpx;
      margin-top: 20rpx;
      margin-left: 50rpx;
    }
    
    .input_reg_yanzhengma{
       width: 55%;
       height:50rpx;
       margin-top: 20rpx;
       margin-left: 50rpx;
       font-size: 28rpx; 
    }
    .reg_yanzhengma_time1{
       width: 35%;
       height:100%;
       margin-left: 50rpx;
       font-size: 30rpx; 
       background: #0f0;
       line-height: 100rpx;
       text-align: center;
       color: #fff;
    }
    .reg_yanzhengma_time2{
       width: 35%;
       height:100%;
       margin-left: 50rpx;
       font-size: 30rpx; 
       background: #777777;
       line-height: 100rpx;
       text-align: center;
       color: #fff;
    }
    




    方法2. wxTimer 稍后再写

    展开全文
  • 微信小程序 倒计时 下载

    热门讨论 2017-01-10 00:21:42
    微信小程序 倒计时
  • 微信小程序倒计时插件wxTimer
  • 微信小程序倒计时验证码弹框
  • 主要介绍了微信小程序 倒计时组件实现代码的相关资料,需要的朋友可以参考下
  • 倒计时功能在项目开发中经常会用到,今天小编给大家介绍下微信小程序倒计时功能实现代码,需要的朋友参考下吧
  • 简单易用的微信小程序倒计时
  • 主要介绍了微信小程序倒计时功能实例代码,当单击按钮弹出一个半透明的弹出层,在规定时间内激活关闭按钮,关闭弹出层。需要的朋友可以参考下
  • 这里记录一下在微信小程序里面倒计时功能的简单实现 直接看看代码吧   //倒计时60秒 function countDown(that,count) { if (count == 0) { that.setData({ timeCountDownTop: '获取验证码', counting:false }) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 664
精华内容 265
关键字:

微信小程序倒计时

微信小程序 订阅