基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)

前端之家收集整理的这篇文章主要介绍了基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近做微信端的页面遇到了一个之前没有遇到过的一个页面,刚开始放在那没有去写,可是等其他页面都写好的时候,还是得回过头来研究这个页面问题,刚开始我请教了公司的移动研发,从他那里得到启发,最终实现了这个效果,先把效果图展示出来给大家看看

效果图:

输入验证码

粘贴图片输入完毕

下面就把实现过程奉献给大家

第一步:编写HTML代码

Box">
Box">
Box">
Box">
Box">
Box">
Box">

第二步:给代码添加样式

Box{ position: relative; width: 240px; height: 40px; margin: 50px auto 0; } .pass-line{ margin:0 auto; width:100%; height:100%; } .line-Box{ float: left; width: 40px; height: 40px; } .line{ display: block; width: 25px; height:3px; margin:18px auto 0; background: #000; } .passInput{ position: absolute; width:240px; height:40px; left: 0; top: 0; } .inputCont{ float: left; width: 25px; height:40px; margin:0 7.5px; z-index: 2; font-size:30px; color:#333; line-height: 40px; text-align: center; background: none; }

第三步:编写js代码

以上所述是小编给大家介绍的基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:/js/44856.html

猜你在找的JavaScript相关文章