??這是我在博客園的第一篇博客，也是我人生中的第一篇博客。希望它能夠記錄我的成長，幫助更多的人。

??最近在寫我們社團(tuán)的社團(tuán)網(wǎng)站，有一個(gè)頁面不太希望普通訪客能訪問到,所以想做一個(gè)“統(tǒng)一身份驗(yàn)證驗(yàn)證”，但是又苦于社團(tuán)網(wǎng)站搭建是純靜態(tài)站，沒法做數(shù)據(jù)庫，只能妥協(xié)，將賬號密碼字符串組寫到JavaScript腳本里，最后再混淆加密。當(dāng)然，現(xiàn)在我已經(jīng)找到了更好的方法，可惜暫時(shí)沒有時(shí)間完成，我將在后文簡述思路，如有可能，我會(huì)另開一篇新方法實(shí)現(xiàn)過程。

??思路如下：

????1.首先建立一個(gè)遮罩層擋住你要驗(yàn)證后才能看的內(nèi)容

????2.建立一個(gè)form表單，為其賦予name

????3.然后在表單中添加input密碼賬號輸入框，同時(shí)分別建立id（password、account）

????4.在提交按鈕上使用onclick綁定驗(yàn)證函數(shù)

????5.按下提交按鈕時(shí)，啟動(dòng)驗(yàn)證函數(shù)

????6.驗(yàn)證函數(shù)通過.account.value方式分別獲取用戶在input密碼賬號輸入框中輸入的內(nèi)容

????7.首先查詢賬號，如果賬號在account list中，獲取其在列表的位數(shù)

????8.在password list中查詢同位數(shù)據(jù)，將其與讀取到的用戶輸入的密碼比較

????9.如果正確，關(guān)閉遮罩層，顯示內(nèi)容

????.......

??雖然我主要想分享實(shí)現(xiàn)思路，但是想了一下還是把完整的一些樣式給出來吧，畢竟我在學(xué)習(xí)借鑒的時(shí)候被很多只給代碼，樣式半保留，混亂的代碼折磨了很久......

??具體實(shí)現(xiàn)如下：

CSS部分

/* 遮罩層，用于擋住內(nèi)容 */
#overlayverify {
	position: fixed;
	left: 0px;
	top: 0px;
	height: 100%;
	background-color: #cccccc;
	z-index: 100
}

/* 模態(tài)框主體 */
.popup {
  background-color: #ffffff;
  height: 430px;
  border-radius: 5px;
  margin: 100px auto;
  text-align: center
}

/* 模態(tài)框的標(biāo)題 */
.popup_title {
  height: 60px;
  line-height: 60px;
  border-bottom: solid 1px #cccccc
}

/* 模態(tài)框的內(nèi)容 */
.popup_content {
  text-align: left;
  margin: 0 auto;
  width: 90%;
  height: 200px;
  line-height: 45px;
  padding: 10px 20px;
  text-indent:2em
}
.popup_line{
  margin: 0 auto;
  height: 20px;
  width: 85%;
  border-bottom: 1px solid #dbdbdb
}

/* 模態(tài)框的按鈕欄 */
.popup_btn {
  padding-top: 30px
}

/* 彈出框的按鈕 */
.popup_btn button.ds {
  color: #778899;
  width: 40%;
  height: 40px;
  cursor: pointer;
  border: solid 1px #cccccc;
  border-radius: 5px;
  margin: 5px 10px;
  color: #ffffff;
  background-color: rgb(150,150,150)
}

.popup_btn button.ag {
    color: #778899;
    width: 40%;
    height: 40px;
    cursor: pointer;
    border: solid 1px #cccccc;
    border-radius: 5px;
    margin: 5px 10px;
    color: #ffffff;
    background-color: #337ab7
  }

?

HTML部分

<script src="https://new.hkems-stmo.top/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css"  />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--調(diào)用需要的框架文件-->

