首頁 > 開發者 > Android

html5第一個頁面。登入加倒計時，html5倒計時

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

html5第一個頁面。登入加倒計時，html5倒計時
<!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 != '') {
alert(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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More