js 验证支付密码 6位数字不能相同 不能顺序和逆序

JavaScript030

js 验证支付密码 6位数字不能相同 不能顺序和逆序,第1张

思路 ,[0,0,0,0,0,0] [1,2,3,4,5,6] [6,5,4,3,2,1] 都是等差数列 就是判断是否为等差数列

1. 原数组 去重 正序排列

2.递归 获取等差值

3.等差值 去重 

4.判断等差值(去重后数组长度分3种情况 0:相同数子, 1:顺序或逆序 ,其他:正确)

let arr = [9,1,7,6,5,4]

class verifications {

constructor() {

this.val = []

}

// 正序排列 去重

    _init(val) {

this.val = this.DuplicateRemoval(val.sort(function (a,b) {

return a - b

}))

}

handle(val) {

this._init(val)

let newVal = this.DuplicateRemoval(this._filters(this.val))

if (newVal.length !== 0 &&newVal.length !== 1) {

return true

        }else {

return false

        }

}

// 递归处理等差数列

    _filters(val,newVal = [],index = 0) {

if (index <= val.length - 2) {

newVal.push(val[index + 1]- val[index])

index++

            this._filters(val,newVal,index)

}

return newVal

    }

// 去重

DuplicateRemoval(val) {

return Array.from(new Set(val))

}

}

let p = new verifications()

console.log(p.handle(arr))

那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签

现在很多时候大家付款的场景都是在手机上面,而随着H5页面的开发变得越来越方便,很多场景也从客户端搬到了浏览器中,其中支付这个场景就很自然的被放在了浏览器中。那么这样的输入框大家一定不会陌生吧:

那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签。

并且给这个5个input设置display: inline-block 属性,同时用<!- ->来消除元素直接的margin值,那么HTML就是如下的样子:

<div class="input"><input type="tel" placeholder="随" maxlength=""><!--><input type="tel" placeholder="机" maxlength=""><!--><input type="tel" placeholder="" maxlength=""><!--><input type="tel" placeholder="位" maxlength=""><!--><input type="tel" placeholder="数" maxlength=""></div>

在代码中我们需要设置最多输入的位数,不然就不像了嘛~当然为了在移动端输入的时候能唤起数字键盘来,我们也需要设置type="tel"。那么接下来就是CSS样式的代码了,这里我就简单的贴出一些代码,具体高仿的像不像其实就是这里了~

input {display: inline-block&:last-child {border-right: px solid #}input {border-top: px solid #border-bottom: px solid #border-left: px solid #width: pxheight: pxoutline:nonefont-family: inheritfont-size: pxfont-weight: inherittext-align: centerline-height: pxcolor: #cccbackground: rgba(,,,)}}

那么接下来就是最关键的JavaScript部分了,

/*** 模拟支付宝的密码输入形式*/(function (window, document) {var active = ,inputBtn = document.querySelectorAll('input')for (var i = i <inputBtn.lengthi++) {inputBtn[i].addEventListener('click', function () {inputBtn[active].focus()}, false)inputBtn[i].addEventListener('focus', function () {this.addEventListener('keyup', listenKeyUp, false)}, false)inputBtn[i].addEventListener('blur', function () {this.removeEventListener('keyup', listenKeyUp, false)}, false)}/*** 监听键盘的敲击事件*/function listenKeyUp() {var beginBtn = document.querySelector('#beginBtn')if (!isNaN(this.value) &&this.value.length != ) {if (active <) {active += }inputBtn[active].focus()} else if (this.value.length == ) {if (active >) {active -= }inputBtn[active].focus()}if (active >= ) {var _value = inputBtn[active].valueif (beginBtn.className == 'begin-no' &&!isNaN(_value) &&_value.length != ) {beginBtn.className = 'begin'beginBtn.addEventListener('click', function () {calculate.begin()}, false)}} else {if (beginBtn.className == 'begin') {beginBtn.className = 'begin-no'}}}})(window, document)

首先我们对最外层的div进行监听,当发现用户选择div的时候就将input的焦点设置到active上面去,而这个active则是一个计数器,默认的时候是第一位的,也就是0,而当我们输入了正确的数字后将会增加一个active,这样input的焦点就会向后移动了,这样就完成了输入一个向后移动一位的功能了,而同时我们监听键盘上的退格键,当用户点击了退格键之后就对active减一,这样输入框的焦点也就向前移动了,当然,当input失去焦点的时候我们也同时移除绑定在上面的监听事件,这样就不会造成多次触发的问题了。

最近在做一个移动的页面需求,这个里面需要支付付款,那么就要用到密码。而这个密码又要有要有一个动画,这个时候我们就要把数组中6位数字传化成一个数字。这个数字就password然后把密码传入到后端的服务器去判断是否密码正确,从而达到支付成功。

具体实现过程如下。

具体步骤是:

第一步,把数字数组用tostring()方法转换成字符串数组,在打印台打印后,我们发现有逗号间隔,这个时候我们就要想到去除逗号。

第二步,去除逗号,我们就会联想到用空字符串替换,这个时候有挤幼用到正则表达式。

第三步,把数字字符串转化成数字,只需要用到类型转换就可以了。

成功后,我们就可以进入支付成功页面。