<div class="container">
  <div class="row">
    <div id="overlayverify" style="display: block;">
      <!--建立遮罩層擋住內(nèi)容-->

      <div class="col-sm-2 col-lg-4"></div>
      <!--bootstarp框架，用于調(diào)節(jié)樣式-->

      <div class="popup col-sm-8 col-lg-4">
        <!--建立一個(gè)模態(tài)框-->

        <p class="popup_title">統(tǒng)一身份驗(yàn)證驗(yàn)證</p>
        <p class="popup_content overflow-auto" style="line-height: 40px;">歡迎訪問科技社規(guī)劃備忘錄，在進(jìn)行瀏覽前，我們需要驗(yàn)證你的身份。</p>
        <!--說明-->

        <form name="AandP" style="margin-top: -20%;">
          <!--建立名為AandP的表單（Account and Password），容納用戶輸入進(jìn)輸入框的內(nèi)容-->

          <input class="form-control signinput" id="account" placeholder="請輸入賬號："
            style="width: 80%;margin-left: 10%;margin-bottom: 15px;" />
          <input class="form-control" id="password" type="password" placeholder="請輸入密碼"
            style="width: 80%;margin-left: 10%;margin-bottom: 10px;" />
          <!--分別設(shè)置了賬號密碼的輸入框，各自用id="xxx"來標(biāo)識-->
        </form>

        <div id="out" style="color: red;"></div>
        <!--建立一個(gè)id為out的輸出反饋的div，登陸失敗等信息被寫入到這-->

        <div class="popup_line"></div>
        <div class="popup_btn" style="margin-top: -20px;">
          <button class="cancelBtn ds overflow-hidden" onclick="dontknow()">我不知道密碼</button>
          <button class="confirmBtn ag overflow-hidden" onclick="verify()">驗(yàn)證并訪問</button>
          <!--用onclick綁定函數(shù)，點(diǎn)擊按鈕運(yùn)行onclick指定的函數(shù)-->

        </div>
      </div>
      <div class="col-sm-2 col-lg-4"></div>
      <!--bootstarp框架，用于調(diào)節(jié)樣式-->
    </div>
  </div>
</div>
<div>
  <!--在這里寫入你想在通過驗(yàn)證之后展示的內(nèi)容-->
</div>

Javascript部分

var testV = 3;
/*定義最高嘗試次數(shù)*/
var error = 0;
/*定義初始錯(cuò)誤量*/
var accountlist = ['賬戶1', '賬戶2', '賬戶3', '賬戶4'];
var passwordlist = ['密碼1', '密碼2', '密碼3', '密碼4'];
/*定義賬號密碼列表*/
function verify() {
/*用戶提交驗(yàn)證*/
    var account = AandP.account.value;
    var password = AandP.password.value;
    /*從AandP表單里獲取用戶輸入的賬號密碼，為相應(yīng)的變量名賦值*/
    if(testV > 1){
    /*如果嘗試機(jī)會(huì)>1*/
        if(accountlist.indexOf(account) == -1){
            /*則使用accountlist.indexOf(account)方法獲得輸入的用戶名在用戶列表的位數(shù)，用if語句判斷如果等于-1（即不存在）*/
            error += 1;
            /*則使error變量+1*/
        }
        else{
        /*如果不等于-1，即意味著用戶輸入的用戶名存在，就可以接著進(jìn)行密碼的核驗(yàn)*/
            var Correspondingpassword = passwordlist[accountlist.indexOf(account)];
            /*用 列表名[位數(shù)（通過accountlist.indexOf(account)獲得）] 方法查詢到用戶輸入的用戶名相對應(yīng)的密碼，賦入Correspondingpassword變量*/
            if(Correspondingpassword == password){
                out.innerHTML = '賬號密碼正確，驗(yàn)證通過';
            }
            /*將用戶輸入的密碼與查詢到與用戶輸入的用戶名相對應(yīng)的密碼對比，如果成功則用innerHTML將提示輸出到id為out的塊組件*/
            else{
                error += 1;
            }
            /*如果不匹配，對error變量+1*/
        }
        if(error != 0){
        /*驗(yàn)證部分結(jié)束。如果error變量不等于零，即至少發(fā)生了賬號錯(cuò)誤或賬號密碼不匹配中的一個(gè)事件：*/
            testV -= 1
            out.innerHTML = '賬號或密碼錯(cuò)誤，你還剩'+ testV+ '次機(jī)會(huì)';
            /*讓嘗試次數(shù)testV-1，然后用innerHTML將提示輸出到id為out的塊組件*/
        }
        else{
        /*如果error變量等于零，則驗(yàn)證成功*/
            overlayverify.style.display = "none";
            /*為擋住頁面的模態(tài)框?qū)懭搿癲isplay:none”的樣式，使其消失*/
        }
    }
    else{
    /*如果嘗試機(jī)會(huì)<1，即沒有嘗試機(jī)會(huì)了*/
        out.innerHTML = '登陸凍結(jié)，請刷新或聯(lián)系管理員';
        /*用innerHTML將提示輸出到id為out的塊組件*/
    }
    document.getElementById("AandP").reset();
    /*重置用戶輸入的數(shù)據(jù)*/
}

function dontknow() {
    /*用戶不知道密碼*/
    window.location.href = '其他頁面的url'
    /*跳轉(zhuǎn)到其他頁面*/
}

JavaScript在錄入賬號密碼后可以進(jìn)行混淆加密。

注意：?。?！bootstarp框架應(yīng)在合理位置放置，否則會(huì)發(fā)生錯(cuò)誤！

