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

    目的 CockroachDB自 23.1开始,编译模式逐步放弃了Makefile,改用Bazel构建.实际上在23.1代码执行make buildshort 能够成功,但make build应该就会因 ...

  2. 使用 Docker 部署 TailChat 开源即时通讯平台

    1)介绍 TailChat 官网: https://tailchat.msgbyte.com/ 作者:https://www.moonrailgun.com/about/ GitHub : https ...

  3. 第 4章 用 CSV 和 Excel 存储数据

    第4章 用 CSV 和 Excel 存储数据 4.1 用 CSV 文件存储数据 CSV(Comma-Separated Values)其实就是纯文本,用逗号分隔值,可以分隔成多个单元格.CSV 文件除 ...

  4. ECharts海量数据渲染解决卡顿的4种方式

    场景 周五进行需求评审的时候: 出现了一个图表,本身一个图表本没有什么稀奇的: 可是产品经理在图表的上的备注,让我觉得这个事情并不简单: 那个图表的时间跨度可以是月,年,而且时间间隔很短: 这让我意识 ...

  5. 基于阿里云GPU云服务器的AIACC助力UC搜索业务性能提效380%，每年节省数千万成本

    简介: 用阿里云GPU计算实例来满足UC极致性价比需求 文丨阿里云神龙计算平台AI加速团队 & UC搜索架构部推理引擎团队 导语:作为国产行列里占有率排名第一的移动浏览器,UC浏览器自身承载着 ...

  6. 深入分析 Flutter 渲染性能

    简介: Flutter 有很多优点,特别是对于开发者来说,跨平台多端支持,丰富的 UI 组件库和交互效果,声明式 UI,React 的更新方式,Hot-reload 提高开发效率等等.虽然它在渲染性能 ...

  7. 阿里云重磅发布业务中台产品 BizWorks，中台发展进入下一个阶段

    ​简介: 业务中台产品BizWorks重磅发布,这可以看作是阿里云在 "做厚中台" 战略上继 "云钉一体"之后的又一个新动作! 10 月 19 日,2021 云 ...

  8. [Rust] 在 Linux 和 Mac 安装 Rust

      首先,安装 rustup,这是一个 Rust 的安装程序. curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh cargo ...

  9. [Go] 有了 cast 组件, golang 类型转换从此不再困扰

    在 golang 中,参数和返回值之间往往涉及 int.string.[].map 等之间的转换. 如果是手动去处理,一容易出错,二不能兼容多数类型,比较麻烦. 使用 cast,能够让代码更健壮.可维 ...

  10. [FAQ] Smart Contract: xxx has not been deployed to detected network (network/artifact mismatch)

    在前端用 web3 与 contract 交互时,需要获取到已部署的 contract 实例进行操作,如果没有获取到就会报此错. 比如如下的 .deployed() 阶段: /* 伪代码 */ con ...