html5第一个页面。登录加倒计时

最新推荐文章于 2023-08-23 23:55:00 发布

生命不息战斗不止

最新推荐文章于 2023-08-23 23:55:00 发布

阅读量3.9k

点赞数

分类专栏： html5学习

本文链接：https://blog.csdn.net/jspamd/article/details/46319097

版权

html5学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

生命不息战斗不止

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5第一个页面。登录加倒计时

登录function countDown(second){ // 如果秒数还是大于0，则表示倒计时还没结束 if(second>0){ $("#getCode").text(second); $("#getCode").css("background", "#677377"); // 按钮里的内容呈现倒计
复制链接

扫一扫