大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。--来自奔跑的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=" 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>