微信小程序---实现输入手机验证码功能

*** html部分

输入短信验证码

</view>

已向<text class="phone">139****9999</text>发送验证码

</view>

</view>

<view class="regain" hover-class="btn-hover" wx:if="{{isRegain}}" bindtap="regain">重新获取验证码</view>

<text class="time">{{time}}</text>后可重新获取短信

</view>

*** css部分

page{

width: 100%;

height: 100%;

overflow: hidden;

}

.container{

padding-top: 260rpx;

width: 100%;

height: 100%;

background-color: #fafafa;

}

.container .main-title{

font-size: 40rpx;

color: #333;

text-align: center;

font-weight: bold;

margin-bottom: 20rpx;

}

.container .sub-title{

font-size: 30rpx;

color: #666;

text-align: center;

}

.container .sub-title .phone{

font-size: 30rpx;

color: #333;

font-weight: bold;

}

.container .code-box{

width: 510rpx;

height: 80rpx;

margin-left: auto;

margin-right: auto;

display: flex;

justify-content: space-between;

margin-top: 80rpx;

}

.container .code-box .input-box{

height: 80rpx;

width: 72rpx;

box-sizing: border-box;

border: solid 1rpx #d7d7d7;

text-align: center;

line-height: 80rpx;

color: #333;

font-size: 34rpx;

}

.container .code-box .active{

height: 80rpx;

width: 72rpx;

box-sizing: border-box;

border: solid 1rpx #d7d7d7;

text-align: center;

line-height: 80rpx;

color: #333;

font-size: 34rpx;

border-color: #3399cc;

}

.container .input-number{

opacity: 0;

position: absolute;

z-index: -1;

height: 0rpx;

width: 0rpx;

}

.container .time-box{

margin-top: 150rpx;

text-align: center;

font-size: 30rpx;

}

.container .time-box .regain{

color: #3399cc;

}

.container .time-box .regain-info{

color: #b5b5b5;

}

*** js部分

data: {

isFocus:true,

code: "",

isRegain:false,

timer:null,

time:20,

/* 生命周期函数--监听页面加载 */

onLoad: function (options) {

this.countdown();

regain(){

this.setData({

isRegain: false,

});

this.countdown();

getFocus(){

this.setData({

isFocus: true,

});

getCode(e){

console.log(e)

this.setData({

code: e.detail.value

});

countdown(){

var currentTime = this.data.time

let timer=setInterval(()=>{

currentTime--;

this.setData({

time: currentTime

})

if (currentTime <= 0) {

clearInterval(timer)

this.setData({

time: 20,

isRegain:true,

})

}

},1000)

})

微信小程序---实现输入手机验证码功能相关推荐

获取微信通讯录php,微信小程序实现添加手机联系人功能实现方法
本文主要介绍了微信小程序实现添加手机联系人功能,结合实例形式分析了微信小程序添加联系人的具体步骤,包括布局与逻辑实现技巧,需要的朋友可以参考下,希望能帮助到大家. 本文实例讲述了微信小程序实现添加手机 ...
微信小程序调用安卓手机系统指纹实现登录功能
index.js 中添加以下代码: Page({data: {hasLogin: false},onLoad: function () {const _this = thiswx.checkIsSup ...
微信小程序的搜索和重置功能
微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...
微信小程序：升级版手机检测微信工具小程序源码
这是一款升级版检测工具自动检测手机真伪,序列号等等另外还可以给手机检测各项功能是否正常由于能检测的项目太多,所以大家到时候自行研究吧小编就不多做介绍另外支持多做流量主模式,比如激励视频,ba ...
历时八个月的uniapp微信小程序上传手机内部文件
背景 2021.4 党建助手党建助手项目涉及调取手机内部文件进行上传经自己努力--未果经一位老学长和一位学长帮助-- 未果最后无奈舍弃(因为我大三课程又多又难+菜),解决方案是只适配H5,因 ...
微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能效果图: 实现过程: 一.wxml布局这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
基于微信小程序的用户列表点赞功能
代码地址如下: http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4. ...
怎么实现微信小程序云开发拼团功能？
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 [微 ...

微信小程序---实现输入手机验证码功能

微信小程序---实现输入手机验证码功能相关推荐

最新文章

热门文章