JS实现记住用户密码

已于 2024-02-01 01:03:17 修改
阅读量2.3k 收藏 11
点赞数 3
分类专栏： JS学习之旅 文章标签： javascript 前端 html
于 2022-12-06 15:57:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51447496/article/details/128204558
版权
  • 作者简介：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。
  • 座右铭：未来是不可确定的，慢慢来是最快的。
  • 个人主页：极客李华-CSDN博客
  • 合作方式：私聊+
  • 这个专栏内容：BAT等大厂常见后端java开发面试题详细讲解，更新数目100道常见大厂java后端开发面试题。
  • 我的CSDN社区：https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
  • 微信公众号，抖音，b站等平台统一叫做：极客李华，加入微信公众号领取各种编程资料，加入抖音，b站学习面试技巧，职业规划

JS实现记住用户密码

有趣的小案例池子：
JS实现定时器
 JS实现关闭图片窗口
 JS实现输入检验
 获取焦点后隐藏提示内容的输入框
 JS实现获取鼠标在画布中的位置
 聊天信息框显示消息
JS点击切换背景图
自动切换背景的登录页面
JS制作跟随鼠标移动的图片
JS实现记住用户密码

概述

本文讲解如何使用JS实现我们常见的记住密码的功能。

效果展示

在这里插入图片描述

构建HTML框架

<body>
    <input type="text" id="password"> <input type="checkbox" name="" id="remember"> 记住密码
    
</body>

JS编写逻辑

<script>
        // 获取输入密码的元素
        var password = document.querySelector('#password');
        // 获取技术密码的选择框的元素
        var remember = document.querySelector('#remember');
        // 在本地的存储单元中存储密码 如果本地存储获取 password这个元素为真
        if (localStorage.getItem('password')) {
            // 那么把password的value设置为本地存储的password
            password.value = localStorage.getItem('password');
            // 然后设置已经记住密码了
            remember.checked = true;
        }
        // 给remember输入框添加事件
        remember.addEventListener('change', function() {
            // 如果已经记住密码了
            if (this.checked) {
                // 那么本地存储现在password中的值 把输入的password存放到本地存储中 
                localStorage.setItem('password', password.value)
            } else {
                // 如果没有记住密码 那么移除本地的password的存储情况
                localStorage.removeItem('password');
            }
        })
    </script>

完整代码

<!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>
</head>

<body>
    <input type="text" id="password"> <input type="checkbox" name="" id="remember"> 记住密码
    <script>
        // 获取输入密码的元素
        var password = document.querySelector('#password');
        // 获取技术密码的选择框的元素
        var remember = document.querySelector('#remember');
        // 在本地的存储单元中存储密码 如果本地存储获取 password这个元素为真
        if (localStorage.getItem('password')) {
            // 那么把password的value设置为本地存储的password
            password.value = localStorage.getItem('password');
            // 然后设置已经记住密码了
            remember.checked = true;
        }
        // 给remember输入框添加事件
        remember.addEventListener('change', function() {
            // 如果已经记住密码了
            if (this.checked) {
                // 那么本地存储现在password中的值 把输入的password存放到本地存储中 
                localStorage.setItem('password', password.value)
            } else {
                // 如果没有记住密码 那么移除本地的password的存储情况
                localStorage.removeItem('password');
            }
        })
    </script>
</body>

滑动窗口

给定一个大小为 n≤106 的数组。

有一个大小为 k 的滑动窗口，它从数组的最左边移动到最右边。

你只能在窗口中看到 k 个数字。

每次滑动窗口向右移动一个位置。

以下是一个例子：

该数组为 [1 3 -1 -3 5 3 6 7]，k 为 3。

窗口位置 最小值 最大值
[1 3 -1] -3 5 3 6 7 -1 3
1 [3 -1 -3] 5 3 6 7 -3 3
1 3 [-1 -3 5] 3 6 7 -3 5
1 3 -1 [-3 5 3] 6 7 -3 5
1 3 -1 -3 [5 3 6] 7 3 6
1 3 -1 -3 5 [3 6 7] 3 7
你的任务是确定滑动窗口位于每个位置时，窗口中的最大值和最小值。

输入格式
输入包含两行。

第一行包含两个整数 n 和 k，分别代表数组长度和滑动窗口的长度。

第二行有 n 个整数，代表数组的具体数值。

同行数据之间用空格隔开。

输出格式
输出包含两个。

第一行输出，从左至右，每个位置滑动窗口中的最小值。

第二行输出，从左至右，每个位置滑动窗口中的最大值。

