国产福利姬在线,鲁一鲁啪一啪,综合网一区二区三区

一、簡易版登陸注冊（js實現(xiàn)）

登陸注冊效果：

圖片3.png

難點：
注冊時cookie要分別存成兩條；
注冊頁：我們注冊的時候把信息分別存放到兩條cookie中，一條是當(dāng)前用戶登陸（user），一條存放到庫中（bank）。

1、注冊頁面的編寫：
效果：

實現(xiàn)的功能：
（1）點擊注冊的時候，把數(shù)據(jù) (str = 姓名+密碼 ) 連起來
（2）存儲在 cookie 中的 user
（3）存儲在cookie 中的bank ；
（4）注冊完之后跳轉(zhuǎn)到主頁；

代碼實現(xiàn)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸頁</title>
    <script type="text/javascript" src="cookie.js"></script> 
</head>
<body>
    <form>
        <h2>歡迎來到17點, 請注冊</h2>
        <div class="field">
            姓名
            <input type="text" id="name" name="">
        </div>
        <div class="field">
            密碼
            <input type="text" id="key" name="">
        </div>
        <div class="field">
            <input type="button" id="btn" name="" value="注冊">
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
      var strName = document.getElementById("name");
      var strKey = document.getElementById("key");
      var oBtn = document.getElementById("btn");
      oBtn.onclick = function () {
          var val = strName.value+":"+strKey.value;//把名字和密碼連起來（1）
          setCookie("user", val, 7);//存放到當(dāng)前用戶中，（2）
          
          //先判斷之前是否存在bank（3）
          if(getCookie("bank")){
            var bankVal =  getCookie("bank")+"_"+val;
          }else {
            var bankVal =  val;
          }
           //存放到庫中（3）
           setCookie("bank", bankVal, 100);
          //跳轉(zhuǎn)到首頁（4）
          window.location.href = "index.html";
      }
</script>

2、首頁的編寫：

效果：未登陸狀態(tài)下的首頁

屏幕快照 2016-12-01 下午9.16.13.png

效果：已登陸狀態(tài)下的首頁

屏幕快照 2016-12-01 下午9.29.45.png

實現(xiàn)的功能：

（1）分別在html中寫上（注冊登陸）默認顯示 和（x x x的個人主頁退出登陸）默認隱藏
（2）加載頁面判斷是否cookie中存放登陸的用戶，沒有顯示未登陸狀態(tài)。有顯示個人主頁，隱藏注冊登陸。
（3）動態(tài)獲取用戶名添加到個人主頁前
（4）退出登陸的時候，刪除user的這條cookie，刷新頁面

代碼實現(xiàn)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主頁</title>
     <script type="text/javascript" src="cookie.js"></script> 
</head>
<style type="text/css">
    *{margin: 0; padding: 0;}
    h2{float: left; margin-left: 350px; margin-bottom:50px;}
    #home{ display: none; }
    .top-nav{ float:right; margin-right:350px;}
</style>
<body>
   <h2>主頁 假裝這是個LOGO</h2>
    <!-- 分別在html中寫上（注冊 登陸）*默認顯示* 和（x x x的個人主頁 退出登陸）*默認隱藏*(1)-->
   <div class="top-nav">
      <div id="text-login">
           <a href="register.html">注冊</a>
           <a href="login.html" id="login">登陸</a>
      </div>
      <div id="home"><a href="" id="login-name"></a>的個人主頁  <a href="javascript:;" id="outlogin">退出登陸</a>
      </div>
   </div>   
</body>
</html>
<script type="text/javascript">
var oTL = document.getElementById("text-login");
var oHome = document.getElementById("home");
var oOut = document.getElementById("outlogin");
var oLoginName = document.getElementById("login-name");

    if(getCookie("user")){  //加載頁面判斷是否cookie中存放登陸的用戶(2)
       oTL.style.display = "none";
       oHome.style.display = "block";
       //把cookie中的名字取出來，動態(tài)添加到個人主頁前（3）
       var arrUser = getCookie("user").split(":");
       oLoginName.innerHTML = arrUser[0];
 }
