JavaScript實現(xiàn)淘寶京東6位數(shù)字支付密碼效果

<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節(jié)點
     */
    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";
    })
    /**
     * 隱藏的輸入框輸入值的事件
     * 判斷輸入的值中是否都是數(shù)字
     * 如果都是數(shù)字，截取最前面6位數(shù)字
     * 如果不全是數(shù)字，將輸入框中的值設(shè)置空
     * 遍歷dot點，將和輸入框內(nèi)值的長度一致的dot個數(shù)顯示出來
     *
     */
    dom.$input_mima.addEventListener("input",function(){
      var mima ;
      //正則判斷輸入的值是否全是數(shù)字
      if(/^[0-9]*$/.test(this.value)){
        mima = this.value.substring(0,6); //截取輸入框中值的前6個字符
        this.value = mima;         //將輸入框中的值設(shè)置位截取到的值
      }else{
        mima = "";
        this.value = mima;         //將輸入框的值設(shè)置位空
      }
      //遍歷圓點dot，將index小于密碼長度的圓點顯示出來。這里我是用的mui框架的遍歷方法，如果你用的不是mui框架，可以換成其他的方式遍歷，下面有一個原生JS的循環(huán)方法
      mui(".dot").each(function(index){
        if(index < mima.length){
          this.style.display = "block";
        }else{
          this.style.display = "none";
        }
      })
      //原生的循環(huán)方法 - ，-
      // 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";
      //   }
      // }

      //輸入的密碼達(dá)到6位之后判斷密碼是否正確，這邊模擬了一下正確密碼是123456的情況
      //密碼正確之后進行你想要的操作
      //如果不希望輸入的密碼字符達(dá)到6位后自動進行業(yè)務(wù)邏輯的代碼，這部分可以不寫，將你的業(yè)務(wù)邏輯綁定到別的節(jié)點
      if(mima.length >=6){
        //TODO 這里寫業(yè)務(wù)邏輯代碼
        //模擬密碼
        if(mima == "123456"){
          //TODO 這里寫業(yè)務(wù)邏輯代碼
        }

      }
})