HTML手寫鍵盤 (單密碼框)

先上圖

粘貼圖片.png

大致原理：先用css畫出整個鍵盤 ，并沒有input框，如果使用input實現效果，則需要多個input，這樣的后果是需要多次調用鍵盤，影響整體的體驗，用ul li畫出密碼框效果，隨著按鍵，對密碼進行消失隱藏操作html如下：

輸入支付密碼

• 
• 
• 
• 
• 
• 

忘記密碼？

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 取消
• 0
• 

js部分：首先定義一個變量用來存放顯示隱藏的密碼圖片的下標，定義數組是為了存放密碼，

點擊數字 i 為密碼框下標，下標從0開始，將獲取到的點擊的數字放在數組中，同時根據下標來顯示隱藏密碼

當i 為6時，將數組拼接成一個6為密碼的字符串

點擊刪除圖標，刪除數組最后一位，并且隱藏密碼圖標。

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') } } })

效果圖

粘貼圖片.png

點的圖片請自行下載

總結

以上是生活随笔為你收集整理的html键盘制作,HTML手写键盘（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。