JavaScript实现淘宝京东6位数字支付密码效果

<div class="input-ps">
 <div class="input-ps-item">
 <span class="dot"></span> //小圆点
 </div>
 <div class="input-ps-item">
 <span class="dot"></span>
 </div>
 <div class="input-ps-item">
 <span class="dot"></span>
 </div>
 <div class="input-ps-item">
 <span class="dot"></span>
 </div>
 <div class="input-ps-item">
 <span class="dot"></span>
 </div>
 <div class="input-ps-item last">
 <span class="dot"></span>
 </div>
 <input id="input-mima" class="input-mima" type="text"/>
</div>

.input-ps{
 position: relative;
 display: flex;
 align-items: center;
 width: 8.28125rem;
 height: 1.375rem;
 margin: 0 auto;
 border: 1px solid #d9d9d9;
 border-radius: 0.1875rem;
 background-color: #fff;
}
.input-ps-item{
 display: flex;
 justify-content: space-around;
 align-items: center;
 flex: 1;
 height: 0.78125rem;
 border-right: 1px solid #d9d9d9;
}
.last{
 border: none;
}
.dot{
 display: none;
 width: 0.234375rem;
 height: 0.234375rem;
 border-radius: 0.234375rem;
 background-color: #363e49;
}
.input-mima{
 position: absolute;
 left: 0;
 top: 0;
 height: 1.375rem !important;
 color: transparent;
 opacity: 0;
}

/**
 * 获取dom节点
 */
 var dom = {
 $input_mima : document.getElementById("input-mima") //隐藏起来的密码输入框
 }

 /**
 * 隐藏的密码输入框获得焦点事件
 * 输入框获得焦点后，将输入框的定位定到屏幕看不见的位置
 */
 dom.$input_mima.addEventListener("focus",function(){
 this.style.top = "-10000px";
 })
 /**
 * 隐藏的密码输入框失去焦点事件
 * 输入框失去焦点后，将输入框的定位定原来的位置
 */
 dom.$input_mima.addEventListener("blur",function(){
 this.style.top = "0";
 })
 /**
 * 隐藏的输入框输入值的事件
 * 判断输入的值中是否都是数字
 * 如果都是数字，截取最前面6位数字
 * 如果不全是数字，将输入框中的值设置空
 * 遍历dot点，将和输入框内值的长度一致的dot个数显示出来
 *
 */
 dom.$input_mima.addEventListener("input",function(){
 var mima ;
 //正则判断输入的值是否全是数字
 if(/^[0-9]*$/.test(this.value)){
 mima = this.value.substring(0,6); //截取输入框中值的前6个字符
 this.value = mima; //将输入框中的值设置位截取到的值
 }else{
 mima = "";
 this.value = mima; //将输入框的值设置位空
 }
 //遍历圆点dot，将index小于密码长度的圆点显示出来。这里我是用的mui框架的遍历方法，如果你用的不是mui框架，可以换成其他的方式遍历，下面有一个原生JS的循环方法
 mui(".dot").each(function(index){
 if(index < mima.length){
 this.style.display = "block";
 }else{
 this.style.display = "none";
 }
 })
 //原生的循环方法 - ，-
 // var dot_list = document.getElementsByClassName("dot");
 // for(var index =0;index<dot_list.length;index++){
 // if(index < mima.length){
 // dot_list[index].style.display = "block";
 // }else{
 // dot_list[index].style.display = "none";
 // }
 // }

 //输入的密码达到6位之后判断密码是否正确，这边模拟了一下正确密码是123456的情况
 //密码正确之后进行你想要的操作
 //如果不希望输入的密码字符达到6位后自动进行业务逻辑的代码，这部分可以不写，将你的业务逻辑绑定到别的节点
 if(mima.length >=6){
 //TODO 这里写业务逻辑代码
 //模拟密码
 if(mima == "123456"){
 //TODO 这里写业务逻辑代码
 }

 }
})