黑马前端案例——模拟京东显示密码
生活随笔
收集整理的這篇文章主要介紹了
黑马前端案例——模拟京东显示密码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
模擬京東顯示密碼
- 點擊輸入密碼框后的眼睛改變輸入框的類型
- 實現效果
- 以下是我的代碼
點擊輸入密碼框后的眼睛改變輸入框的類型
這是pink老師的視頻中的一個案例，自己先做一遍再看老師的步驟，因為老師的視頻是幾年前的，以下是我看的代碼（寫的不太規范）
實現效果
圖片:
當密碼框的眼睛是閉上時，密碼不可見
點擊‘眼睛’，密碼可見:
以下是我的代碼
總：
<!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>* {padding: 0;margin: 0;}body {background-color: rgb(236, 236, 236);}li {list-style: none;}p {float: left;padding: 10px 0;width: 100%;font-size: 12px;background-color: #fff8f0;}a {text-decoration: none;}em {font-style: normal;}input::-ms-reveal {display: none;}/* 取消password的眼睛 */.box {margin: 10px auto;position: relative;text-align: center;width: 345px;height: 400px;background-color: white;}.atten {display: inline-block;vertical-align: middle;height: 16px;width: 16px;/* background-color: skyblue; */}.atten img {height: 100%;width: 100%;}.nav {display: flex;flex-direction: row;justify-content: space-around;height: 55px;width: 100%;background-color: #fff;border-bottom: 1px solid #f4f4f4;}.nav span {display: inline-block;width: 100%;font-size: 18px;font-weight: 500;color: #666;line-height: 55px;}/* .nav span:checked {font-weight: bolder;color: #e4393c;} */.nav span:first-child::after {float: right;content: '|';font-weight: lighter;color: #f4f4f4;}.center {position: relative;margin: 33px 19.5px 0 19.5px;width: 306px;height: 191.6px;/* background-color: skyblue; */}.center ul li {display: flex;align-items: center;margin-bottom: 20px;position: relative;/* display: inline-block; */width: 100%;height: 40px;/* background-color: slateblue; */border: 1px solid #bdbdbd;}.center ul li span {/* box-sizing: border-box; */float: left;width: 40px;height: 40px;border-right: 1px solid #bdbdbd;}.center ul li span img {height: 100%;width: 100%;}.center ul li input {border: 0;border-radius: 0;float: left;height: 100%;width: 265px;outline: none;/* background-color: pink; */}.center ul li input::placeholder {padding: 15px;font-weight: lighter;font-size: 13px;}.center ul li:nth-child(2) input {width: 225px;}.center ul li:nth-child(2) span:nth-of-type(2) {position: absolute;right: 10px;height: 18px;width: 18px;border: 0;/* background-color: pink; */}.forget {position: absolute;right: 0;bottom: 49px;/* background-color: slateblue; */color: #666;font-size: 8px;}.forget:focus-visible {text-decoration: underline;font-weight: bolder;color: #e4393c;}button {position: absolute;bottom: 0;left: 0;outline: none;width: 100%;height: 33px;font-size: 20px;/* font-weight: 600; */color: white;background-color: #e4393c;border: 1px solid #cb2a2d;border-radius: 0;}.footer {display: flex;align-items: center;padding: 0 20px;position: absolute;bottom: 0;border-top: 1px solid #f4f4f4;width: 305px;height: 50.78px;background-color: #fcfcfc;}.footer span {float: left;width: 49px;font-size: 5px;font-weight: lighter;color: #666;}.footer span em {display: inline-block;width: 19px;height: 19px;}.footer span:hover {color: #e4393c;text-decoration: underline;}.footer span em img {width: 100%;height: 100%;vertical-align: middle;}.footer .now {height: 16px;width: 70px;flex: 2;position: absolute;right: 20px;color: #e4393c;}.footer .now em {width: 16px;height: 16px;}</style> </head><body><div class="box"><p><span class="atten"><img src="../images/注意.png"></span> 京東不會以任何要求您轉賬匯款，精防詐騙</p><div class="nav"><span>掃碼登錄</span><span>賬戶登錄</span></div><div class="center"><ul><li><span><img src="../images/user.png"></span><input type="text" Placeholder='郵箱/用戶名/登錄手機'></li><li><span><img src="../images/keyword.png"></span><input type="password" placeholder="密碼"><span><img src="../images/no-see.png"></span></li></ul><a href="https://aq.jd.com/process/findPwd?s=1" class="forget">忘記密碼</a><button>登 錄</button></div><div class="footer"><span class="QQ"><em><img src="../images/QQ.png"></em>QQ</span><span>|</span><span class="wchat"><em><img src="../images/Wechat.png"></em>微信</span><span class='now'><em><img src="../images/注冊.png"></em>立即登錄</span></div></div><script>/* 獲取密碼‘眼睛’ */var eyes = document.querySelector('.center ul li:nth-child(2) span:nth-of-type(2) img')/* 獲取輸入密碼input */var input = document.querySelector('.center ul li:nth-child(2) input');console.log(input); /* 控制臺中驗證是否獲取input 不影響效果 可以刪掉 */console.log(eyes); /* 同上 *//*眼睛的變*/var flag = 1; /* flag標記眼睛狀態 初始默認為1閉眼 不可見密碼*/eyes.onclick = function() {if (flag == 0) {eyes.src = '../images/no-see.png';input.type = 'password';flag = 1;} else {eyes.src = '../images/see.png';input.type = 'text';flag = 0; /* 當第一次按下img后，flag設為0，使得下一次按動按鈕時 能將圖片地址轉換成 no-see.png地址*/}}</script> </body> </html>其他的樣式可以自己寫看看，主要是下面這幾個部分：
/*首先在<style></style>里取消網頁自帶的‘密碼是否可見’按鈕*/<style>input::-ms-reveal {display: none;}/* 取消password的眼睛 */</style>/*body中輸入密碼框部分*/<body><div class="center"><ul><li><span><img src="../images/keyword.png"></span><input type="password" placeholder="密碼"><span><img src="../images/no-see.png"></span>/*密碼框后面的‘眼睛’*/</li></ul></div>/*script中實現眼睛隨鼠標點擊改變狀態*/<scipt>/* 獲取輸入密碼框后的‘眼睛’圖片 括號內就是選擇的img*/var eyes = document.querySelector('.center ul li:nth-child(2) span:nth-of-type(2) img')/*解釋為：選擇class為center中的ul 里的第二個li 里的第二個span里的img圖片*//* 獲取輸入密碼input */var input = document.querySelector('.center ul li:nth-child(2) input');console.log(input); /* 控制臺中驗證是否獲取input 不影響效果 可以刪掉 */console.log(eyes); /* 同上 *//*眼睛的變換實際上是span標簽中img圖片的scr鏈接變化成另一個img圖片的鏈接 相當于換了一個圖片*/var flag = 1; /* flag標記眼睛狀態 初始默認為1閉眼 不可見密碼*//*當點擊eyes時*/eyes.onclick = function() {if (flag == 0) {eyes.src = '../images/no-see.png';/* 切換成'看不見'img */input.type = 'password';/* type為'password'的input標簽默認看不到輸入的字 */flag = 1;} else {eyes.src = '../images/see.png';input.type = 'text';/* type為'text'為可見輸入的字*/flag = 0; /* 當第一次按下img后，flag設為0，使得下一次按動按鈕時 能將圖片地址轉換成no-see.png圖片的地址*/}}</script></body>以上，寫的有點亂，希望能幫到和我一樣初學js的同學。
總結
以上是生活随笔為你收集整理的黑马前端案例——模拟京东显示密码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Win7关闭防火墙的脚本
- 下一篇： HTML常用标签或属性 英文全称和中文释