验证码样式设置
.re-tel-c {
padding: 1.92rem;
font-size: 1.28rem;
}
.re-tel-c h6 {
font-size: 2.32rem;
font-weight: 500;
margin-bottom: 1.92rem;
}
.re-tel-c .re-c-intor {
color: #81838C;
}
.re-tel-c .re-c-intor span {
color: #FFD100;
}
.re-tel-c .code {
width: 100%;
height: 12rem;
}
.re-tel-c .code #yzm {
width: 0;
border: 0;
padding: 0;
margin: 0;
height: .44rem;
position: absolute;
outline: none;
color: transparent;
text-shadow: 0 0 0 transparent;
width: 300%;
margin-left: -100%;
background: none;
margin-top: 7.2rem;
}
.re-tel-c .code #yzmTable {
margin: 0 auto;
height: 4rem;
margin-top: 8rem;
/* border: 1/@r solid red; */
/* opacity: 0.1; */
}
.re-tel-c .code #yzmTable span {
display: block;
width: 4.88rem;
height: 4rem;
float: left;
border-radius: 0.2rem;
text-align: center;
line-height: 2.4rem;
font-size: 2.72rem;
font-weight: 900;
color: #FFD100;
height: 2.4rem;
margin-left: 5.7%;
top: 0.8rem;
position: relative;
}
.re-tel-c .code #yzmTable span:before {
content: '';
position: absolute;
bottom: -1.44rem;
left: 0;
width: 100%;
height: 0.16rem;
background: #211E33;
}
.re-tel-c .code #yzmTable span.active {
position: relative;
}
.re-tel-c .code #yzmTable span.active:before {
content: '';
position: absolute;
bottom: -1.44rem;
left: 0;
width: 100%;
height: 0.16rem;
background: #FFD100;
}
.re-tel-c .second {
color: #A8AAB3;
margin-bottom: 4.96rem;
margin-left: 9.04rem;
}
.re-tel-c .second.active {
color: #FFD100 ;
}
.re-tel-c .rtc-btn {
width: 100%;
height: 3.2rem;
border-radius: 1.6rem;
background: #211E33;
color: #81838C;
text-align: center;
line-height: 3.2rem;
}
.re-tel-c .rtc-btn.active {
background: #FFD100;
color: #5E4D00;
}
身份验证
我们已向123456787654 发送了一个4位数的验证码
重新获取·58S
下一步
function intoYzm(index) {
var ele = document.getElementById("yzm");
$('#yzmTable span').eq(index-1).addClass('active');
ele.focus()
}
function yzmInsert() { // input内容改变时触发
for (var i = 1; i <= 4; i++) {
var nextId = 's_' + i
document.getElementById(nextId).innerHTML = ' '
$('#yzmTable span').eq(i).removeClass('active');
}
var yzm = document.getElementById("yzm").value
var yzmArr = yzm.split('');
for (var i = 0; i < yzmArr.length; i++) {
const num = yzmArr[i];
var id = 's_' + Number(i + 1);
$('#yzmTable span').eq(i).addClass('active');
document.getElementById(id).innerHTML = ' ' + num + ' '
}
}
// 收起软键盘的方法，点击除了输入框之外的其他区域就收起软键盘
$('body').on('touchend', function(el) {
if (el.target.tagName != 'SPAN') {
$('yzm').blur()
}
})