直播系统搭建，登录时点击获取短信验证码

直播系统搭建，登录时点击获取短信验证码

wxml文件

 

<view class="codeBox">
  <!-- input框 -->
  <view>
    <input placeholder="请输入验证码" />
  </view>
  <!-- 获取验证码按钮 -->
  <view>
    <text data-id="2" bindtap="getVerificationCode">{{contantTxt}}</text>
  </view>
</view>

​

js文件

 

var app = getApp(); //获取应用实例
var countDown = null; //自定义一个倒计时的函数
Page({
  data: {
    contantTxt: '获取验证码', //按钮中展示的内容
    countTime: 5, //倒计时的时间
  },
  // 按钮事件
  getVerificationCode() {
    var that = this; //防止this指向问题
    var countTime = that.data.countTime
    // setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，简单来说就是定时执行
    countDown = setInterval(function () {
      countTime--; // 倒计时开始递减
      // 更新按钮中的显示内容
      that.setData({
        contantTxt: countTime + ' 秒'
      })
      // 如果倒计时时间小于或者等于0，也就是倒计时结束，显示 “重新发送” 字样
      if (countTime <= 0) {
        clearInterval(countDown); //停止执行countDown函数
        // 更新按钮中的显示内容
        that.setData({
          contantTxt: '重新发送',
          countTime: 5,
        })
      }
    }, 1000)
  }
})

 

 

wxss文件

 

.codeBox {
  /* 最外层的盒子 */
  margin: 50rpx;
  display: flex;
  align-items: center;
  font-size: 12px;
}
.codeBox view:first-child {
  /* input框外层盒子的样式 */
  width: 70%;
}
.codeBox view:last-child {
  /* 按钮外层盒子的样式 */
  width: 30%;
  box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
  border: 1px solid rgb(196, 210, 236);
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 60rpx;
  border-bottom-right-radius: 60rpx;
  color: rgb(0, 157, 255);
}
input {
  /* input框本身的样式 */
  border: 1px solid rgb(196, 210, 236);
  opacity: 0.8;
  box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
  background: #ffffff;
  padding-left: 20rpx;
  height: 80rpx;
  border-top-left-radius: 60rpx;
  border-bottom-left-radius: 60rpx;
}
button {
  /* 按钮本身的样式 */
  background: none;
  width: 150rpx;
  height: 150rpx;
  display: flex;
  justify-content: center;
}
button::after {
  /* 去掉按钮点击自带的效果 */
  border: none;
}
button:hover {
  /* 去掉按钮触摸自带的效果 */
  background: none;
}

 

以上就是 直播系统搭建，登录时点击获取短信验证码，更多内容欢迎关注之后的文章