完整示例

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="page-enter" content="revealTrans(duration=5.0,transition=20)">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>身份驗(yàn)證頁(頁面標(biāo)題)</title>
    <link rel="prefetch" href="/images/UI/logo-big.png">
    <link rel="prefetch" href="/function/header.html">
    <link rel="prefetch" href="/function/footer.html">
    <meta name="keywords" content="關(guān)鍵詞,發(fā)布于恍惚交錯(cuò)落花雨的博客園,禁止CSDN轉(zhuǎn)載" />
    <meta name="description" content="簡介" />
    <meta name="revised" content="MQSI, 2023年9月25日" />
    <meta name="author" content="MQSI, maqingshui@outlook.com">
    <meta name="renderer" content="webkit">
    <meta name="copyright" content="本示例網(wǎng)頁版權(quán)歸恍惚交錯(cuò)落花雨所有，禁止CSDN轉(zhuǎn)載">
    <!--以上標(biāo)識頭可以不保留-->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" type="text/css"  />
    <script src="https://new.hkems-stmo.top/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!--調(diào)用需要的框架文件-->

    <style>
        /* 遮罩層，用于擋住內(nèi)容 */
        #overlayverify {
            position: fixed;
            left: 0px;
            top: 0px;
            height: 100%;
            background-color: #cccccc;
            z-index: 100
        }

        /* 模態(tài)框主體 */
        .popup {
            background-color: #ffffff;
            height: 430px;
            border-radius: 5px;
            margin: 100px auto;
            text-align: center
        }

        /* 模態(tài)框的標(biāo)題 */
        .popup_title {
            height: 60px;
            line-height: 60px;
            border-bottom: solid 1px #cccccc
        }

        /* 模態(tài)框的內(nèi)容 */
        .popup_content {
            text-align: left;
            margin: 0 auto;
            width: 90%;
            height: 200px;
            line-height: 45px;
            padding: 10px 20px;
            text-indent: 2em
        }

        .popup_line {
            margin: 0 auto;
            height: 20px;
            width: 85%;
            border-bottom: 1px solid #dbdbdb
        }

        /* 模態(tài)框的按鈕欄 */
        .popup_btn {
            padding-top: 30px
        }

        /* 彈出框的按鈕 */
        .popup_btn button.ds {
            color: #778899;
            width: 40%;
            height: 40px;
            cursor: pointer;
            border: solid 1px #cccccc;
            border-radius: 5px;
            margin: 5px 10px;
            color: #ffffff;
            background-color: rgb(150, 150, 150)
        }

        .popup_btn button.ag {
            color: #778899;
            width: 40%;
            height: 40px;
            cursor: pointer;
            border: solid 1px #cccccc;
            border-radius: 5px;
            margin: 5px 10px;
            color: #ffffff;
            background-color: #337ab7
        }
    </style>
    <script>
        var testV = 3;
        /*定義最高嘗試次數(shù)*/
        var error = 0;
        /*定義初始錯(cuò)誤量*/
        var accountlist = ['賬戶1', '賬戶2', '賬戶3', '賬戶4'];
        var passwordlist = ['密碼1', '密碼2', '密碼3', '密碼4'];
        /*定義賬號密碼列表*/
        function verify() {
            /*用戶提交驗(yàn)證*/
            var account = AandP.account.value;
            var password = AandP.password.value;
            /*從AandP表單里獲取用戶輸入的賬號密碼，為相應(yīng)的變量名賦值*/
            if (testV > 1) {
                /*如果嘗試機(jī)會(huì)>1*/
                if (accountlist.indexOf(account) == -1) {
                    /*則使用accountlist.indexOf(account)方法獲得輸入的用戶名在用戶列表的位數(shù)，用if語句判斷如果等于-1（即不存在）*/
                    error += 1;
                    /*則使error變量+1*/
                }
                else {
                    /*如果不等于-1，即意味著用戶輸入的用戶名存在，就可以接著進(jìn)行密碼的核驗(yàn)*/
                    var Correspondingpassword = passwordlist[accountlist.indexOf(account)];
                    /*用 列表名[位數(shù)（通過accountlist.indexOf(account)獲得）] 方法查詢到用戶輸入的用戶名相對應(yīng)的密碼，賦入Correspondingpassword變量*/
                    if (Correspondingpassword == password) {
                        out.innerHTML = '賬號密碼正確，驗(yàn)證通過';
                    }
                    /*將用戶輸入的密碼與查詢到與用戶輸入的用戶名相對應(yīng)的密碼對比，如果成功則用innerHTML將提示輸出到id為out的塊組件*/
                    else {
                        error += 1;
                    }
                    /*如果不匹配，對error變量+1*/
                }
                if (error != 0) {
                    /*驗(yàn)證部分結(jié)束。如果error變量不等于零，即至少發(fā)生了賬號錯(cuò)誤或賬號密碼不匹配中的一個(gè)事件：*/
                    testV -= 1
                    out.innerHTML = '賬號或密碼錯(cuò)誤，你還剩' + testV + '次機(jī)會(huì)';
                    /*讓嘗試次數(shù)testV-1，然后用innerHTML將提示輸出到id為out的塊組件*/
                }
                else {
                    /*如果error變量等于零，則驗(yàn)證成功*/
                    overlayverify.style.display = "none";
                    /*為擋住頁面的模態(tài)框?qū)懭搿癲isplay:none”的樣式，使其消失*/
                }
            }
            else {
                /*如果嘗試機(jī)會(huì)<1，即沒有嘗試機(jī)會(huì)了*/
                out.innerHTML = '登陸凍結(jié)，請刷新或聯(lián)系管理員';
                /*用innerHTML將提示輸出到id為out的塊組件*/
            }
            document.getElementById("AandP").reset();
            /*重置用戶輸入的數(shù)據(jù)*/
        }

        function dontknow() {
            /*用戶不知道密碼*/
            window.location.href = '其他頁面的url'
            /*跳轉(zhuǎn)到其他頁面*/
        }
    </script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div id="overlayverify" style="display: block;">
                <!--建立遮罩層擋住內(nèi)容-->
                <div class="col-sm-2 col-lg-4"></div>
                <!--bootstarp框架，用于調(diào)節(jié)樣式-->
                <div class="popup col-sm-8 col-lg-4">
                    <!--建立一個(gè)模態(tài)框-->
                    <p class="popup_title">統(tǒng)一身份驗(yàn)證驗(yàn)證</p>
                    <p class="popup_content overflow-auto" style="line-height: 40px;">歡迎訪問科技社規(guī)劃備忘錄，在進(jìn)行瀏覽前，我們需要驗(yàn)證你的身份。
                    </p>
                    <!--說明-->
                    <form name="AandP" style="margin-top: -20%;">
                        <!--建立名為AandP的表單（Account and Password），容納用戶輸入進(jìn)輸入框的內(nèi)容-->
                        <input class="form-control signinput" id="account" placeholder="請輸入賬號："
                            style="width: 80%;margin-left: 10%;margin-bottom: 15px;" />
                        <input class="form-control" id="password" type="password" placeholder="請輸入密碼"
                            style="width: 80%;margin-left: 10%;margin-bottom: 10px;" />
                        <!--分別設(shè)置了賬號密碼的輸入框，各自用id="xxx"來標(biāo)識-->
                    </form>
                    <div id="out" style="color: red;"></div>
                    <!--建立一個(gè)id為out的輸出反饋的div，登陸失敗等信息被寫入到這-->
                    <div class="popup_line"></div>
                    <div class="popup_btn" style="margin-top: -20px;">
                        <button class="cancelBtn ds overflow-hidden" onclick="dontknow()">我不知道密碼</button>
                        <button class="confirmBtn ag overflow-hidden" onclick="verify()">驗(yàn)證并訪問</button>
                        <!--用onclick綁定函數(shù)，點(diǎn)擊按鈕運(yùn)行onclick指定的函數(shù)-->
                    </div>
                </div>
                <div class="col-sm-2 col-lg-4"></div>
                <!--bootstarp框架，用于調(diào)節(jié)樣式-->
            </div>
        </div>
    </div>
    <div>
        <p>本示例網(wǎng)頁版權(quán)歸恍惚交錯(cuò)落花雨所有，禁止CSDN轉(zhuǎn)載</p>
        <!--在這里寫入你想在通過驗(yàn)證之后展示的內(nèi)容-->
    </div>
</body>

</html>

優(yōu)點(diǎn)：好像沒什么優(yōu)點(diǎn)....

缺點(diǎn)：防防不懂技術(shù)的得了......懂技術(shù)的直接就把遮罩層刪了。

當(dāng)然現(xiàn)在這段代碼可以改裝一下連上數(shù)據(jù)庫來查詢，這樣就會(huì)變得較為安全可靠。

?

希望這篇文章能幫到大家，也希望大家能指出我的不足之處。

本人自學(xué)野路子，文中部分用語不規(guī)范，求各位大佬輕噴。

?

轉(zhuǎn)載請取得同意并標(biāo)明原作者。禁止轉(zhuǎn)載至CSDN。

恍惚交錯(cuò)落花雨

2023年9月25日文章來源地址http://www.zghlxwxcb.cn/news/detail-710182.html

到了這里，關(guān)于使用CSS、HTML、JavaScript實(shí)現(xiàn)一個(gè)簡單的身份驗(yàn)證頁的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！