// 刪除user的這條cookie，刷新網(wǎng)頁（4）
 oOut.onclick = function() {
     removeCookie("user");
      window.location.href = "index.html";
     
 }
</script>

3、登陸頁面的編寫：
效果：

屏幕快照 2016-12-01 下午9.44.01.png

實現(xiàn)的功能：

（1）添加按鈕點擊事件，點擊文本框取值并連接 ( val = 用戶名+密碼 )
（2）從bank的cookie中取出庫的信息，并分成數(shù)組
（3）遍歷這個數(shù)組，是否能匹配到文本框取的值
（4）匹配到彈出登陸成功，并刷新頁面
（4）沒匹配到彈出用戶名密碼錯誤

代碼實現(xiàn)：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登陸頁</title>
     <script type="text/javascript" src="cookie.js"></script> 
</head>
<body>
    <form>
        <h2>歡迎來到17點, 請登錄</h2>
        <div class="field">
            姓名
            <input type="text" id="login-name" name="">
        </div>
        <div class="field">
            密碼
            <input type="text" id="login-key" name="">
        </div>
        <div class="field">
            <input type="button" id="login-btn" name="" value="登陸">
        </div>
    </form>
</body>
<script type="text/javascript">
    var oLname = document.getElementById("login-name");
    var oLkey = document.getElementById("login-key");
    var oLbtn = document.getElementById("login-btn");
   //添加按鈕點擊事件，點擊文本框取值并連接 ( val =  用戶名+密碼 )（1） 
    oLbtn.onclick = function  (argument) {
         var val = oLname.value+":"+oLkey.value;
          if(getCookie("bank")){ //從bank的cookie中取出庫的信息，并分成數(shù)組(2)
            var arrBank = getCookie("bank").split("_");
            var boo = false;
            for( var i = 0; i < arrBank.length ; i++  ){//遍歷這個數(shù)組，是否能匹配到文本框取的值（3）
                if(val == arrBank[i]){
                     boo = true;
                }
            }
            if ( boo == true) {
                setCookie("user", val);//匹配到彈出登陸成功，并刷新頁面（4）
                alert("登陸成功");
                window.location.href = "index.html";
            }else {
                alert("用戶名密碼錯誤");//（4）沒匹配到彈出用戶名密碼錯誤
            } 
          }
    }
</script>
</html>

4、簡易版存在的問題
（1）注冊登陸時沒有正則驗證；
（2）注冊時注冊信息只有兩項
（3）注冊時沒有驗證之前是否注冊過
（4）沒有七天免登錄選項
(5) 換一個cookie函數(shù)

二、基本版登陸注冊（js實現(xiàn)）

首先重新封裝了一個cookie的函數(shù)，編碼存儲；
1、注冊頁面的編寫：

效果：

屏幕快照 2016-12-02 上午1.37.56.png

增加的功能：
（1）加入正則驗證；
（2）信息已鍵值對形式存儲；

代碼實現(xiàn)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸頁</title>
    <script type="text/javascript" src="cookie.js"></script>
</head>

<body>
    <form>
        <h2>歡迎來到17點, 請注冊</h2>
        <div class="field">
            手機號
            <input type="text" id="tel" name="">
            <span id="tel-warn"></span>
        </div>
        <div class="field">
            姓名
            <input type="text" id="name" name="">
            <span id="name-warn"></span>
        </div>
        <div class="field">
            密碼
            <input type="password" id="key" name=""> <!-- 密碼改成密文 -->
            <span id="key-warn"></span>
        </div>
        <div class="field">
            再次輸入密碼
            <input type="password" id="key2" name=""> <!-- 密碼改成密文 -->
            <span id="key2-warn"></span>
        </div>
        <div class="field">
            <input type="button" id="btn" name="" value="注冊">
            <a href="login.html">去登錄</a>
        </div>
    </form>
</body>

