js之点击值发生变化

简介: 点击值发生变化,应用场景,比如像阿里云那样我通常密码是以******的形式存在,我必须要点击查看,它才会以明文显示。在实际开发中,比如以智能门锁为例,安装门锁时,有个叫密码输入框的表单,这个是选填项,可填可不填。

点击值发生变化,应用场景,比如像阿里云那样我通常密码是以******的形式存在,我必须要点击查看,它才会以明文显示。

在实际开发中,比如以智能门锁为例,安装门锁时,有个叫密码输入框的表单,这个是选填项,可填可不填。如果不填,密码会以某种规则进行自动生成,当没有填写这一栏,将其他必填项填完并提交,后台响应安装成功,这时可点击门锁详情进入门锁-密码列表,这时会看到一个叫功能密码和动态密码,但是密码却是以******的形式显示,这时通过点击按钮查看即可显示明文密码。

实现的机制还是js,不过这里以jQuery的形式实现

js代码如下:

$(function(){
        var judge=1;
        content = $("#pwdsss_1");
        content2 = $("#pwdsss_2");
    $("#test001").click(function(event){
        
        if(judge){
            judge=0;
            content.text("972543");
        }else{
            judge=1;
            content.text("******");
        }
    });
    
    
    $("#test002").click(function(event){
        
        if(judge){
            judge=0;
            content2.text("678543");
        }else{
            judge=1;
            content2.text("******");
        }
    });
    
    
});
    

 

上述代码即可完成该功能,不过的参数值,通常不是写死的,这里为了讲解方便,暂时写死,参数值是可以通过某个选择器赋值的。

至于html代码这里就不贴了,有了这个思路,大家可以直接复用这段代码完成该功能。

这段代码很好理解的,用一段话概述:获得对应的选择器声明并赋值,通过对应的点击事件完成值变化。

目录
相关文章
|
7月前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
1月前
|
数据采集 存储 监控
实现自动化数据抓取:使用Node.js操控鼠标点击与位置坐标
本文介绍了如何使用Node.js和Puppeteer实现自动化数据抓取,特别是针对新闻网站“澎湃新闻”。通过设置代理IP、User-Agent和Cookie,提高爬虫的效率和隐蔽性,避免被网站封锁。代码示例展示了如何模拟鼠标点击、键盘输入等操作,抓取并整理新闻数据,适用于需要规避IP限制和突破频率限制的场景。
100 10
|
3月前
|
JavaScript 前端开发
JS判断点击是单击还是双击
如何使用JavaScript判断用户点击是单击还是双击。
47 0
|
4月前
|
JavaScript 前端开发 Java
JavaScript内存泄露大揭秘!你的应用为何频频“爆内存”?点击解锁救星秘籍!
【8月更文挑战第23天】在Web前端开发中,JavaScript是构建动态网页的关键技术。然而,随着应用复杂度增加,内存管理变得至关重要。本文探讨了JavaScript中常见的内存泄露原因,包括意外的全局变量、不当使用的闭包、未清除的定时器、未清理的DOM元素引用及第三方库引发的内存泄露。通过了解这些问题并采取相应措施,开发者可以有效避免内存泄露,提高应用性能。
72 1
|
4月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
29 1
|
4月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
25 1
|
4月前
|
JavaScript 前端开发
js点击抽奖符合条件触发点击次数
js点击抽奖符合条件触发点击次数
38 1
|
4月前
|
JavaScript 前端开发
Next js:点击登录显示登录表单,点击注册显示注册表单的功能
本文提供了一个Next.js中使用React状态管理实现点击按钮切换显示登录和注册表单的功能示例,包括创建`authform.tsx`组件和在页面组件中引入使用的方法。
|
6月前
|
JavaScript 定位技术 API
Js地图路线规划以及点击获取经纬度
Js地图路线规划以及点击获取经纬度
|
6月前
|
JavaScript
JS图表生成以及点击修改图表样式
JS图表生成以及点击修改图表样式