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

 更新时间:2020年08月02日 08:56:29   作者:㼛思码雨  
这篇文章主要为大家详细介绍了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实现日历功能代码实例(无引用Jq)

    原生JavaScript实现日历功能代码实例(无引用Jq)

    这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • Javascript实现图片加载从模糊到清晰显示的方法

    Javascript实现图片加载从模糊到清晰显示的方法

    这篇文章主要介绍了使用Javascript实现图片加载从模糊到清晰显示的方法,通俗易懂,需要的朋友可以参考下。
    2016-06-06
  • JS实现链表数据结构的代码详解

    JS实现链表数据结构的代码详解

    很多前端的同学对数据结构和算法这块没有太多的概念,很多leetcode的题目看不懂,有时候可能看了题解也不知道是什么意思,这篇文章咱们来简单的谈一谈链表,文中给大家介绍了JS实现链表数据结构的示例代码,需要的朋友可以参考下
    2024-01-01
  • 使用JS给静态页面添加搜索功能的实现方法

    使用JS给静态页面添加搜索功能的实现方法

    静态页面通常由HTML、CSS 和 JavaScript 等静态文件组成,这些文件在服务器上不会动态生成或修改,所以加载速度通常比较快,本文给大家介绍了如何只使用JS给静态网页添加站内全局搜索功能,文中有详细的解决方案,需要的朋友可以参考下
    2023-11-11
  • JavaScript canvas实现跟随鼠标移动小球

    JavaScript canvas实现跟随鼠标移动小球

    这篇文章主要为大家详细介绍了JavaScript canvas实现跟随鼠标移动小球,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • js获取上传文件的绝对路径实现方法

    js获取上传文件的绝对路径实现方法

    下面小编就为大家带来一篇js获取上传文件的绝对路径实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 实例讲解JavaScript中call、apply、bind方法的异同

    实例讲解JavaScript中call、apply、bind方法的异同

    这篇文章主要以实例讲解的方式为大家总结了JavaScript中call、apply、bind方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 小程序实现点击tab切换左右滑动

    小程序实现点击tab切换左右滑动

    这篇文章主要为大家详细介绍了小程序实现点击tab切换左右滑动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • js判断背景图片是否加载成功使用img的width实现

    js判断背景图片是否加载成功使用img的width实现

    判断背景图片是否加载成功想必大家对此很陌生吧,会了之后就可以判断css背景图片了,具体判断代码如下,感兴趣的朋友可以参考下哈
    2013-05-05
  • js让弹出新窗口居中显示的脚本

    js让弹出新窗口居中显示的脚本

    我们经常需要在新窗口弹出页面并需要居中显示
    2008-01-01

最新评论