Jquery实现六位数验证码

前端时间公司要求维护老项目，并新增验证码需求，所有有空总结了一下；先上一下效果图

HTML内容

JQ代码实现部分

jQuery(document).on('ready', function () {let second = 60let i = 0;let passwordStr = ''let timer = null// 验证码输入获取焦点$("#code").focus(function(){if (i === 6) {$("label:nth-child(6)").addClass("active");} else if (passwordStr.length) {i = passwordStr.length$(".labels label").removeClass("active");$("label:nth-child("+(i+1)+")").addClass("active")} else {i = 0$(".labels label").removeClass("active");$("label:nth-child(1)").addClass("active")}})$('.verification-code input').bind('keyup', function (event) {// 针对部分安卓手机返回229做处理event.key =event.key === 'Unidentified'? event.target.value.charAt(event.target.value.length - 1): event.keyconst reg = /[A-Za-z0-9]/;if(reg.test(event.key)){$(".labels label").removeClass("active");if(i < $(".labels label").length) {//46删除键，8回退键if(event.keyCode == 46 || event.keyCode == 8) {i--;i = i < 0 ? 0 : i;$("label:nth-child("+(i+1)+")").html("").addClass("active")passwordStr = passwordStr.slice(0, i)} else {const reg1 = /[0-9]/;if (reg1.test(event.key)) {passwordStr += event.key$("label:nth-child("+(i+1)+")").html(event.key)$("label:nth-child("+(i+2)+")").addClass("active")i++;} else {$("label:nth-child("+(i+1)+")").addClass("active")}}} else {if(event.keyCode == 46 || event.keyCode == 8) {i = $(".labels label").length - 1;$("label:nth-child("+(i+1)+")").html("").addClass("active")passwordStr = passwordStr.slice(0, i - 1)} else {$("label:nth-child(6)").addClass("active")}}}})})

css部分

.verification-code {position: relative;width: 100%;overflow: hidden;.code{position: absolute;top: 0;left: 0;width: 100%;padding: 0;height: 80px;font-size: 35px;overflow: hidden;border: none;outline: none;opacity: 0;user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; -webkit-tap-highlight-color: transparent;/*ios手机上input和lable都会出现点击有灰色背景闪动*/}.labels{display: flex;display: -webkit-flex;width: 100%;height: 40px;justify-content: space-between;-webkit-justify-content: space-between;margin-bottom: 40px;-webkit-tap-highlight-color: transparent; /*防止ios手机上input和lable都会出现点击有灰色背景闪动*/}.label{display: flex;justify-content: center;height: 34px;line-height:34px;width: 12%;border-bottom: 1px solid #E0E0E0;color: #010101;font-size: 24px;text-align: center;padding-bottom: 4px;}.active:after{content: '';display: inline-block;height: 100%;width: 2px;height:34px;background: #210F60;animation: .8s animate linear infinite;}}
@keyframes animate {100% {opacity: 0;}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！