先看效果：
前言：
一般在我們要輸入密碼的時候都可以讓自己輸入的密碼顯示或者隱藏，所以我做了一個簡約的密碼框~
實現：
- 定義html的輸入框的標簽，kuang為底層盒子，password為輸入框，conceal是那個小眼睛按鈕：
<div class="kuang">
<input type="password" placeholder=" 請輸入密碼......" id='password' >
<div class="conceal" id='conceal'></div>
</div>
type=“password” 定義該字段中的字符被掩碼。
placeholder=" 請輸入密碼…" 提供可描述輸入字段預期值的提示信息。該提示會在輸入字段為空時顯示，並會在字段獲得焦點時消失。
- 定義kuang的基本樣式,長,寬,陰影等等：
.kuang{
position: relative;
width: 380px;
height: 60px;
border-radius: 5px;
box-shadow: inset 5px 5px 10px rgba(204, 197, 197,.5),
inset -5px -5px 8px rgba(204, 197, 197,.5);
}
- 定義input輸入框的基本樣式:
.kuang input{
position: absolute;
top: 0;
left: 20px;
height: 100%;
width: 300px;
font-size: 18px;
outline: none;
border: none;
background-color:transparent;
}
.kuang input::placeholder{
color: rgba(68, 67, 67,.8);
}
background-color:transparent;背景色為透明;
::placeholder 其作用可以改變input輸入框里的文本顏色,大小,是否傾斜等等…詳細用法
- 眼睛按鈕的樣式,一開始是閉眼的圖片:
.conceal{
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
background-image: url(mima/xianshi.png);
background-size: 100% 100%;
cursor: pointer;
}
- js實現,點擊小眼睛按鈕時進行判斷,通過改變type屬性的值為text或者password而實現字符是呈現顯示還是隱藏狀態,按鈕通過新類的添加或者移除呈現眼睛狀態的呈現:
<script>
var password = document.getElementById('password');
var anniu = document.getElementById('conceal');
anniu.addEventListener('click',function(){
if(password.type==='password')
{
password.setAttribute('type','text');
anniu.classList.add('yincang');
}else{
password.setAttribute('type','password');
anniu.classList.remove('yincang');
}
})
</script>
setAttribute() 方法添加指定的屬性，並為其賦指定的值。
classList屬性：
add(class1, class2, …) 在元素中添加一個或多個類名。如果指定的類名已存在，則不會添加；remove(class1, class2, …) 移除元素中一個或多個類名。
- 更換小眼睛的圖片:
.conceal.yincang{
background-image: url(mima/yincang.png);
background-size: 100% 100%;
}
完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; align-items: center; justify-content: center; } .kuang{ position: relative; width: 380px; height: 60px; border-radius: 5px; /* background-color: rgba(204, 197, 197,.5); */ box-shadow: inset 5px 5px 10px rgba(204, 197, 197,.5), inset -5px -5px 8px rgba(204, 197, 197,.5); } .kuang input{ position: absolute; top: 0; left: 20px; height: 100%; width: 300px; font-size: 18px; outline: none; border: none; background-color:transparent; } .kuang input::placeholder{ color: rgba(68, 67, 67,.8); } .conceal{ position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; background-image: url(mima/xianshi.png); background-size: 100% 100%; cursor: pointer; } .conceal.yincang{ background-image: url(mima/yincang.png); background-size: 100% 100%; } </style>
</head>
<body>
<div class="kuang">
<input type="password" placeholder=" 請輸入密碼......" id='password' >
<div class="conceal" id='conceal'></div>
</div>
<script> var password = document.getElementById('password'); var anniu = document.getElementById('conceal'); anniu.addEventListener('click',function(){ if(password.type==='password') { password.setAttribute('type','text'); anniu.classList.add('yincang'); }else{ password.setAttribute('type','password'); anniu.classList.remove('yincang'); } }) </script>
</body>
</html>
總結:
我發現聽些愉悅的音樂心情會好上許多~
就比如此刻的我~
聽着音樂，寫着文章~
生活或許挺好~