</html>
<script type="text/javascript">
var oTel = document.getElementById("tel");
var oName = document.getElementById("name");
var oKey = document.getElementById("key");
var oKey2 = document.getElementById("key2");
var oBtn = document.getElementById("btn");
var oTelwarn = document.getElementById("tel-warn");
var oNamewarn = document.getElementById("name-warn");
var oKeywarn = document.getElementById("key-warn");
var oKeywarn2 = document.getElementById("key2-warn");
//設(shè)置正則（1）
var reg = /^1[34578]\d{9}$/  //11位手機號
var reg1 = /^[a-zA-Z0-9_\u4e00-\u9fa5]{3,10}$/ //字母數(shù)字中文下劃線
var reg2 = /^\w{6,12}$/ //  字母數(shù)字下劃線
//設(shè)置失焦事件
oTel.onblur = function() {
   //利用正則去判斷輸入內(nèi)容是否符合要求
    if (reg.test(oTel.value)) {
        oTelwarn.innerHTML = "√";
        oTelwarn.style.color = "green"
    } else {
        oTelwarn.innerHTML = "X請輸入11位手機號";
        oTel.value = "";
        oTelwarn.style.color = "red"
    }
}
oName.onblur = function() {
    if (reg1.test(oName.value)) {
        oNamewarn.innerHTML = "√";
        oNamewarn.style.color = "green"
    } else {
        oNamewarn.innerHTML = "X請輸入3-10位字母數(shù)字中文下劃線";
        oNamewarn.value = "";
        oNamewarn.style.color = "red"
    }
}
oKey.onblur = function() {
    if (reg2.test(oKey.value)) {
        oKeywarn.innerHTML = "√";
        oKeywarn.style.color = "green"
    } else {
        oKeywarn.innerHTML = "X請輸入6-12位字母數(shù)字下劃線";
        oKeywarn.value = "";
        oKeywarn.style.color = "red"
    }
}
oKey2.onblur = function() {
    if (oKey2.value==oKey.value) {
        oKeywarn2.innerHTML = "√";
        oKeywarn2.style.color = "green"
    } else {
        oKeywarn2.innerHTML = "X兩次輸入的密碼不同";
        oKeywarn2.value = "";
        oKeywarn2.style.color = "red"
    }
}
oBtn.onclick = function() {
    //把信息拼成一個鍵值對形式 例如 name:17dian,key:123456,tel:18810701077（2）
    var val = "name"+":"+oName.value + ","+"key" +":"+oKey.value+","+"tel"+":"+oTel.value; 
     createCookie("user", val); //存放到當(dāng)前用戶中，
    if (getCookie("bank")) {
        var bankVal = getCookie("bank") + "&" + val;
    } else {
        var bankVal = val;
    }
    createCookie("bank", bankVal, 100);
    window.location.href = "index.html";
}
</script>

2、首頁的編寫：

效果：

屏幕快照 2016-12-01 下午9.29.45.png

增加功能：
（1）封裝了一個將字符串轉(zhuǎn)化成對象的函數(shù)；
（2）將user 的cookie轉(zhuǎn)化成一個對象
（3）通過對象.屬性的方法獲取用戶名

代碼實現(xiàn)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主頁</title>
     <script type="text/javascript" src="cookie.js"></script> 
</head>
<style type="text/css">
    *{margin: 0; padding: 0;}
    h2{float: left; margin-left: 350px; margin-bottom:50px;}
    #home{ display: none; }
    .top-nav{ float:right; margin-right:350px;}
</style>
<body>
   <h2>主頁 假裝這是個LOGO</h2>
    <!-- 分別在html中寫上（注冊 登陸）*默認顯示* 和（x x x的個人主頁 退出登陸）*默認隱藏*(1)-->
   <div class="top-nav">
      <div id="text-login">
           <a href="register.html">注冊</a>
           <a href="login.html" id="login">登陸</a>
      </div>
      <div id="home"><a href="" id="login-name"></a>的個人主頁  <a href="javascript:;" id="outlogin">退出登陸</a>
      </div>
   </div>   
