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 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
jquery 全局AJAX事件使用代码
Nov 05 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
javascript中clone对象详解
Dec 03 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
Vue源码解析之数组变异的实现
Dec 04 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 GUID生成函数和类
2014/03/10 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
JSON 学习之完全手册 图文
2007/05/29 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
浅谈js中的this问题
2017/08/31 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Pytorch 实现权重初始化
2019/12/31 Python
python动态文本进度条的实例代码
2020/01/22 Python
python的数学算法函数及公式用法
2020/11/18 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
区域销售经理职责
2013/12/22 职场文书
实习生的自我评价
2014/01/08 职场文书
德育标兵事迹材料
2014/08/24 职场文书
迎新生标语大全
2014/10/06 职场文书
家访教师心得体会
2016/01/23 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python