簡易登錄以及註冊界面製作

以下爲登錄和註冊頁面的圖片

登錄：

註冊：

先介紹登錄頁面

以下爲登錄的html

<input id="username" type="text" placeholder="請輸入用戶名">
<input id="password" type="password" placeholder="請輸入密碼">
<br/>
<br/>
<input id="login" type="button" value="登錄">
<input id="setInput" type="button" value="註冊">

以下爲登錄的js

//獲取頁面中的元素
var username=document.getElementById("username");
var password=document.getElementById("password");
var login=document.getElementById("login");
var setInput=document.getElementById("setInput");
//給localStorage加載初始數據
localStorage.username+= "chenzhuozhu:czz970312;";
localStorage.username+="sjaodoa:fajsdlfja;";
//設置個函數判斷localStorage中是否有對應的賬號密碼
function tuust(value) {
    var dta=localStorage.username.split(";");
    for (let i=0;i<dta.length;i++){
        var arrPust=dta[i].split(":");
        if (arrPust[0]==value){
            if (arrPust[1]==password.value){
                return true;
            }
        }
    }
    return false;
}
//給登錄按鈕添加個判斷，先判斷用戶名和密碼框爲不爲空，並且數據庫中有沒有對應的數值。
login.addEventListener("click",function () {
    if (username.value==""||password.value==""){
        alert("用戶名和密碼不能爲空");
    } else {
        if (tuust(username.value)){
            alert("登錄成功");
            username.value="";
            password.value="";
        } else {
            alert("沒有你的用戶名或者密碼錯誤，重新註冊一個吧");
        }
    }
});
//跳轉到註冊界面
setInput.addEventListener("click",function () {
    location.href="login.html";
})

以下爲註冊頁面的html

<input id="username" type="text" placeholder="請輸入用戶名">
<input id="password" type="password" placeholder="請輸入密碼">
<input id="passwordTwo" type="password" placeholder="請再次輸入密碼">
<br/><br/>
<input id="setInput" type="button" value="註冊">

以下爲註冊頁面的js

//獲取頁面中的元素
var username=document.getElementById("username");
var password=document.getElementById("password");
var passwordTwo=document.getElementById("passwordTwo");
var setInput=document.getElementById("setInput");
//給註冊按鈕增加個點擊事件，判斷用戶名和密碼是否爲空，密碼和重複密碼是否一致，註冊成功跳轉
setInput.addEventListener("click",function () {
    if (username.value==""||password.value==""||passwordTwo.value==""){
        alert("用戶名以及密碼不能爲空");
    }else if (password.value!=passwordTwo.value) {
        alert("密碼和重複密碼不一致");
    }else {
        if (!tuust(username.value)){
            localStorage.username+=username.value+":"+password.value+";";
            location.href="enter.html";
            alert("恭喜，註冊成功");
        } else {
            alert("你輸入的用戶名已經被註冊");
            username.value="";
        }
    }
});
//創建一個方法，判斷註冊的用戶名是否被註冊
function tuust(value) {
    var dta=localStorage.username.split(";");
    for (let i=0;i<dta.length;i++){
        var arrPust=dta[i].split(":");
        if (arrPust[0]==value){
            return true;
        }
    }
    return false;
}