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

    前言 总结一下其中join连接. 正文 又到了盗图时刻: 上面标记好了顺序. 第一种: select * from A a left join B b on a.key=b.key 这里解释一下,这里 ...

  2. c# ref和out 详解

    前言 数据在内存中,存在两种状态,堆和栈中.堆中的数据是可以直接拿到的,一般称引用对象. 这些对象有一个特征,那就是经过函数处理之后,这些数据在主线程中改变了.好奇点好了,为什么栈中的数据就不会改变呢 ...

  3. 一道SQL面试题

    表结构如下 是一张递归格式的表 使用SQL转换成如下格式 SQL实现 使用SQL转换成上图的格式 SQL代码: WITH T_Recur AS ( SELECT Id,1 num, cast(name ...

  4. 二叉查找树的实现C/C++

    二叉查找树是一种关键字有序存放的二叉树.在不含重复关键字的二叉查找树中,关键字"较小"的节点一定在关键字"较大"的节点的左子树中,"较小"一 ...

  5. 传统 Web 框架部署与迁移

    简介: 与其说 Serverless 架构是一个新的概念,不如说它是一种全新的思路,一种新的编程范式. 与其说 Serverless 架构是一个新的概念,不如说它是一种全新的思路,一种新的编程范式. ...

  6. WPF 通过 GifBitmapDecoder 调用 WIC 解析 Gif 和进行动画播放的简单方法

    本文告诉大家如何在 WPF 里,通过 GifBitmapDecoder 调用 WIC 层来解析 GIF 图片,然后采用动画的方式进行播放 在上一篇博客告诉大家,可以通过 GifBitmapDecode ...

  7. dotnet 6 引用 NAudio 的旧版本构建不通过

    本文告诉大家在使用 NAudio 的旧版本导致构建不通过问题,解决方法是升级到 1.10 或以上版本 在更新 dotnet 6 项目时,使用了 NAudio 的旧版本,构建失败,提示 MC1000 如 ...

  8. WPF 创建空白图片

    本文告诉大家如何在 WPF 创建空白图片,可以创建1像素图片 可以使用 BitmapSource 的 Create 方法创建空白图片 // 限制不能创建小于2x2的图片 const int width ...

  9. LabView十六进制与字符串之间的转换

    一.准备工具 Labview开发软件 字符串与十六进制的转换工具(做测试使用) 在线转换工具:IEE754浮点数16进制转换 本地工具如下图所示: 二.LabView字符串转换为十六进制 在数值中选择 ...

  10. netcore热插拔dll

    项目中有有些场景用到反射挺多的,用到了反射就离不开dll的加载.此demo适用于通过反射dll运行项目中加载和删除,不影响项目. ConsoleApp: 1 using AppClassLibrary ...