专栏首页娱乐心理测试小程序验证码倒计时

小程序验证码倒计时

现在好多小程序都没有用到手机号的登录,因为可以直接调用微信的接口,getPhoneNumber,因为我们为了保持公众号,小程序,app后台的一致性,,又做了手机号的登录。

问题:

  1. 简单描述一下功能:输入手机号,点击获取验证码。我必须在点击那个获取验证按钮之前,在js中获取手机号。
  2. 如何获取到input提交之前的输入值呢? 3.小程序的收取短信的倒计时方法? 解决方法: 微信对input的组件,提供了多个事件,看来只能通过这些事件去实现 单个input的值的获取。bindblur ,失去焦点事件,e.detail.value取的这个对象的值

js代码:

//page中添加属性(事件)
mobileInputEvent:function(e){
    this.setData({
      mobile:e.detail.value
    })
 },
verifyCodeEvent:function(e){
    if(this.data.buttonDisable) return false;
    var that = this;
    var c = 60;
    var intervalId = setInterval(function(){
      c = c-1;
      that.setData({
        verifyCodeTime:c + 's后重发',
        buttonDisable:true
      })
      if(c==0){
        clearInterval(intervalId);
        that.setData({
          verifyCodeTime:'获取验证码',
          buttonDisable:false
        })
      }
    },1000)
    var mobile = this.data.mobile;
    var regMobile = /^1\d{10}$/;
    if(!regMobile.test(mobile)){
        wx.showToast({
          title:'手机号有误!'
        })
        return false;
    }
    app.sendVerifyCode(function(){},mobile);//获取短信验证码接口
}

代码解释:mobileInputEvent代表输入的手机号码 verifyCodeEvent代表点击验证码倒计时方法

wxml代码:

<!--使用animation属性指定需要执行的动画  -->  
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}" > 
  <!--drawer content-->  
  <view class="drawer_title">登录</view> 
  <view class="drawer_content"> 
    <view class="top grid"> 
      <label class="title col-0">手机号码</label> 
      <input class="input_base input_h30 col-1" placeholder="请输入手机号码" value="" bindblur="mobileInputEvent" ></input> 
    </view> 
    <view class="top grid"> 
      <label class="title col-0">验证码</label> 
      <input class="input_base input_h30 col-1 code" placeholder="验证码" value="" bindblur='codeInputEvent'></input> 
      <view class="btn_code" bindtap="getCode" disabled="{{buttonDisable}}" >{{verifyCodeTime}}</view> 
    </view> 
  </view> 
  <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view> 
   <view class="btn_concel" bindtap="concel" >取消</view> 
</view>

wxss代码:

/**弹出框**/
.btn { 
  width: 80%;  
  padding: 20rpx 0;  
  border-radius: 10rpx;  
  text-align: center;  
  margin: 40rpx 10%;  
  background: #000;  
  color: #fff;  
} 
   
/*mask*/ 
.drawer_screen { 
  width: 100%;  
  height: 100%;  
  position: fixed;  
  top: 0;  
  left: 0;  
  z-index: 1000;  
  background: #000;  
  opacity: 0.5;  
  overflow: hidden;  
} 
   
/*content*/ 
.drawer_box { 
  width: 650rpx;  
  overflow: hidden;  
  position: fixed;  
  top: 50%;  
  left: 0;  
  z-index: 1001;  
  background: #FAFAFA;  
  margin: -150px 50rpx 0 50rpx;  
  border-radius: 3px;  
} 
   
.drawer_title{ 
  padding:15px;  
  font: 20px "microsoft yahei";  
  text-align: center;  
} 
.drawer_content { 
  height: 210px;  
  overflow-y: scroll; /*超出父盒子高度可滚动*/ 
} 
   
.btn_ok{ 
  padding: 10px;  
  font: 20px "microsoft yahei";  
  text-align: center;  
  border-top: 1px solid #E8E8EA;  
  color: #3CC51F;  
  float: right;
} 
.btn_concel{
  padding: 10px;  
  font: 20px "microsoft yahei";  
  text-align: center;  
  border-top: 1px solid #E8E8EA;  
  color: #3CC51F;  
  float: left; 
}   
.top{ 
    padding-top:8px;  
} 
.bottom { 
    padding-bottom:8px;  
} 
.title { 
    height: 30px;  
    line-height: 30px;  
    width: 160rpx;  
    text-align: center;  
    display: inline-block;  
    font: 300 28rpx/30px "microsoft yahei";  
} 
   
.input_base { 
    border: 2rpx solid #ccc;  
    padding-left: 10rpx;  
    margin-right: 100rpx;  
} 
.input_h30{ 
    height: 30px;  
    line-height: 30px;  
} 
.btn_code{
  background-color: gray;
  width: 180rpx;
  color: white;
  margin-left: 20rpx;
  font-size: 25rpx;
  line-height: 60rpx;
  text-align: center;
}
.input_view{ 
    font: 12px "microsoft yahei";  
    background: #fff;  
    color:#000;  
    line-height: 30px;  
} 
input { 
    font: 12px "microsoft yahei";  
    background: #fff;  
    color:#000 ;  
} 
radio{ 
    margin-right: 20px;  
} 
.grid { display: -webkit-box; display: box; } 
.col-0 {-webkit-box-flex:0;box-flex:0;} 
.col-1 {-webkit-box-flex:1;box-flex:1;} 
.fl { float: left;} 
.fr { float: right;} 

E513D9E6-27FD-43E2-8F59-56811D27AE43.png

操作的结果为:

A9BE06A2-A2C6-45B8-BCBA-6862637D2957.png

完成!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 九宫格抽奖转盘

    3.将此抽奖网址集成在APP上 因为我们的需求是转盘抽奖用h5写,然后将此网址用APP加载,APP在加载时传入Token,后台在抽奖接口中判断此人积分是否可用...

    honey缘木鱼
  • 小程序----video视频播放

    honey缘木鱼
  • vue 获取跳转上一页组件信息

    项目中有一需求,需要根据不同的页面路径url跳转进行不同的操作,首先需要获得上一页面的url,利用 beforeRouteEnter 这个钩子中的from参数获...

    honey缘木鱼
  • 小程序点击按钮弹出可填写框

    这是项目里面一个简单的效果,小程序点击按钮弹出可填写框,摘下代码,方便之后遇到的时候可以直接拿来使用。 效果如下:

    王小婷
  • 模型转代码:XGBoost等模型也能快速转纯C或Java代码

    那么转化为 Java/Python/C 源代码有什么用呢?想象一下如果我们使用 ML 框架(scikit-learn\XGBoost\LightGBM)训练了一...

    机器之心
  • vue 2.6 中 slot 的新用法

    最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清...

    前端小智@大迁世界
  • 详解Vue的slot新用法

    最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清...

    Fundebug
  • 前端一些常用的小技巧

    比如 ui 设计稿给定的输入框的占位字体样式是 #ccc;那么我们就需要修改占位字体的样式了,比如下面的 html 代码:

    公众号---人生代码
  • 让你的组件千变万化,Vue slot 剖玄析微

    Vue 代码中的 slot 是什么,简单来说就是插槽。<slot> 元素作为组件模板之中的内容分发插槽,传入内容后 <slot> 元素自身将被替换。

    政采云前端团队
  • 不是吧?DNSPod挪车码免费送?

    Hi~大家好 DNSPod的专属挪车码来了 阿D陪你文明出行! ? “特别定制,为你而生” 这款挪车码轻盈小巧,实用性极强 采用DNSPod的卡通专属人物形象...

    腾讯云DNSPod团队

扫码关注云+社区

领取腾讯云代金券