</body>
</html>
<script type="text/javascript">
var oTL = document.getElementById("text-login");
var oHome = document.getElementById("home");
var oOut = document.getElementById("outlogin");
var oLoginName = document.getElementById("login-name");
    if(getCookie("user")){  
       oTL.style.display = "none";
       oHome.style.display = "block";
      var obj = convertCartStrToObj(getCookie("user")); //*重點：將字符串轉(zhuǎn)化成對象的形式（2）
       oLoginName.innerHTML = obj.name; //通過對象.屬性的方式去獲取用戶名（3）
 }
 oOut.onclick = function() {
      removeCookie("user");
      window.location.href = "index.html";
 }
//*******重點：封裝一個將字符串轉(zhuǎn)化成對象的函數(shù)（1）
function convertCartStrToObj(cartStr){        
         var obj ={};
        //將字符串name:17dian,key:123456,tel:18810701077 按“,”拆分成數(shù)組["name:17dian", "key:123456", "tel:18810701077"]
         var arrVal = cartStr.split(",");  
         for ( var i = 0; i < arrVal.length ;i++){
                  data = arrVal[i].split(":"); // 在將每一項拆分 例如arrVal[0]時 data =["name", "17dian"]
                  console.log(data)
                  obj[data[0]] = data[1]; //給對象添加屬性
         }
        return obj;
}
</script>

3、登陸頁面的編寫：

效果：

屏幕快照 2016-12-02 上午3.12.22.png

增加功能：
（1）把正則判斷的函數(shù)封裝起來
（2）增加失焦事件，用正則去判斷
（3）點擊登陸時，增加正則去判斷
（3）通過對象.屬性的方法獲取手機號，并與文本框輸入對比
（4）通過對象.屬性的方法獲取密碼，并與文本框輸入對比
（5）增加7天免登錄功能

代碼實現(xiàn)：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登陸頁</title>
    <script type="text/javascript" src="cookie.js"></script>
</head>

<body>
    <form>
        <h2>歡迎來到17點, 請登錄</h2>
        <div class="field">
            手機號
            <input type="text" id="login-tel" name="">
            <span id="tel-warn"></span>
        </div>
        <div class="field">
            密碼
            <input type="password" id="login-key" name="">
            <span id="key-warn"></span>
        </div>
        <div class="field">
            <input type="button" id="login-btn" name="" value="登陸">
            <input type="checkbox" id="auto-login" name="" value="checked">七天免登錄
        </div>
    </form>
</body>
<script type="text/javascript">
var oTel = document.getElementById("login-tel");
var oKey = document.getElementById("login-key");
var oLbtn = document.getElementById("login-btn");
var oTelwarn = document.getElementById("tel-warn");
var oKeywarn = document.getElementById("key-warn");
var oAutologin = document.getElementById("auto-login");
var reg = /^1[34578]\d{9}$/ //11位手機號
var reg2 = /^\w{6,12}$/ //  字母數(shù)字下劃線

//增加失焦事件，用正則去判斷（2）
oTel.onblur = fnTel; //正則判斷
oKey.onblur = fnKey; //正則判斷

oLbtn.onclick = function() {
       //點擊登陸時，增加正則去判斷（3）
       if (!(fnTel()&fnKey())) {
          return;
       }
        //去判斷這兩個和庫中是否相同 oTel.value  oKey.value;
        if (getCookie("bank")) { 
            var arrBank = getCookie("bank").split("&");
            var boo = false;
            for (var i = 0; i < arrBank.length; i++) {
                var obj = convertCartStrToObj(arrBank[i]);
                if (oTel.value == obj.tel) {//通過對象.屬性的方法獲取手機號，并與文本框輸入對比（3）
                     if(oKey.value == obj.key){  //通過對象.屬性的方法獲取密碼，并與文本框輸入對比（4）
                        alert("登陸成功")
                        if (oAutologin.checked == true) {//增加7天免登錄功能（5）
                           var  iDay = 7;
                        }else{
                            var  iDay ="0";
                        }
                        createCookie("user", arrBank[i] ,  setCookieDate(iDay) );
                        window.location.href = "index.html";
                        return;
                     }else{
                        alert("密碼錯誤")
                        oKey.innerHTMl = "";
                        return;
                     }
                 var boo = true;
                }
            }
            alert("這個用戶不存在");
        }
    }
