html语言怎么办到直接手写,HTML手写键盘（一）
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手写键盘（一）相关推荐
- html语言怎么办到直接手写,4、手写HTML语言代码之《文字处理》
千里之堤始于足下!! 学习网页制作的心得体会4.........手写HTML语言代码之<文字处理> 一. 和(居中对齐) 下面网页 我的第一个网页 教师自制教学软件的背景 随着教育体制的改 ...
- 手写数字识别c语言作业,10 行代码，实现手写数字识别
识别手写的阿拉伯数字,对于人类来说十分简单,但是对于程序来说还是有些复杂的. 不过随着机器学习技术的普及,使用10几行代码,实现一个能够识别手写数字的程序,并不是一件难事.这是因为有太多的机器学习模型 ...
- c语言用单链表实现lru算法,手写单链表实现和LRU算法模拟
手写单链表,实现增删改查 package top.zcwfeng.java.arithmetic.lru; //单链表 public class LinkedList { Node list; int ...
- uniapp手写_手写签名
前言: 简单的手写签名 参考 https://www.auiaa.com/fron/uni/2019-03-17/103.html 的例子,进行了修改 主要代码 @touchcancel='cance ...
- 手写java_手写java锁
手写非公平可重入锁 公平锁:多个线程按照申请锁的顺序去获得锁,线程会直接进入队列去排队,永远都是队列的第一位才能得到锁. 优点:所有的线程都能得到资源,不会饿死在队列中. 缺点:吞吐量会下降很多,队列 ...
- 方法 手写promise_手写Promise类
手写简单promise 1.分析promise核心逻辑 先看一段代码 let p = new Promise(); //说明Promise是一个类(class),需要new实例化 let p = ne ...
- canvas 涂鸦画板，支持笔写、手写、鼠标绘图
预览效果 实现了 PC 端, 移动端的手写,笔写,鼠标绘图 已知问题: 笔写需要移动端的触屏笔才能触发,基于pointerType判断,可能存在笔或系统被改过部分浏览器无法识别为笔,从而笔触发poin ...
- python笔记手写_手写笔记的压缩与增强
Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. 我写了一个程序来清洁手写笔记的扫描图,并同时减少文件大小. 示例输入输出: 左边: 300 DPI, 7. ...
- 苹果键盘怎么手写_手写笔的魅力
请点击文末右下角"",移步官网获取更好阅读体验! 欢迎加入Augix官方QQ群:595698697. 喜讯!Augix已开通微博,请搜索关注:Augix频道. B站视频更新频道也已 ...
最新文章
- python 函数练习集锦
- Redis配置主从数据，实现主从库之间数据同步
- XML数据读取方式性能比较（一）
- how does Fiori Mock server serve OData request with 202
- Android四大组件之——Activity的生命周期（图文详解）
- Apache2.4 与 PHP 5.5 64位版的安装配置
- 输入三科成绩 C语言,C语言题，对我的程序找错修改。输入10个学生学号，三科成绩，求总成绩和平均分，并按成绩由高到低输出...
- powermock私有字段_使用PowerMock的EasyMock私有方法模拟
- ODAC的tnsnames.ora文件
- 重庆人文科技学院计算机学院院长,我校计算机工程学院成立大会圆满闭幕
- 445、Java框架99 -【MyBatis - 多对多】 2020.12.23
- [人工智能-深度学习-14]：神经网络基础 - 常见loss损失函数之逻辑分类，对数函数，交叉熵函数
- 天创速盈带你了解拼多多新店运营技巧
- BCB(C++ Builder)创建动态库(DLL,接口导出和调用)，动态加载DLL
- 中国平安增持华夏幸福5.69%股权 看好长期战略协同
- java后台发送post请求 MultipartFile、json
- 【Laravel笔记】16. Cookie和Session
- 多角度3d模型旋转算法
- 飞行机器人（三）DJI平台OSDK ROS 编译及使用
- win7 64bit共享XP M1005打印机