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

js 实现密码框的查看和隐藏的更多相关文章

  1. js关于密码框强弱度的提示

    三种密码强度的正则表达式: 较弱:全是数字或全是字母 6-16个字符:/^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/; 中级:数字.26个英文字母 6-16个字符: /^[A-Za- ...

  2. Jquery 实现密码框的显示与隐藏【转载自http://blog.csdn.net/fengzhishangsky/article/details/11809069】

    <html> <head>  <script type="text/JavaScript"  src="jQuery-1.5.1.min.j ...

  3. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

  4. spring mvc：常用标签库(文本框，密码框，文本域，复选框，单选按钮，下拉框隐藏于，上传文件等)

    在jsp页面需要引入:<%@taglib uri="http://www.springframework.org/tags/form" prefix="form&q ...

  5. jquery 实现 <imput>标签 密码框显示/隐藏密码功能

    1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...

  6. 表单form的属性，单行文本框、密码框、单选多选按钮

    基础表单结构: <body> <h1> <hr /> <form action="" name="myFrom" en ...

  7. WPF文本框密码框添加水印效果

    WPF文本框密码框添加水印效果 来源: 阅读:559 时间:2014-12-31 分享: 0 按照惯例,先看下效果 文本框水印 文本框水印相对简单,不需要重写模板,仅仅需要一个VisualBrush ...

  8. [Asp.net]说说密码框和只读框

    作者:Wolfy出处:http://www.cnblogs.com/wolf-sun/ 引言 最近负责了一个公司的小项目,从前台到后代,都是自己搞的,为一个客户弄一个信息管理的小系统,虽然对界面什么的 ...

  9. WPF 之 文本框及密码框添加水印效果

    1.文本框添加水印效果 文本框水印相对简单,不需要重写模板,仅仅需要一个 VisualBrush 和触发器验证一下Text是否为空即可. <TextBox Name="txtSerac ...

  10. jquery实现密码框显示提示文字

    jquery实现密码框提示文字的功能. 代码:    <html>  <head>   3 <title>登录-jquery实现密码框显示文字-www.jbxue. ...

随机推荐

  1. opencv实现数据增强（图片+标签）平移，翻转，缩放，旋转

    面试问到了,让手撕数据增强,图片+标签.这里整理一下,直接上代码. import math import cv2 import numpy as np def pan(img, anns, size= ...

  2. 争论不休的一个话题：金额到底是用Long还是BigDecimal？

    在网上一直流传着一个争论不休的话题:金额到底是用Long还是用BigDecimal?这个话题一出在哪都会引起异常无比激烈的讨论.... 比如说这个观点:算钱用BigDecimal是常识 有支持用Lon ...

  3. 基础 IO (Linux学习笔记)

    基础IO 1.重谈文件 空文件在磁盘也要占据空间 文件 = 内容 + 属性 文件操作 = 对文件内容+对属性 or 对文件内容加属性 标定一个文件,必须使用文件路径加文件名[唯一性] 如果没有指明对应 ...

  4. mysql错误ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

  5. DC-1渗透靶场实战速通版

    "感谢您阅读本篇博客!如果您觉得本文对您有所帮助或启发,请不吝点赞和分享给更多的朋友.您的支持是我持续创作的动力,也欢迎留言交流,让我们一起探讨技术,共同成长!谢谢!" 文章为速通 ...

  6. 有效预警6要素：亿级调用量的阿里云弹性计算SRE实践

    简介: 关注保持良好的预警处理,持续解决系统隐患,促进系统稳定健康发展. 编者按:随着分布式系统和业务需求的飞速发展,监控告警在我们保障系统稳定性和事故快速恢复的全周期中都是至关重要的.9月3号,阿里 ...

  7. 一套 SQL 搞定数据仓库？Flink有了新尝试

    数据仓库是公司数据发展到一定规模后必然需要提供的一种基础服务,也是"数据智能"建设的基础环节.迅速获取数据反馈不仅有利于改善产品及用户体验,更有利于公司的科学决策,因此获取数据的实 ...

  8. SAE助力「海底小纵队学英语」全面拥抱Serverless，节省25%以上成本

    简介: 阿里云Serveless应用引擎SAE 具备免运维IaaS.按需使用.按量计费.低门槛服务应用上云,并且支持多种语言和高弹性能力等特点,刚好完美解决了客户长期以来运维复杂.资源利用率不高.开发 ...

  9. [FAQ] mogodb Robo3T 客户端全屏后 怎么退出全屏

    mongodb 的 Robo3T 客户端: 如果是不小心全屏了,不用担心,按 F11 恢复. 如果想要全屏,也是按 F11. Link:https://www.cnblogs.com/farwish/ ...

  10. boom lab分析

    单步调试: (gdb) bt #1 0x0000000000401347 in strings_not_equal () #2 0x0000000000400eee in phase_1 () #3 ...