大江東去，浪淘盡，千古風流人物。故壘西邊，人道是，三國周郎赤壁。亂石穿空，驚濤拍岸，卷起千堆雪。江山如畫，一時多少豪傑。遙想公瑾當年，小喬初嫁了，雄姿英發。羽扇綸巾，談笑間，檣櫓灰飛煙滅。故國神游，多情應笑我，早生華發。人生如夢，一尊還酹江月。--來自奔跑的panda部落，panda每天與您一起進步
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 li { 8 list-style: none; 9 } 10 11 .wrap input { 12 13 border: none; 14 border-bottom: 1px solid #999999; 15 outline: none; 16 17 } 18 .wrap li{ 19 position: relative; 20 width: 200px; 21 } 22 .img{ 23 width: 20px; 24 height: 20px; 25 position: absolute; 26 right: 10px; 27 top: 0; 28 } 29 </style> 30 </head> 31 <body> 32 33 <div class="wrap"> 34 <li> 35 <input type="password" name="" id="psd" value="" placeholder="密碼框" /> 36 <div class="img"> 37 <img src="img/hide.png" style="width: 100%;" id="img"> 38 </div> 39 </li> 40 </div> 41 <script type="text/javascript"> 42 var pwd = document.getElementById('psd'); 43 var img = document.getElementById('img'); 44 var flag = 0; 45 img.onclick = function(){ 46 if(flag == 0){ 47 pwd.type = 'text' 48 img.src = 'img/show.png' 49 flag = 1 50 }else{ 51 pwd.type = 'password' 52 img.src = 'img/hide.png' 53 flag = 0; 54 55 } 56 } 57 58 </script> 59 </body> 60 </html>