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

    前言 因为最近公司有python项目维护,所以把python的基础入门的书整理一遍,因为有些忘记了,同时在看<<python编程>>这本书的时候觉得对有基础的有很多的赘余,打算 ...

  2. 力扣182(java&python)-数组元素积的符号（简单）

    题目: 已知函数 signFunc(x) 将会根据 x 的正负返回特定值: 如果 x 是正数,返回 1 .如果 x 是负数,返回 -1 .如果 x 是等于 0 ,返回 0 .给你一个整数数组 nums ...

  3. 牛客网-SQL专项训练9

    ①假设有选课表course_relation(student_id, course_id),其中student_id表示学号,course_id表示课程编号,如果小易现在想获取每个学生所选课程的个数信 ...

  4. 云原生消息队列Pulsar浅析

    简介: 云原生消息队列Pulsar浅析 一.前言 Pulsar是一个多租户,高性能的服务间消息解决方案.最初由Yahoo开发,现在由Apache Software Foundation负责.Pulsa ...

  5. Arthas 使用的各类方式

    简介: Arthas 是阿里巴巴开源的 Java 诊断工具.让我们能够在线排查项目发生的问题.除了知道它的存在之外,我们也需要知道我们如何去安装使用它,以便于提高我们日常开发解决 BUG 的效率. A ...

  6. 如何在零停机的情况下迁移 Kubernetes 集群

    ​简介:本文将通过集群迁移的需求.场景以及实践方式,介绍如何基于阿里云容器服务 ACK,在零停机的情况下迁移 Kubernetes 集群. 作者:顾静(子白)|阿里云高级研发工程师:谢瑶瑶(初扬)|阿 ...

  7. [FAQ] swagger-php @OA\JsonContent 与 @MediaType @OA\Schema 的用法

    @OA\JsonContent 是对 @MediaType @OA\Schema 两者的封装,类似于 laravel 中 JsonResponse 对 Response 的封装. @OA\JsonCo ...

  8. [FAQ] Laravel 验证未通过 Route [login] not defined 处理

    一种方式是在路由中定义一个name为 login 的请求. Route::get('xxx', [XxxController::class, 'x'])->name('login'); 第二种方 ...

  9. dotnet Microsoft.Recognizers.Text 超强大的自然语言关键词提取库

    本文和大家介绍一个使用超级简单,但是功能特别强大的自然语言关键词提取库,可以根据输入的自然语言提取出里面的信息.例如我在一句话里面说了哪些数值变量或者说了手机号码等 先看看下图的一个效果,下图是尝试识 ...

  10. ESP32 使用LVGL案例

    一.完成LVGL移植 在使用LVGL提供的测试案例时,需要先移植LVGL,不明白的小伙伴看我之前的笔记 esp-idf 移植 lvgl8.3.3. 移植完成后的项目文件如下图所示 二.添加需要的测试案 ...