javascript實(shí)現(xiàn)京東登錄顯示隱藏密碼
本文實(shí)例為大家分享了javascript仿京東登錄顯示隱藏密碼的具體代碼,供大家參考,具體內(nèi)容如下



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="images/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
// 1. 獲取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2. 注冊事件 處理程序
var flag = 0;
eye.onclick = function() {
// 點(diǎn)擊一次之后, flag 一定要變化
if (flag == 0) {
pwd.type = 'text';
eye.src = 'images/open.png';
flag = 1; // 賦值操作
} else {
pwd.type = 'password';
eye.src = 'images/close.png';
flag = 0;
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js逆向解密之網(wǎng)絡(luò)爬蟲
- Js逆向?qū)崿F(xiàn)滑動驗(yàn)證碼圖片還原的示例代碼
- JS正則表達(dá)式驗(yàn)證密碼強(qiáng)度
- js判斷密碼強(qiáng)度的方法
- js實(shí)現(xiàn)登錄時(shí)記住密碼的方法分析
- JS實(shí)現(xiàn)表單中點(diǎn)擊小眼睛顯示隱藏密碼框中的密碼
- javascript實(shí)現(xiàn)前端input密碼輸入強(qiáng)度驗(yàn)證
- JS實(shí)現(xiàn)密碼框效果
- JavaScript實(shí)現(xiàn)密碼框輸入驗(yàn)證
- JavaScript逆向案例之如何破解登錄密碼
相關(guān)文章
基于javascript制作經(jīng)典傳統(tǒng)的拼圖游戲
這篇文章主要為大家詳細(xì)介紹了基于javascript制作拼圖游戲的相關(guān)內(nèi)容,經(jīng)典傳統(tǒng)的拼圖游戲是大家最喜愛的游戲之一,具有挑戰(zhàn)性,感興趣的小伙伴們可以參考一下2016-03-03
JS+CSS實(shí)現(xiàn)隨機(jī)點(diǎn)名(實(shí)例代碼)
本文通過js html和cass代碼實(shí)現(xiàn)了隨機(jī)點(diǎn)名效果,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2019-11-11
JavaScript創(chuàng)建對象的七種經(jīng)典方式分享
JavaScript 創(chuàng)建對象的方式有很多,通過 Object 構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個(gè)對象,顯然這兩種方式會產(chǎn)生大量的重復(fù)代碼,并不適合量產(chǎn)。本文介紹了七種非常經(jīng)典的創(chuàng)建對象的方式,希望對大家有所幫助2022-11-11
KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流if綁定和ifnot綁定
這篇文章主要介紹了KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流if綁定和ifnot綁定的相關(guān)資料,需要的朋友可以參考下2016-10-10
js實(shí)現(xiàn)網(wǎng)頁標(biāo)題欄閃爍提示效果實(shí)例分析
這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)頁標(biāo)題欄閃爍提示效果的方法,以實(shí)例形式分析了網(wǎng)上比較常見的實(shí)現(xiàn)方法,并對于原理進(jìn)行分析并加以改進(jìn),最后給出了一個(gè)具體的應(yīng)用實(shí)例供大家參考,需要的朋友可以參考下2014-11-11
javascript保留兩位小數(shù)的實(shí)現(xiàn)方法你了解嗎
這篇文章主要為大家介紹了javascript保留兩位小數(shù)的實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-01-01
如何用JS WebSocket實(shí)現(xiàn)簡單聊天
這篇文章主要介紹了如何用JS WebSocket實(shí)現(xiàn)簡單聊天,對websocket感興趣的同學(xué),可以參考下2021-05-05

