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


Posted in Javascript onAugust 02, 2020

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

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

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>

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

Javascript 相关文章推荐
javascript 强制刷新页面的实现代码
Dec 13 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
Vue scoped及deep使用方法解析
Aug 01 #Javascript
Vue中computed及watch区别实例解析
Aug 01 #Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 #Javascript
vue 组件简介
Jul 31 #Javascript
three.js 制作动态二维码的示例代码
Jul 31 #Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 #Javascript
vue抽出组件并传值实例
Jul 31 #Javascript
You might like
PHP array_push 数组函数
2009/12/26 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
javascript中的this详解
2014/12/08 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
详解node中创建服务进程
2017/05/09 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
浅谈Python中的私有变量
2018/02/28 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
Python高并发和多线程有什么关系
2020/11/14 Python
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
党校学习自我鉴定
2014/02/24 职场文书
求职自荐信怎么写
2014/03/06 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers