js仿支付宝多方框输入支付密码效果

 
支付宝支付密码：
 

 
忘记密码？
 
请输入6位数字密码
 一键获取密码
 
请输入数字！

*{
 padding: 0;
 margin: 0;
}
.content{
 width: 400px;
 height: 50px;
 margin: 0 auto;
 margin-top: 100px;

}
.title{
 font-family: '微软雅黑';
 font-size: 16px;
}
.box{
 width: 190px;
 height: 30px;
 border:1px solid #ccc;
 margin-top: 10px;
 line-height: 30px;
}
.content .box,.forget{
 display: inline-block;
}
.content .forget{
 width: 100px;
 color:lightskyblue;
 vertical-align: super;
 font-size: 14px;
}
.box input.paw{
 width: 30px;
 height: 20px;
 line-height: 20px;
 margin-left: -9px;
 border:none;
 border-right: 1px dashed #ccc;
 text-align: center;
}
.box input.paw:nth-child(1){
 margin-left: 0;
}
.content .box .pawDiv:nth-child(6) input.paw{
 border: none;
}
.content .box input.paw:focus{outline:0;}
.content .box .pawDiv{
 display: inline-block;
 line-height: 30px;
 width: 31px;
 height: 31px;
 margin-top: -2px;
 float: left;
}
.point{
 font-size: 14px;
 color: #ccc;
 margin: 5px 0;
}
.errorPoint{
 color: red;
 display: none;
}
.getPasswordBtn{
 width: 100px;
 height: 30px;
 background-color: cornflowerblue;
 font-size: 14px;
 font-family: '微软雅黑';
 color: white;
 border: none;
}

/*动态生成*/
var box=document.getElementsByClassName("box")[0];
function createDIV(num){
 for(var i=0;i=48&&event.keyCode<=57){
    /*输入0-9*/
    changeDiv();
    errorPoint.style.display="none";

   }else if(event.keyCode=="8") {
    /*退格回删事件*/
    firstDiv();

   }else if(event.keyCode=="13"){
    /*回车事件*/
    getPassword();

   }else{
    /*输入非0-9*/
    errorPoint.style.display="block";
    this.value="";
   }

  };
 }

}
func();


/*定义pawDiv点击事件*/
var pawDivClick=function(e){
 for(var i=0;i