html

    
     
          
     
     
          
          
          
     
      请输入数字！
     
 
    

 

 

js

 

/*222动态生成*/ 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
    

 

css

 

*{
      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,.content .pwdBox{
      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; }