javascript实现京东登录显示隐藏密码

本文实例为大家分享了javascript仿京东登录显示隐藏密码的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  .box {
   position: relative;
   width: 400px;
   border-bottom: 1px solid #ccc;
   margin: 100px auto;
  }

  .box input {
   width: 370px;
   height: 30px;
   border: 0;
   outline: none;
  }

  .box img {
   position: absolute;
   top: 2px;
   right: 2px;
   width: 24px;
  }
 </style>
</head>

<body>
 <div class="box">
  <label for="">
   <img src="images/close.png" alt="" id="eye">
  </label>
  <input type="password" name="" id="pwd">
 </div>
 <script>
  // 1. 获取元素
  var eye = document.getElementById('eye');
  var pwd = document.getElementById('pwd');
  // 2. 注册事件 处理程序
  var flag = 0;
  eye.onclick = function() {
   // 点击一次之后, flag 一定要变化
   if (flag == 0) {
    pwd.type = 'text';
    eye.src = 'images/open.png';
    flag = 1; // 赋值操作
   } else {
    pwd.type = 'password';
    eye.src = 'images/close.png';
    flag = 0;
   }

  }
 </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-07-31

angularjs2 ng2 密码隐藏显示的实例代码

angularjs2 ng2 密码隐藏显示代码结合ionic2开发移动端项目,注册页的密码的input一般用password,但是用户输入密码时可能会输入错误,需要显示成text. 如图: 首先,输入框的类型判断: <ion-input type="{{pwshow?'text':'password'}}" placeholder="输入密码"></ion-input> 然后,添加眼睛的点击事件,ngClass判断图标样式: <a hr

js实现input密码框显示/隐藏功能

JavaScript实现input密码框显示/隐藏的功能,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .password{ position: relative; width: 280px; height: 60px; } .password,.n-txtCss{ display:

基于JavaScript实现表单密码的隐藏和显示出来

为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢? 当用户输入时密码显示为圆点或者星号, 为了确保用户输入的正确, 用户可以点击让密码显示的按钮. 直接就先看节目效果. 界面结构, 一个外层的pass-box, 然后内层加入input 和 一个 i 标签, 且给他们加入相应的class名称. <div class="pass-box"> <input type=&qu

AngularJS实时获取并显示密码的方法

本文实例讲述了AngularJS实时获取并显示密码的方法.分享给大家供大家参考,具体如下: 1.设计源码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net - AngularJS获取密码</title> <script type="text/javascript" src="angul

原生js实现密码输入框值的显示隐藏

本文实例为大家分享了js显示隐藏密码输入框值的具体代码,供大家参考,具体内容如下 直接贴上代码 <!DOCTYPE html> <html> <head> <title>password intput demo</title> </head> <style type="text/css"> body{ margin:0px; background-color: white; font-family: '

JS实现登录页密码的显示和隐藏功能

在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码: 在没给大家分享实现代码之前,先给大家展示下效果图: <ul class="form-area"> <li> <div class="item-content"> <div class="item-input"> <input type=&q

JS实现表单中点击小眼睛显示隐藏密码框中的密码

领导交个一个任务,要求在表单中点击小眼睛显示隐藏密码框中的密码!在一些网站中经常会用到这样的功能,今天小编就给大家分享我的实现思路及代码 准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 最终效果图 css样式部分,样式可根据自己喜好设置,没有过硬要求 <style> div:first-child { width: 300px; height: 50px; background-color: red; color: white; margin: 20px

JS实现密码框的显示密码和隐藏密码功能示例

本文实例讲述了JS实现密码框的显示密码和隐藏密码功能.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <form method="POST" action="

JS实现根据密码长度显示安全条功能

大家在一些网站上经常可以看到数码密码会根据输入的密码长度显示安全条功能,此功能基于js如何实现的呢?下面看下实现代码,具体代码如下所示: //根据密码长度显示安全条 <ul class="clear"> <li>密 码:</li> <li> <input type="password" id="pwd" name="pwd" class="in" onK

PHP实现根据密码长度显示安全条

本文给大家分享一段简单的代码,实现根据密码长度显示安全条功能,代码如下所示: //根据密码长度显示安全条 <ul class="clear"> <li>密 码:</li> <li> <input type="password" id="pwd" name="pwd" class="in" onKeyUp=pwStrength(this.value) on

Android使用AsyncTask下载图片并显示进度条功能

在Android中实现异步任务机制有两种方式,Handler和AsyncTask.这篇文章给大家介绍Android使用AsyncTask下载图片并显示进度条功能. AsyncTask下载图片并显示下载进度,异步类AsyncTask配合进度条,简练! public class AsyncTaskActivity2 extends Activity { private Button btnDown;//图片框 private ImageView ivImage;//图片URL private sta

Vue项目页面跳转时浏览器窗口上方显示进度条功能

在vue项目中,为了减少首屏加载的时间,通常会开启路由的懒加载.路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间. 然而,路由懒加载会使得我们在第一次打开一个新页面的时候,会有一个加载时间.如果在这个时候我们没有一个提示的话,给人的感觉会是好像我点了页面跳转但是没反应.所以,这个时候我们可以加一个进度条来告知用户. 具体实现,我们使用NProgress这个滚动条效果插件. 1.安装: cnpm install --save nprogress 2.在main.js中引入: impor

Android 下载文件通知栏显示进度条功能的实例代码

1.使用AsyncTask异步任务实现,调用publishProgress()方法刷新进度来实现(已优化) public class MyAsyncTask extends AsyncTask<String,Integer,Integer> { private Context context; private NotificationManager notificationManager; private NotificationCompat.Builder builder; public M

python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能

1.代码1: (1)进度条等显示在主窗口状态栏的右端,代码如下: from PyQt5.QtWidgets import QMainWindow, QProgressBar, QApplication, QLabel import sys class SampleBar(QMainWindow): """Main Application""" def __init__(self, parent = None): print('Starting t

Python使用progressbar模块实现的显示进度条功能

本文实例讲述了Python使用progressbar模块实现的显示进度条功能.分享给大家供大家参考,具体如下: progressbar安装: pip install progressbar 用法一 # -*- coding=utf-8 -*- import time from progressbar import * total = 1000 def dosomework(): time.sleep(0.01) progress = ProgressBar() for i in progress

原生JS上传大文件显示进度条 php上传文件代码

JS原生上传大文件显示进度条,php上传文件,供大家参考,具体内容如下 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_limit = 20M <!DOCTYPE html> <html> <head> <title>原生JS大文件显示进度条</title> <meta charset="UTF-8"> <s