html键盘制作,HTML手写键盘（一）

HTML手写键盘 (单密码框)

先上图

粘贴图片.png

大致原理：先用css画出整个键盘 ，并没有input框，如果使用input实现效果，则需要多个input，这样的后果是需要多次调用键盘，影响整体的体验，用ul li画出密码框效果，随着按键，对密码进行消失隐藏操作html如下：

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

点的图片请自行下载