admin管理员组

文章数量:1633991

HTML手写键盘 (单密码框)

先上图

粘贴图片.png

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

输入支付密码

  • ![](img/dian.png)
  • ![](img/dian.png)
  • ![](img/dian.png)
  • ![](img/dian.png)
  • ![](img/dian.png)
  • ![](img/dian.png)

忘记密码？

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 取消
  • 0
  • ![](img/tuige.png)

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语言怎么办到直接手写,HTML手写键盘（一） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729186491a1189089.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。