HTML密碼鎖是一種常見的網頁安全技術，可以用來保護隱私內容的安全性。下面是一個基于HTML語言的密碼鎖代碼的示例：
<!DOCTYPE html>
<html>
<head>
<title>密碼鎖</title>
<style>
.lock {
margin: 100px auto;
width: 200px;
height: 150px;
border: 1px solid #000;
text-align: center;
padding: 40px 0;
position: relative;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.passwd {
margin: 20px auto;
display: inline-block;
width: 100px;
text-align: center;
border: 1px solid #000;
font-size: 20px;
line-height: 25px;
letter-spacing: 5px;
}
.unlock {
margin: 20px auto;
display: inline-block;
width: 80px;
height: 30px;
font-size: 16px;
border: none;
color: #fff;
background-color: #008CBA;
cursor: pointer;
}
.lock .hint {
position: absolute;
bottom: -20px;
width: 100%;
text-align: center;
font-size: 14px;
color: #f00;
}
</style>
</head>
<body>
<div class="lock">
<input type="text" class="passwd" id="password" placeholder="輸入密碼...></input>
<button class="unlock" id="unlock">解鎖</button>
<div class="hint" id="hint"></div>
</div>
<script>
var password = '12345';
var unlock_btn = document.getElementById('unlock');
var hint_box = document.getElementById('hint');
unlock_btn.addEventListener('click', function() {
var pwd_input = document.getElementById('password');
var pwd = pwd_input.value.trim();
if (pwd === password) {
hint_box.innerHTML = '密碼正確！';
} else {
hint_box.innerHTML = '密碼錯誤！';
}
});
</script>
</body>
</html>該代碼使用了HTML、CSS、JavaScript三種語言實現了一個簡單的密碼鎖功能。該代碼包括一個密碼輸入框、一個解鎖按鈕和一個提示信息框。用戶輸入密碼后，點擊解鎖按鈕會進行密碼校驗，如果密碼正確，則提示解鎖成功，否則提示解鎖失敗。
上一篇vue highmap
下一篇html怎么背景顏色代碼