写了一个密码输入框【pc】

发布时间:2024-06-18 17:01

主要思路:

  • 使用 input 用于输入,宽高刚好等于六个密码框就行
  • 使用六个 div 用于展示输入的密码使用 * 号代替也可
  • 每个密码块里写一个用于展示提示符的 div 根据 place 匹配提示符应该出现的格子
  • input 的层级需要高于六个密码展示块,设置 opacity: 0; 把 input 隐藏起来,这样用户就看不到 input 框,点击密码块的时候其实是点击的 input 框进行输入
  • 密码块遍历密码数组做对应的展示就行

代码如下:





效果图:
写了一个密码输入框【pc】_第1张图片

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号