我们在做手机登录和用户注册时，总会用到倒计时效果，今天就来给大家讲讲手机登录时验证码倒计时效果的实现。 老规矩，先看效果图 [图片] 可以看到，我们在点击获取验证码以后，就开始倒计时了，正常都是从60s倒计时的，这里为了演示方便，我从6s开始的。可以看到倒计时结束后，按钮又恢复了可以点击的状态。 一，index.wxml布局 [图片] 布局很简单，就是一个用户获取手机号输入，一个用来获取验证码输入，一个获取验证码按钮，一个登录按钮。 二，index.wxss样式 [代码].item { display: flex; flex-direction: row; margin-left: 20rpx; margin-top: 25rpx; padding-bottom: 25rpx; border-bottom: 1px solid gainsboro; } .tip { font-size: 0.5rem; color: red; } .tip2 { font-size: 0.8rem; color: black; } .btn { color: white; background: #0271c1; font-size: 0.9rem; width: 90%; margin-top: 60rpx; } .input { margin-left: 40rpx; } .input2 { width: 50%; } .plac { color: #aab2bd; font-size: 0.8rem; /* placeholder位置 *//* text-align: right; */ } /* 验证吗 */ .code { width: 160rpx; border: 1px solid #0271c1; font-size: 0.8rem; text-align: center; padding: 10rpx; position: absolute; right: 15rpx; } [代码] 样式我就不具体讲解了，重要的是下面的倒计时的js事件。 三，index.js实现倒计时效果 1，首先看下倒计时实现的部分。 [图片] 上图红框里是我们实现倒计时的核心代码，可以看到我们主要是用了setInterval 这个方法来实现每个1s的计时器。 这里我们定义一个countDownTime，初始值为6s，然后我们每隔1s，对countDownTime做减1操作，直到countDownTime的值小于2，也就是等于1时，我们用clearInterval方法取消计时器。 2，动态改变按钮文字颜色。 这里之前经常有同学问过，怎么在js里动态改变小程序组件的样式。其实小程序这点做的不如vue好，不能在js里获取到组件的实例。所以我们就要换个方式了。 [代码]<!-- 这里我们同在在wxml里写style来实现样式的动态改变 --> <text class="code" style="color:{{codeColor}};" >获取验证码</text> [代码] 这个时候我们在去看第一个，倒计时里写的下面这段代码。这里就是用来动态改变按钮上文字颜色的方法。 [代码] if (countDownTime < 2) { that.setData({ codeColor: "#0271c1", codeText: "获取验证码" }) } else { that.setData({ codeColor: "#e6252b", codeText: "60s" }) } [代码] 我们这里还有做一步处理，就是在倒计时过程中，用户不能再次点击获取验证吗的按钮，获取点击时要给用户提示。 [图片] 下面把index.js的完整代码贴出来给大家 [代码]//老师微信2501902696 let timeNum = 6 //60秒倒计时 let countDownTime = timeNum let timer; //计时器 Page({ data: { codeColor: "#0271c1", codeText: "获取验证码" }, //获取验证码 getCode() { if (countDownTime == timeNum) { this.setInterval() this.setData({ codeColor: "#e6252b", codeText: countDownTime + "s" }) } else { wx.showToast({ title: '请等待验证码', icon: "none" }) } }, // 计时器 setInterval: function() { const that = this timer = setInterval(function() { // 设置定时器 countDownTime-- if (countDownTime < 2) { clearInterval(timer) that.setData({ codeColor: "#0271c1", codeText: "获取验证码" }) countDownTime = timeNum } else { that.setData({ codeColor: "#e6252b", codeText: countDownTime + "s" }) } console.log(countDownTime + "s") }, 1000) }, }) [代码] 这样我们就能实现微信小程序在登录或者注册时实现验证码倒计时的效果了。 今天就先到这里，下一节给大家讲解手机号的校验，和验证码的随机生成。还有短信验证码的发送都会在后面的文章做讲解。敬请关注。

背景： 因为公司业务调整需要做用户支付这一块 开发者需要在小程序上实现一个简单的6位数密码输入框 [图片] 首先想下如何实现该效果： 1.使用input覆盖在框上面，设置letter-spacing达到数字之间间距的效果，实现时发现在input组件上使用letter-spacing无效果 2.循环六个view模拟的框，光标使用动画模拟，一个隐藏的input，点击view框时触发input的Focus属性弹起键盘，同时模拟的光标展示出来，输入值后，input的value长度发生变化，设置光标位置以及模拟的密码小黑圆点 好了，废话不多数，咱们直接上手。 wxml [代码]<view class='container'> <!-- 模拟输入框 --> <view class='pay-box {{focusType ? "focus-border" : ""}}' bindtap="handleFocus" style='width: 604rpx;height: 98rpx'> <block wx:for="{{boxList}}" wx:key="{{index}}"> <view class='password-box {{index === 0 ? "b-l-n":""}}'> <view wx:if="{{(dataLength === item - 1)&& focusType}}" class="cursor"></view> <view wx:if="{{dataLength >= item}}" class="input-black-dot"></view> </view> </block> </view> <!-- 隐藏input框 --> <input value="{{input_value}}" focus="{{isFocus}}" maxlength="6" type="number" class='hidden-input' bindinput="handleSetData" bindfocus="handleUseFocus" bindblur="handleUseFocus" /> </view> [代码] wxss [代码]/* 第一个格子输入框 */ .container .b-l-n { border-left: none; } .pay-box { margin: 0 auto; display: flex; flex-direction: row; border-left: 1px solid #cfd4d3; } /* 支付密码框聚焦的时候 */ .focus-border { border-color: #0c8; } /* 单个格式样式（聚焦的时候） */ .password-box { flex: 1; border: 1px solid #0c8; margin-right: 10rpx; display: flex; align-items: center; justify-content: center; } /* 模拟光标 */ .cursor { width: 2rpx; height: 36rpx; background-color: #0c8; animation: focus 1.2s infinite; } /* 光标动画 */ @keyframes focus { from { opacity: 1; } to { opacity: 0; } } /* 模拟输入的password的黑点 */ .input-black-dot { width: 20rpx; height: 20rpx; background-color: #000; border-radius: 50%; } /* 输入框 */ .hidden-input { margin-top: 200rpx; position: relative; } [代码] JS [代码]Component({ data: { //输入框聚焦状态 isFocus: false, //输入框聚焦样式 是否自动获取焦点 focusType: true, valueData: '', //输入的值 dataLength: '', boxList: [1, 2, 3, 4, 5, 6] }, // 组件属性 properties: { }, // 组件方法 methods: { // 获得焦点时 handleUseFocus() { this.setData({ focusType: true }) }, // 失去焦点时 handleUseBlur() { this.setData({ focusType: false }) }, // 点击6个框聚焦 handleFocus() { this.setData({ isFocus: true }) }, // 获取输入框的值 handleSetData(e) { // 更新数据 this.setData({ dataLength: e.detail.value.length, valueData: e.detail.value }) // 当输入框的值等于6时（发起支付等...） if (e.detail.value.length === 6) { // 通知用户输入数字达到6位数可以发送接口校验密码是否正确 this.triggerEvent('initData', e.detail.value) } } } }) [代码] 实现方式很简单，有点小问题，还有一些后续准备做的优化点，等完善后上线后再来修改一波。 最后附上代码片段： https://developers.weixin.qq.com/s/8CtRqJmT7W8k