//把正則判斷的函數(shù)封裝起來(1)
function fnTel() {
    if (reg.test(oTel.value)) {
        oTelwarn.innerHTML = "";
        oTelwarn.style.color = "green"
        return true;
    } else {
        oTelwarn.innerHTML = "X請輸入11位手機號";
        oTel.value = "";
        oTelwarn.style.color = "red"
    }
}
 function fnKey() {
    if (reg2.test(oKey.value)) {
        oKeywarn.innerHTML = "";
        oKeywarn.style.color = "green";
        return true;
    } else {
        oKeywarn.innerHTML = "X請輸入6-12位字母數(shù)字下劃線";
        oKeywarn.value = "";
        oKeywarn.style.color = "red"
    }
}
//前面封裝好的函數(shù)拷過來
function convertCartStrToObj(cartStr) {
    var obj = {};
    //將字符串name:17dian,key:123456,tel:18810701077 按“,”拆分成數(shù)組["name:17dian", "key:123456", "tel:18810701077"]
    var arrVal = cartStr.split(",");
    for (var i = 0; i < arrVal.length; i++) {
        data = arrVal[i].split(":"); // 在將每一項拆分 例如arrVal[0]時 data =["name", "17dian"]
        console.log(data)
        obj[data[0]] = data[1]; //給對象添加屬性
    }
    return obj;
}
</script>
</html>

4、再次優(yōu)化注冊頁

修改內(nèi)容：
（1）封裝正在判斷函數(shù)
（2）點擊注冊時再次進行正則判斷
（3）判斷手機號之前是否被注冊過
（4）判斷用戶名之前是否被注冊過
代碼實現(xiàn)：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登陸頁</title>
    <script type="text/javascript" src="cookie.js"></script>
</head>

<body>
    <form>
        <h2>歡迎來到17點, 請注冊</h2>
        <div class="field">
            手機號
            <input type="text" id="tel" name="">
            <span id="tel-warn"></span>
        </div>
        <div class="field">
            姓名
            <input type="text" id="name" name="">
            <span id="name-warn"></span>
        </div>
        <div class="field">
            密碼
            <input type="password" id="key" name="">
            <span id="key-warn"></span>
        </div>
        <div class="field">
            再次輸入密碼
            <input type="password" id="key2" name="">
            <span id="key2-warn"></span>
        </div>
        <div class="field">
            <input type="button" id="btn" name="" value="注冊">
            <a href="login.html">去登錄</a>
        </div>
    </form>
</body>

</html>
<script type="text/javascript">
var oTel = document.getElementById("tel");
var oName = document.getElementById("name");
var oKey = document.getElementById("key");
var oKey2 = document.getElementById("key2");
var oBtn = document.getElementById("btn");
var oTelwarn = document.getElementById("tel-warn");
var oNamewarn = document.getElementById("name-warn");
var oKeywarn = document.getElementById("key-warn");
var oKeywarn2 = document.getElementById("key2-warn");
var reg = /^1[34578]\d{9}$/ //11位手機號
var reg1 = /^[a-zA-Z0-9_\u4e00-\u9fa5]{3,10}$/ //字母數(shù)字中文下劃線
var reg2 = /^\w{6,12}$/ //  字母數(shù)字下劃線
    //設(shè)置失焦事件
oTel.onblur = fnTel;
oName.onblur = fnName;
oKey.onblur = fnKey;
oKey2.onblur = fnKey2;
oBtn.onclick = function() {
        //點擊注冊時再次進行正則判斷(2)
        if (!(fnTel()&fnName()&fnKey()&fnKey2())){
            return;
        }
        //把信息拼成一個鍵值對形式 例如 name:17dian,key:123456,tel:18810701077（2）
        var val = "name" + ":" + oName.value + "," + "key" + ":" + oKey.value + "," + "tel" + ":" + oTel.value;
        createCookie("user", val); //存放到當(dāng)前用戶中，
        if (getCookie("bank")) {
            var bankVal = getCookie("bank") + "&" + val;
        } else {
            var bankVal = val;
        }
        createCookie("bank", bankVal , setCookieDate(100));
        window.location.href = "index.html";
    }

    //封裝正在判斷函數(shù)(1)