输入样例：
8 3
1 3 -1 -3 5 3 6 7
输出样例：
-1 -3 -3 -3 3 3
3 3 5 5 6 7

提交代码

C++

#include<iostream>
using namespace std;

const int N = 1000010;
int a[N], q[N], hh, tt = -1;

int main()
{
    int n, k;
    cin >> n >> k;
    for (int i = 0; i < n; ++ i)    // 这个题要注意的是 q队列里面存放的是位置
    {
        scanf ("%d", &a[i]);        // 先求的是最小值
        if (i - k + 1 > q[hh]) ++hh;  // 如果最小值的位置已经滑出窗口了 然后就
                                    // ++ hh代表这个数已经没了
        while (hh <= tt && a[i] <= a[q[tt]]) -- tt; // 先确保队列里面有数字
                                    // 然后如果新来的数字要小于 队列里面的最小值
                                    // 那么--tt 就代表当前队列的最小值去掉
        q[++ tt] = i;  // 把新来的数字放到队列中
        if (i + 1 >= k) printf ("%d ", a[q[hh]]); // 当前队列的长度已经满足k了
                                    // 就可以把对首的元素输出出来
    }
    puts("");
    int hh = 0, tt = -1;
    for (int i = 0; i < n; ++ i)
    {
        if (i - k + 1 > q[hh]) ++ hh;
        while (hh <= tt && a[i] >= a[q[tt]]) -- tt;
        q[++ tt] = i;
        if (i + 1 >= k) printf("%d ", a[q[hh]]);
    }
    return 0;
}

Java

import java.io.*;

public class Main
{
    final static int N = 1000010;
    static int [] a = new int [N];
    static int [] q = new int [N];
    static int hh = 0, tt = -1;
    public static void main(String[] args) throws IOException
    {
        int n, k;
        BufferedReader reader = new BufferedReader(new InputStreamReader(System.in));
        BufferedWriter out = new BufferedWriter(new OutputStreamWriter(System.out));
        
        String [] str = reader.readLine().split(" ");
        n = Integer.parseInt(str[0]);
        k = Integer.parseInt(str[1]);
        
        str = reader.readLine().split(" ");
        for (int i = 0; i < n; ++ i) a[i] = Integer.parseInt(str[i]);
        
        // for (int i = 0; i < n; ++ i)
        // {
        //     if (hh <= tt && i - k + 1 > q[hh])  ++ hh;
        //     while (hh <= tt && a[i] <= a[q[hh]]) -- tt;
        //     q[++ tt] = i;
        //     if (i + 1 >= k) out.write(a[q[hh]]+" ");
        // }
        
        for(int i = 0; i < n; i ++)
        {
            if(hh <= tt && i - q[hh] + 1 > k) hh++;//判断队头是否已经滑出窗口
            while(hh <= tt && a[q[tt]] >= a[i]) tt--;//出队

            q[++tt] = i;//入队
            if(i >= k - 1) out.write(a[q[hh]]+" ");
        }
        
        out.write("\n");
        hh = 0;
        tt = -1;
        // for (int i  = 0; i < n; ++ i)
        // {
        //     if (hh <= tt && i - k + 1 > q[hh]) ++ hh;
        //     while (hh <= tt && a[i] >= a[q[hh]]) -- tt;
        //     q[++ tt] = i;
        //     if (i + 1 >= k) out.write(a[q[hh]]+" ");
        // }
        for(int i = 0; i < n; i ++)
        {
            if(hh <= tt && i - q[hh] + 1 > k) hh++;//判断队头是否已经滑出窗口
            while(hh <= tt && a[q[tt]] <= a[i]) tt--;//出队

            q[++tt] = i;//入队
            if(i >= k - 1) out.write(a[q[hh]]+" ");
        }
        out.flush();
        out.close();
    }
}

如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下

