對(duì)于包含敏感信息或需要身份驗(yàn)證才能訪(fǎng)問(wèn)的網(wǎng)頁(yè)，密碼保護(hù)是一項(xiàng)重要的安全措施。如果您想在不使用服務(wù)器端語(yǔ)言的情況下為網(wǎng)頁(yè)添加額外的安全性，則可以使用 HTML、CSS 和 JavaScript 來(lái)密碼保護(hù)頁(yè)面。
本文將向您展示如何創(chuàng)建一個(gè)簡(jiǎn)單的表單，要求用戶(hù)輸入密碼才能查看受保護(hù)頁(yè)面的內(nèi)容。讓我們看看以下示例，以便更好地了解使用密碼保護(hù)頁(yè)面。
示例
在下面的示例中，我們正在運(yùn)行腳本并保護(hù)網(wǎng)頁(yè)；如果用戶(hù)嘗試訪(fǎng)問(wèn)該網(wǎng)頁(yè)，則會(huì)提示他們輸入密碼。
<!DOCTYPE html>
<html>
<body>
<script>
var password = "tutorial";
(function passcodeprotect() {
var passcode = prompt("Enter PassCode");
while (passcode !== password) {
alert("Incorrect PassCode");
return passcodeprotect();
}
}());
alert('Welcome To The TP..!');
</script>
</body>
</html>
登錄后復(fù)制
執(zhí)行腳本時(shí)，它將生成一個(gè)輸出，顯示一條要求輸入密碼的警報(bào)。當(dāng)用戶(hù)匹配密碼（“教程”）時(shí)，會(huì)顯示一條消息；否則，網(wǎng)頁(yè)上會(huì)顯示錯(cuò)誤的密碼。
示例
考慮以下示例，我們?yōu)檩斎氲拿艽a創(chuàng)建一個(gè)輸入字段，以保護(hù)網(wǎng)頁(yè)以及單擊按鈕。
<!DOCTYPE HTML>
<html>
<body>
<center>
<input type="password" placeholder="passcode" id="tutorial">
<button onclick="protectpasscode()">CHECK</button>
<script>
function protectpasscode() {
const result = document.getElementById("tutorial").value;
let passcode = 12345;
let space = '';
if (result == space) {
alert("Type passcode")
} else {
if (result == passcode) {
document.write("<center><h1>TP, The Best E-Learning </h1></center>");
} else {
alert("Incorrect Passcode");
location.reload();
}
}
}
</script>
</center>
</body>
</html>
登錄后復(fù)制
運(yùn)行上述腳本時(shí)，將彈出輸出窗口，顯示用于輸入密碼的輸入字段以及網(wǎng)頁(yè)上的單擊按鈕。如果用戶(hù)匹配密碼（12345），它將打開(kāi)由文本組成的表單；否則，將顯示錯(cuò)誤的密碼。
示例
執(zhí)行下面的示例，我們?cè)谄渲羞\(yùn)行腳本以保護(hù)網(wǎng)頁(yè)在執(zhí)行腳本后不顯示其內(nèi)容。
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
Enter Password:
<input type='text' value='' id='input'><br><br>
<input type='checkbox' onclick='protectpasscode()'>Show results
<p id='tutorial' style='display:none; color: black;'>Mahendra Singh Dhoni, also known as MS Dhoni, is an Indian former international
cricketer who was captain of the Indian national cricket team in limited-overs formats
from 2007 to 2017 and in Test cricket from 2008 to 2014. </p>
<script>
function protectpasscode() {
var a = document.getElementById('input');
var b = document.getElementById('tutorial');
if (a.value === '54') {
b.style.display = 'block';
} else {
b.style.display = 'none';
}
}
</script>
</body>
</html>
登錄后復(fù)制
執(zhí)行腳本時(shí)，它將生成一個(gè)輸出，顯示用于輸入密碼的輸入字段和網(wǎng)頁(yè)上的切換復(fù)選框。當(dāng)用戶(hù)匹配密碼（54）并切換復(fù)選框時(shí)，就會(huì)顯示網(wǎng)頁(yè)內(nèi)的內(nèi)容。
以上就是如何僅使用 HTML、CSS 和 JavaScript 來(lái)密碼保護(hù)頁(yè)面？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
