小程序---实现注册页倒计时

js代码

//index.js

//获取应用实例

var interval = null //倒计时函数


Page({
    data: {
        hidden: true,
        btnValue:'',
        btnDisabled:false,
        name: '',
        phone: '',
        code: '',
        captchaLabel: '获取验证码',
        captchaDisabled: false,
        currentTime:61,
    },
    onLoad: function () {

    },




    //输入手机号
    bindPhoneInput:function(e)
    {
            this.setData({
                phone: e.detail.value
            })
    },
  
    captcha: function(e) {
        var that = this;
        var currentTime = that.data.currentTime
        console.log(currentTime);
         interval = setInterval(function () {
            currentTime--;
            that.setData({
                captchaLabel: '已发送('+currentTime+'s)'
            })
            if (currentTime <= 0) {
                clearInterval(interval)
                that.setData({
                    captchaLabel: '重新发送',
                    currentTime:61,
                    disabled: false
                })
            }
        }, 1000)

        //向该手机发送验证码
        //获取手机号
        wx.request({
            url: 'http://www.dirverjl.com/api/sendSms',
            data: {
                phone: this.data.phone,
            },
            method: 'POST',
            header: {
                'content-type': 'application/json' //默认值
            },
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log("失败");
            },
        })

    },


    save:function()
    {
        //发送手机号及验证码到后台
        wx.request({
            url:'http://www.dirverjl.com/api/test',
            data:{
                phone: this.data.phone,
                code: this.data.code,
            },
            method:'POST',
            header: {
                'content-type': 'application/json' //默认值
            },
            success:function(res){
                //返回的结果
                console.log(res.data.data);
                //全局存储 用户基本
                //app.info=res.data.data;
                console.log(res.data.data);
                var teachers={
                    jlid:res.data.data.jlid,
                    intro:res.data.data.intro,
                    mphone:res.data.data.mphone,
                    name:res.data.data.name,
                    xycount:res.data.data.xycount,
                    rank:res.data.data.rank,
                    viewnum:res.data.data.viewnum,
                    praisenum:res.data.data.praisenum,
                    schoolname:res.data.data.schoolname,
                    basename:res.data.data.basename,
                    address: res.data.data.address,
                    baselogo:res.data.data.baselogo,


                };
                wx.setStorage({
                    key:'teachers',
                    data:teachers
                })
                //跳转到名片页
                wx.switchTab({
                    //本地存储

                    url:'../index/index',

                })
            },
            fail:function(res){
                console.log(res);
            }

        })
    },




})

wxml文件

<!--register.wxml-->

<view class='imagesize'>
<image src="/images/image/[email protected]">
</image>
</view>

<view class='form'>
<view class='row'>
<view class='icon'><image src="/images/image/[email protected]"></image></view>
<view class='text'>
<input placeholder='请输入手机号' placeholder-class='phcol' bindinput='bindPhoneInput'/>
</view>
</view>
<view class='row'>
<view class='icon'><image src="/images/image/[email protected]"></image></view>
<view class='text wid2'>
<input placeholder='输入验证码' placeholder-class='phcol' bindinput='bindCodeInput' />
</view>
<view class='codeBtn' bindtap='captcha' ><text class="code-word">{{captchaLabel}}</text></view>
<!--<view class='codeBtn btnGray' bindtap='getCode'><text class="code-word">重新获取 | 56s</text></view>-->
</view>
</view>
<view class='save' bindtap='save' >登录</view>

wxss文件

/**index.wxss**/
page{
height: 100%;
width: 100%;
background: #F7F7F7;
display: flex;
flex-direction: column;
}

.imagesize{
display:flex;
justify-content: center;
margin-top:100rpx;
margin-bottom:84rpx;
}
.imagesize image {
width:516rpx;
height:134rpx;
}

.form { padding: 0 46rpx;}
.row {
display: flex;
align-items: center;
padding: 0 24rpx 0 40rpx;
margin: 0 0 20rpx 0;
height: 112rpx;
border: 1px solid rgba(224,224,224,1);
border-radius: 60rpx;
background: #FFF;
position: relative;
}
.row .icon { width: 40rpx; height: 40rpx; margin-right: 16rpx;}
.row .icon image { width: 40rpx; height: 40rpx;}
.row .text { width: 500rpx; height: 60rpx;}
.row .text input { font-size: 36rpx;}
.row .text .phcol { color: #E0E0E0;}
.row .wid2 { width: 330rpx;}
.codeBtn { width: 200rpx; height: 62rpx; background: #2A5E92; color: #FFF; border-radius: 35rpx; text-align: center; font-size: 26rpx; line-height: 62rpx;}
.btnGray { background: #9B9B9B;}
.save{
width:658rpx;
height:98rpx;
background:rgba(42,94,146,1);
border-radius:60rpx;
text-align: center;
line-height:49px;
font-family:PingFangSC-Regular;
color: #FFF;
margin: 48rpx auto 0 auto;
}

 效果图