function fnTel() {
    //判斷手機號之前是否被注冊過(3)
    if (getCookie("bank")) {
        var arrBank = getCookie("bank").split("&");
        for (var i = 0; i < arrBank.length; i++) {
            var obj = convertCartStrToObj(arrBank[i]);
            if (oTel.value == obj.tel) {
                oTelwarn.innerHTML = "您的手機號已經(jīng)被注冊";
                oTel.value = "";
                oTelwarn.style.color = "red"
                return;
            }
        }
    }
    if (reg.test(oTel.value)) {
        oTelwarn.innerHTML = "√";
        oTelwarn.style.color = "green";
        return  true;
    } else {
        oTelwarn.innerHTML = "X請輸入11位手機號";
        oTel.value = "";
        oTelwarn.style.color = "red"
    }
}
function fnName() {
    //判斷用戶名之前是否被注冊過(4)
    if (getCookie("bank")) {
        var arrBank = getCookie("bank").split("&");
        for (var i = 0; i < arrBank.length; i++) {
            var obj = convertCartStrToObj(arrBank[i]);
            if (oName.value == obj.name) {
                oNamewarn.innerHTML = "此用戶名已經(jīng)被注冊";
                oName.value = "";
                oNamewarn.style.color = "red";
                return;
            }
        }
    }
    if (reg1.test(oName.value)) {
        oNamewarn.innerHTML = "√";
        oNamewarn.style.color = "green"
        return  true;
    } else {
        oNamewarn.innerHTML = "X請輸入3-10位字母數(shù)字中文下劃線";
        oName.value = "";
        oNamewarn.style.color = "red"
    }
}

function fnKey() {
    if (reg2.test(oKey.value)) {
        oKeywarn.innerHTML = "√";
        oKeywarn.style.color = "green"
        return  true;
    } else {
        oKeywarn.innerHTML = "X請輸入6-12位字母數(shù)字下劃線";
        oKeywarn.value = "";
        oKeywarn.style.color = "red"
    }
}

function fnKey2() {
    if (oKey2.value == oKey.value) {
        oKeywarn2.innerHTML = "√";
        oKeywarn2.style.color = "green"
        return  true;
    } else {
        oKeywarn2.innerHTML = "X兩次輸入的密碼不同";
        oKeywarn2.value = "";
        oKeywarn2.style.color = "red"
    }
}

function convertCartStrToObj(cartStr) {
    var obj = {};
    //將字符串name:17dian,key:123456,tel:18810701077 按“,”拆分成數(shù)組["name:17dian", "key:123456", "tel:18810701077"]
    var arrVal = cartStr.split(",");
    for (var i = 0; i < arrVal.length; i++) {
        data = arrVal[i].split(":"); // 在將每一項拆分 例如arrVal[0]時 data =["name", "17dian"]
        obj[data[0]] = data[1]; //給對象添加屬性
    }
    return obj;
}
</script>

總結(jié)：
經(jīng)過這樣就一個思路就完成了，登陸注冊頁面的編寫。如果熟練，前面簡易版可直接省略，從最后完成的效果去編寫；

百度云鏈接：http://pan.baidu.com/s/1slgvrch 密碼：97x2

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

前端登陸注冊實現(xiàn)——利用cookie模仿后臺數(shù)據(jù)庫存取數(shù)據(jù)

前端登陸注冊實現(xiàn)——利用cookie模仿后臺數(shù)據(jù)庫存取數(shù)據(jù)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

前端登陸注冊實現(xiàn)——利用cookie模仿后臺數(shù)據(jù)庫存取數(shù)據(jù)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av