HTML手寫鍵盤 (單密碼框)
先上圖
大致原理：先用css畫出整個鍵盤 ，并沒有input框儒鹿，如果使用input實(shí)現(xiàn)效果化撕，則需要多個input，這樣的后果是需要多次調(diào)用鍵盤挺身，影響整體的體驗(yàn)侯谁，用ul li畫出密碼框效果，隨著按鍵章钾，對密碼進(jìn)行消失隱藏操作html如下：
<div class="keyBoard keyBoard1"> <p>輸入支付密碼</p> <div class="psd" id="firstPsd"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="keyBoardNum keyBoardNum1"> <p ng-click="goTo('/sendCode')">忘記密碼墙贱？</p> <ul class="keyBoardUl"> <li class="number number1"><a href="">1</a></li> <li class="number number1"><a href="">2</a></li> <li class="number number1"><a href="">3</a></li> <li class="number number1"><a href="">4</a></li> <li class="number number1"><a href="">5</a></li> <li class="number number1"><a href="">6</a></li> <li class="number number1"><a href="">7</a></li> <li class="number number1"><a href="">8</a></li> <li class="number number1"><a href="">9</a></li> <li class="cancelNum" style="color: #666;background: #f7f7f7;font-size: 0.4rem">取消</li> <li class="number number1"><a href="">0</a></li> <li id="del1" style="background: #f7f7f7"></li> </ul> </div> </div>
js部分：首先定義一個變量用來存放顯示隱藏的密碼圖片的下標(biāo)，定義數(shù)組是為了存放密碼贱傀，
點(diǎn)擊數(shù)字 i 為密碼框下標(biāo)惨撇，下標(biāo)從0開始，將獲取到的點(diǎn)擊的數(shù)字放在數(shù)組中府寒，同時根據(jù)下標(biāo)來顯示隱藏密碼
當(dāng)i 為6時魁衙，將數(shù)組拼接成一個6為密碼的字符串
點(diǎn)擊刪除圖標(biāo)，刪除數(shù)組最后一位株搔，并且隱藏密碼圖標(biāo)剖淀。
var i=0; arr=[] $('.number1').click(function (){ if (i>=0&&i<=5) { arr.push(($(this)[0].innerText)) $('.mima1').eq(i).css('display','block') i++; } if (i==6) { var str=arr.join('') console.log('密碼：'+str) } }) $('#del1').click(function (){ if (i>0&&i<=6) { arr.pop(); i--; $('.mima1').css('display','none') for (var j = i-1; j >= 0; j--) { $('.mima1').eq(j).css('display','block') } } })
效果圖
點(diǎn)的圖片請自行下載
