html给手机发送验证码案例,js实现手机发送验证码功能

效果图：

代码如下：

发送验证码倒计时功能

@charset "utf-8";

*{ margin:0; padding:0; list-style:none}

body{ background:#EBECED; font-family:'微软雅黑'}

.form{width: 450px;height: auto; margin:100px auto; overflow:hidden;font-size: 16px;color: #1b1b1b;text-align: left; padding:50px; border:1px solid #ccc; border-radius:10px;}

.form div{padding:5px 0;overflow: hidden;}

.form label{width: 90px;display: block;float: left;}

.form .infos{width:200px;height: 26px;line-height: 26px;border:1px solid #BFBFBF;padding:2px;border-radius:4px;float: left;}

.form .div-phone a.send1{height: 26px;text-decoration:none;line-height: 26px;padding:2px;width: 80px;background: #AA8926;font-family: '宋体';color: #fff;font-size: 12px;text-align: center;display: block;float: left;border-radius:2px;margin-left:2px;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}

.form .div-phone a.send1:hover{text-decoration: none;background: #866c1b;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}

.form .div-phone a.send0{height: 26px;text-decoration:none;line-height: 26px;padding:2px;width: 80px;background: #A1A1A1;font-family: '宋体';color: #fff;font-size: 12px;text-align: center;display: block;float: left;border-radius:2px;margin-left:2px;}

.form .div-phone a.send0:hover{background: #A1A1A1;font-family: '宋体';color: #fff;font-size: 12px;text-decoration: none;}

.form span.error{height: 26px;line-height: 26px;padding:2px;width: 100px;color: red;padding-left:20px;display: block;float: left;margin-left:10px;font-size: 12px;font-family: '宋体';background: url(../images/error.png) no-repeat left center;}

.form #phone{width: 116px;}

.form .div-conform{padding-right:153px;}

.form .div-conform a.conform{width: 136px;height: 34px;display: block;text-align: left;overflow: hidden;background: url(../images/btn.jpg) no-repeat;float: right;text-indent: -1000px;}

用户名

手机

发送验证码

验证码

提交

var sends = {

checked:1,

send:function(){

var numbers = /^1\d{10}$/;

var val = $('#phone').val().replace(/\s+/g,""); //获取输入手机号码

if($('.div-phone').find('span').length == 0 && $('.div-phone a').attr('class') == 'send1'){

if(!numbers.test(val) || val.length ==0){

$('.div-phone').append('手机格式错误');

return false;

}

}

if(numbers.test(val)){

var time = 30;

$('.div-phone span').remove();

function timeCountDown(){

if(time==0){

clearInterval(timer);

$('.div-phone a').addClass('send1').removeClass('send0').html("发送验证码");

sends.checked = 1;

return true;

}

$('.div-phone a').html(time+"S后再次发送");

time--;

return false;

sends.checked = 0;

}

$('.div-phone a').addClass('send0').removeClass('send1');

timeCountDown();

var timer = setInterval(timeCountDown,1000);

}

}

}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！