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

wxml文件

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

js文件

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

wxss文件

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