学习资源推荐 https://blog.csdn.net/qq_42813491/article/details/90213353
- 微信扫码关注公众号 :前端前端大前端,追求更精致的阅读体验 ,一起来学习啊
- 关注后发送关键资料,免费获取一整套前端系统学习资料和老男孩python系列课程
目录结构
效果图
*
发送到注册手机的短信
*
ajax回调函数返回的数据
- 关于数据的解释由第三方数据接口提供
项目代码
- 布局没什么说的,逻辑相关部分已经写了注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单注册</title>
<style>
html,
body {
height: 100%;
overflow: hidden;
font-family: '微软雅黑';
}
body {
margin: 0;
padding: 0;
/* background-color: #F7F7F7; */
background: url('./img/wallpaper.jpg') no-repeat center /100% 100%;
display: flex;
justify-content: center;
align-items: center;
}
ul {
margin: 0;
padding: 50px;
padding-top: 0px;
list-style: none;
}
.register {
width: 800px;
background-color: #F9F9F9;
border: 1px solid #CCC;
border-radius: 5px;
}
li {
display: flex;
margin: 20px 0;
}
label,
input {
display: block;
float: left;
height: 46px;
font-size: 24px;
box-sizing: border-box;
color: #333;
}
label {
width: 200px;
line-height: 46px;
margin-right: 30px;
text-align: right;
}
input {
width: 320px;
padding: 8px;
line-height: 1;
outline: none;
position: relative;
}
input.code {
width: 120px;
}
input.verify {
width: 190px;
margin-left: 10px;
}
input.disabled {
background-color: #CCC !important;
cursor: not-allowed !important;
}
input[type=button] {
border: none;
color: #FFF;
background-color: #E64145;
border-radius: 4px;
cursor: pointer;
}
.tips {
width: 100%;
height: 40px;
text-align: center;
}
.tips p {
min-width: 300px;
max-width: 400px;
line-height: 40px;
margin: 0 auto;
color: #FFF;
display: none;
background-color: #C91623;
}
.submit:disabled {
background-color: gray;
cursor: not-allowed;
}
span {
line-height: 46px;
padding-left: 20px;
font-size: 20px;
color: yellowgreen;
text-shadow: 0 0 20px yellowgreen;
}
</style>
</head>
<body>
<div class="register">
<div class="tips">
<p>用户名不能为空</p>
</div>
<form id="ajaxForm">
<ul>
<li>
<label for="">验证手机</label>
<input type="text" name="mobile" class="mobile">
</li>
<li>
<label for="">短信验证码</label>
<input type="text" name="code" class="code">
<input type="button" value="获取验证码" class="verify">
</li>
<li>
<label for=""></label>
<input type="button" class="submit" value="立即注册">
</li>
</ul>
</form>
</div>
<!-- 提示信息 -->
</body>
</html>
<!-- 导入jQuery -->
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$('.verify').click(function () {
var $phone = $('.mobile').val();//获取输入的电话号
var n = parseInt(Math.random() * 10000) + 1000;//生成随机验证码,位数自己制定
$(this).addClass("disabled");//点击获取验证码后,禁用该按钮,开始倒计时
var time = 60;//倒计时时间,自定义
var $this = $(this);//备份,定时器是异步的,此this非彼this
var timer = setInterval(function () {
time--;//开始倒计时
if (time == 0) {//当倒计时为0秒时,关闭定时器,更改按钮显示文本并设置为可以点击
clearInterval(timer);
$this.val('获取验证码');
$this.removeClass("disabled");
return;
}
$this.val('还剩' + time + "S");//显示剩余秒数
}, 1000);//定时器一秒走一次,每次减一,就是倒计时了
$.get('http://api.jisuapi.com/sms/send', {//极速数据接口,第三方数据接口,下边我会介绍简单使用的
mobile: $phone,
content: "尊敬的会员,您的验证码:" + n + "。您正在注册,10分钟内有效。【黑马程序员】",//短信模板内容,除验证码外固定
appkey: "your appkey"//你在第三方数据接口注册后,系统分配给你的秘钥
},
function (data) {
//console.log(data);返回的数据,测试用
//下边是简单的注册,重点是发短信,不是这里
if(data.msg!="ok"){return;}
$('.submit').click(function () {
if ($('.code').val() == n) {
alert('注册成功')
} else {
alert('验证码错误')
}
})
}, 'jsonp');//设施访问合适, jsonp,这个不是你决定的,服务端决定,实际开发看后台给的接口文档
});
</script>
关于第三方数据接口的接入
- 我们能看到的一些基本服务,差不多都是一个接口的事,并不复杂
- 比如天气预报,短信,ip查询,身份证号查询,手机归属地,火车票等等…
- 提供数据的平台很多,我推荐极速数据
- 再次说明,第三方数据接口并不神秘,注册后部分免费,第三方,你懂得
- 下面介绍一下短信数据接口的使用(也可以直接看官网的demo)
- 前10条短信免费,测试用差不多吧,后续使用需要购买,公司里这笔钱不会你出的,放心
- 下边是示例代码,不同语言大同小异,官网给了php,python,java三种
- 短信使用需要在短信管理界面添加模板和建立子账号,进去看就会了,很简单
- 发短信必须用审核过的短信模板