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 这里写业务逻辑代码        }      }})