下载文档获取完整
要求：1.在本文档中的题目下作答，并提交本文档； 2.提交每道题所对应的代码源文件（包括 html、 js 以及相关的资源文件）。将以上文件放在一个文件夹中，压缩后提交。
自从你的女神第一次在你生命中出现的时候，你就知道这辈子你不再会爱上别的人，你为了追到她，牟足了劲打算年底放假的时候去跟她表白。年底，你们公司要搞促销，公司打算利用 H5 活动吸引顾客用手机号注册，如果任务完成的漂亮，你的土豪老板思聪可能会直接提拔你为公司总经理，年薪直接涨到 1000 万，如果真是这样，你的女神可能很可能直接就从了你，作为有志青年的你果敢地接下年底公司的 H5 活动页任务。思聪表示，如果你能提前完成任务的话可以让你提前放假回家，并且再送你一套北京二环内的房产。别激动，活动内容也非常简单，就是当用户点击立即领取按钮的时候判断用户是否输入手机号和验证码，做不同的弹窗提示，如图所示的几种不同的情况。
任务描述：
1.点击立即领取时判断手机号和验证码输入情况。
如果没有输入或者输入错误的手机号，就提示：请正确输入 11 位手机号 如果手机号正确输入，就提示：请正确输入 4 位验证码 如果手机号和验证码都输入正确，就提示：注册成功了！！！
2.用更少的代码量写出此功能。
<html> <head>
<style>
.main {
position: relative;
width: 750px;
height: 1664px;
margin: 0px auto;
background: url(images/bg.png) no-repeat;
}
.main img {
padding: 10px;
}
.main .person {
position: absolute;
right: 0px;
top: 100px;
z-index: 10;
}
.main .rule {
position: relative;
bottom: 0px;
width: 600px;
}
.main .content {
position: absolute;
top: 700px;
background-color: white;
margin: 30px 45px;
}
.main .content .login {
margin-top: 60px;
padding: 30px;
}
.main .content .phone {
height: 90px;
width: 600px;
border: 1px solid #777;
border-top: none;
border-left: none;
border-right: none;
padding: 10px;
font-size: 2em;
}
.main .content .verify {
height: 90px;
width: 600px;
border: 1px solid #777;
border-top: none;
border-left: none;
border-right: none;
}
.main .content .verifycode {
height: 90px;
padding: 10px;
width: 400px;
border: none;
font-size: 2em;
}
.main .content a {
font-size: 2em;
}
</style> </head> <body>
<div class="main">
<img class="person" width="631" src="images/person.png" />
<div class="content">
<div class="login">
<form action="login" method="post">
<input class="phone" type="text" placeholder="请输入手机号" />
<div class="verify">
<input class="verifycode" type="number" placeholder="验证码" /><a class="btnVerify">获取验证码</a>
</div>
</form>
<img class="rule" width="631" src="images/rule.png" />
</div>
</div>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".btnVerify").bind("click", function () {
var phone = $(".phone").val();
if (phone.length == 11) {
alert("请正确输入 4 位验证码");
var code = $(".verifycode").val();
if (code.length == 4) {
alert("注册成功了!");
}
}
else {
alert("请输入的手机号!");
}
});
});
</script> </body> </html>