极客李华
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
js实现记住账号密码功能
08-06
js实现记住账号密码功能，实现不了随便喷
利用js实现的记住密码功能
08-22
利用js开发的记住密码功能，将用户输入存在浏览器的cookie中，经测试，在ie，ff和chrome均可用
Vue中登录页面记住密码，并使用crypto-js加密
~~
05-17 3731
主要用到js-cookie来存储用户名和密码，关于js-cookie介绍：https://blog.csdn.net/qq_40323256/article/details/116838848 一、下载js-cookie cnpm i -S js-cookie 二、main.js中全局引入 import Cookies from 'js-cookie' Vue.prototype.$cookie = Cookies; 三、使用 <el-checkbox v-model="rem..
vue3实现 后台管理系统登录与记住密码功能（element-plus）
shi450561200的博客
06-12 2303
【代码】element-plus后台管理系统实现登录与记住密码功能。
js记住密码
A12536365214的博客
07-11 1253
勾选之后无论怎么刷新都不会清除框里面的数据，除非手动删除或者取消勾选。
js实现记住密码
weixin_50629071的博客
06-09 1935
js简单实现记住密码
纯js实现记住密码
qq_41675930的博客
12-30 591
如何实现纯js实现记住密码
JavaScript操作cookie实现记住用户名密码功能（一）
hsx18787462705的博客
09-15 3405
JavaScript操作cookie实现记住用户名密码功能（一） 由来简述 最近一段时间在使用springboot编写一个简单的小系统，但是写到登录注册时，突然想给登录加上一点小功能，但是写的时候有点模糊，然后向w3school求助了一下，之后自己有在那基础上有一些改动，达到了一个很好的样例，如果觉得好的给个关注，给个赞。 参考链接：https://www.w3school.com.cn/js/js_cookies.asp 主要实现了如下的一些功能： 1、页面加载完检测是否有cookie，有的话，把co
js实现记住登录密码
大前端
04-28 513
js实现记住和不记住登录密码
登录时记住密码的实现
热门推荐
很菜，但是没有放弃
06-20 2万+
项目中基本上登录是必不可少的一步，对此，在登录时选择记住密码这一功能也是不错的选择。所以，前段时间要我实现记住密码这个功能，我就写了一个demo出来。 思路：记住密码这个功能其实和普通浏览器记住密码功能是查不多的，主要 是通过cookie来实现的。 1、引入文件 <script type="text/javascript" src="<%=request.getContextPath(...
实现记住密码功能
qq_43634655的博客
07-30 3108
代码】实现记住密码功能。
Javascript实现登录记住用户名和密码功能
10-20
本文主要介绍了Javascript实现登录记住用户名和密码功能的代码。具有很好的参考价值。下面跟着小编一起来看下吧
jQuery实现的记住帐号密码功能完整示例
10-16
主要介绍了jQuery实现的记住帐号密码功能,结合完整实例形式分析了jQuery使用jquery.cookie.js插件记录用户信息相关操作技巧,需要的朋友可以参考下
cookie记住用户密码全部js写
10-26
全部js，实现记住密码的功能。里面主要用的是cookie。
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 388
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1008
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 514
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 302
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 407
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
纯js代码如何实现点击修改密码出现弹窗
05-24
可以使用HTML、CSS和JavaScript来实现这个功能。以下是一个简单的实现方式： HTML代码： ``` <button id="change-password-btn">修改密码</button> <div id="change-password-modal" class="modal"> <div class="modal-content"> <span class="close">×</span> <h2>修改密码</h2> <form> <label for="old-password">旧密码：</label> <input type="password" id="old-password" name="old-password"><br><br> <label for="new-password">新密码：</label> <input type="password" id="new-password" name="new-password"><br><br> <label for="confirm-password">确认密码：</label> <input type="password" id="confirm-password" name="confirm-password"><br><br> <input type="submit" value="提交"> </form> </div> </div> ``` CSS代码： ``` /* 遮罩层样式 */ .modal { display: none; /* 默认不显示 */ position: fixed; /* 固定定位 */ z-index: 1; /* 设置层级 */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* 当内容溢出时，滚动条可见 */ background-color: rgba(0, 0, 0, 0.5); /* 背景半透明黑色 */ } /* 弹窗样式 */ .modal-content { background-color: #fefefe; /* 弹窗背景色 */ margin: 10% auto; /* 居中对齐 */ padding: 20px; border: 1px solid #888; width: 40%; /* 设置弹窗宽度 */ } /* 关闭按钮样式 */ .close { float: right; font-size: 28px; font-weight: bold; } /* 关闭按钮悬停样式 */ .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } ``` JavaScript代码： ``` // 获取按钮和弹窗元素 var btn = document.getElementById("change-password-btn"); var modal = document.getElementById("change-password-modal"); // 获取关闭按钮元素 var close = modal.getElementsByClassName("close")[0]; // 当用户点击按钮时，显示弹窗 btn.onclick = function() { modal.style.display = "block"; } // 当用户点击关闭按钮时，隐藏弹窗 close.onclick = function() { modal.style.display = "none"; } // 当用户点击遮罩层时，隐藏弹窗 window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } ``` 上述代码实现了一个简单的点击按钮弹出修改密码弹窗的功能。其中，使用了CSS中的fixed定位和JavaScript中的事件监听功能，实现了弹窗的显示和隐藏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极客李华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值