您的位置：首页 > Web前端 > HTML5
html5第一个页面。登录加倒计时

2015-06-02 00:24 531 查看
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>登录</title>
<link rel="stylesheet" type="text/css" href="css/login.css">
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/param.js"></script>
<script type="text/javascript">
function countDown(second){
// 如果秒数还是大于0，则表示倒计时还没结束
if(second>0){
$("#getCode").text(second);
$("#getCode").css("background", "#677377");
// 按钮里的内容呈现倒计时状态
$("#getCode").attr("disabled", true);
// 时间减一
second--;
// 一秒后重复执行
setTimeout(function(){countDown(second);},1000);
// 否则，按钮重置为初始状态
}else{
// 按钮里的内容恢复初始状态
$("#getCode").text("获取验证码");
$("#getCode").css("background", "");
// 按钮置未可点击状态
$("#getCode").attr("disabled", false);
}
}
$(function() {
// 点击登录按钮
$("#login").click(function() {
var contactsPhone = $("input[name='memberTel']").val();
if (contactsPhone == null || contactsPhone == "") {
alert("请填写手机号");
return;
}
if (contactsPhone.length != 11) {
alert("请填写正确的手机号");
return;
}
var validateCode = $("#validateCode").val();

if (validateCode == null || validateCode == "") {
alert("请输入验证码");
return;
}
var phoneUuid ="abcdef";// 添加规定的个推id

var actionUrl = "http://192.168.0.112:8080/member/checkPC.action";
$.post(actionUrl,
{
checkPhoneCode_phone : contactsPhone,
checkPhoneCode_code  : validateCode,
checkPhoneCode_uuId  : phoneUuid
},
function(result){
if (result != null && result != '') {
if (result == 'PHONE_ERROR') {
alert("请先获取验证码");
}else if(result == 'CODE_ERROR'){
alert("验证码错误");
} else if(result == 'TIME_OUT'){
alert("连接超时");
} else if(result == 'MEMBER_CLOSE'){
alert("此会员已被关闭");
}else {
var jsonResult = eval("(" + result + ")");
$.cookie("member_id", jsonResult.id, {expires:7});
var sourcePage = $.request.queryString["sourcePage"];
if (sourcePage == 'mine') {
location.href = "mine.html";
} else if (sourcePage == 'car') {
location.href = "send.html";
} else {
location.href = "index.html";
}
}
}
},
"text"
);
});

// 获取验证码
$("#getCode").click(function(){
var contactsPhone = $("input[name='memberTel']").val();
if (contactsPhone == null || contactsPhone == "") {
alert("请填写手机号");
return;
}
if (contactsPhone.length != 11) {
alert("请填写正确的手机号");
return;
}
var phoneUuid ="abcdef";// 添加规定的个推id
var actionUrl = "http://192.168.0.112:8080/member/sendSMS.action";
$.post(actionUrl,
{
sendSMSCode_phone 	   : contactsPhone,
sendSMSCode_phone_uuId : phoneUuid
},
function(result){
if (result != null && result != '') {
if (result == 'SENDSMS_SUCCESS') {
alert("发送成功");
}else{
alert("发送失败");
}
}
},
"text"
);
countDown(30);
});
});
</script>
</head>
<body>
<div class="number">
<a><img src="img/login_phone.png"></a>
<input name="memberTel" type="tel" placeholder="手机号码登录">
<button id="getCode">获取验证码</button>
</div>
<div class="number">
<a><img src="img/login_pwd.png"></a>
<input id="validateCode" type="tel" placeholder="请输入验证码">
</div>
<button class="login" id="login">登录</button>
<p class="p_bottom">©banjingquan.com</p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航