js后台框架锁屏功能制作

news2024/12/22 14:57:46

我们为什么要使用锁屏功能，因为锁屏功能可以帮助我们进行隐私的保护

锁屏功能的制作方法

1.我们要获取到登录成功密码输入框的内容，还要获取到登录成功之后返回的账户信息，在登录成功的时候，通过存储，存储一下密码框的value和登录成功之后返回的账户信息

下面的代码是在登录成功之后，存储一下密码，在锁屏页面解锁的时候使用

// 存储密码到后面的锁屏使用
					localStorage.setItem("pass", $("#password").val());

 下面的代码是在登录成功之后，存储一下登录成功返回的账户信息，用于在其他页面获取数据，验证账号是否掉线

//把整条数据存储起来到后面使用
					localStorage.setItem("data", JSON.stringify(data));

这是在登录页点击登录触发的事件，里面有上面两个事件具体放在哪个位置去使用

//点击登录事件
function enter() {
	//开屏弹窗
	let tooltip = $(".Tooltip")[0];
	//判断是否填写账号和密码
	if ($("#account").val() == "") {
		tooltip.innerHTML = `请填写账号`;
		tooltip.style = "display:block";
		//判断账号格式是否错误
	} else if (!isValidPhoneNumber($('#account').val())) {
		tooltip.innerHTML = `账号格式错误`;
		tooltip.style = "display:block";
		// 判断是否填写密码
	} else if ($("#password").val() == "") {
		tooltip.innerHTML = `请填写密码`;
		tooltip.style = "display:block";
		//判断密码格式是否错误
	} else if ($('#password').val().length < 6 || $('#password').val().length > 18) {
		tooltip.innerHTML = `密码格式错误`;
		tooltip.style = "display:block";

	} else {
		//请求接口
		$.ajax({
			url: interfaces + 'spigall/Userinfo',
			method: 'POST',
			dataType: 'json',
			data: {
				//把获取到的手机号和密码框的value值放入到数据里面进行判断
				account: $("#account").val(),
				password: $("#password").val()
			},
			success: function(data) {

				// 当请求成功时执行的回调函数
				//判断接口返回的账户是否存在
				if (data.code == 0) {
					tooltip.innerHTML = `账户密码错误`;
					tooltip.style = "display:block";
					//判断接口返回的密码是否错误
				} else {
					// 存储接口
					localStorage.setItem('dns', interfaces);
					//登陆成功弹出窗提示
					tooltip.innerHTML = `登录成功`;
					//修改弹出窗的样式
					tooltip.style = "display:block;background:#e8f5e9;color:#67c23a;";
					//把整条数据存储起来到后面使用
					localStorage.setItem("data", JSON.stringify(data));
					// 存储密码到后面的锁屏使用
					localStorage.setItem("pass", $("#password").val());
					//设置定时器
					setTimeout(function() {
						//跳转到首页
						window.location.replace("index.html");
					}, 2000)
				}
				// 可以在这里处理获取到的数据，更新页面内容等操作
			},
			error: function(xhr, status, error) {
				// 当请求失败时执行的回调函数
				console.error('请求失败:', status, error);
				// 可以在这里处理请求失败的情况，例如显示错误信息给用户
			}
		});

	}
	//设置定时器
	setTimeout(function() {
		//让弹出窗隐藏
		tooltip.style = "display:none";
	}, 2000)
}

 

在框架和锁屏页面，获取提示的弹出窗元素要放在最上面否则获取不到弹出窗的元素，使用变量获取到账号的信息 ，写在获取提示弹出窗元素的下面，先判断变量是否为空，如果为空，跳转到登录页

// 获取提示弹出窗
let tooltip = $(".Tooltip")[0]; // 获取提示信息的 DOM 元素
// 获取本地存储登录的数据
let tokens = localStorage.getItem("data");



// 判断数据如果为null返回登录页
function disconnected() {
	tokens = localStorage.getItem("data");
	if (tokens == null) {
		// 弹出窗提示
		tooltip.innerHTML = `您已掉线，两秒将返回登录页面`; // 设置提示信息
		// 显示弹出窗
		tooltip.style = "display:block";
		// 定时器跳转到登录页
		setTimeout(function() {
			console.log(1);
			// 清除临时存储的数据
			sessionStorage.clear();
			// 清除本地存储的数据
			localStorage.clear();
			// 跳转到登录页
			window.location.replace("login.html");
		}, 2000);
	}
}

然后请求首页的接口判断token是否失效，如果失效弹出窗提示用户跳转到登录页

// 数据转换
let personal = JSON.parse(tokens);
// 获取存储登录页数据里面的id
let uid = personal.data.id;
// 获取登录页数据的token
let token = personal.data.token;
// 获取本地存储的接口
let dns = localStorage.getItem('dns');
// 请求首页接口
function showdata() {
	$.ajax({
		type: "post",
		url: dns + "/spigall/Statis",
		data: {},
		headers: {
			token: token,
			id: uid
		},
		success: function(data) {
			// 判断token是否过期
			if (data.code == 0) {
				// 弹出窗显示
				tooltip.style = "display:block";
				// 弹出窗渲染
				tooltip.innerHTML = `您已掉线，两秒将返回登录页面`; // 设置提示信息、
				// 定时器跳转到登录页
				setTimeout(function() {
					// 清除临时存储的数据
					sessionStorage.clear();
					// 清除本地存储的数据
					localStorage.clear();
					// 跳转到登录页
					window.location.replace("login.html");
				}, 2000);
			}
		},
		error: function(e) { // 请求失败的回调函数
			console.error("请求失败", e);
		}
	})
}

然后设置一个永久定时器调用这两个函数进行判断

// 每五秒执行定时器
setInterval(function() {
	//判断数据是否丢失，如果丢失，弹出窗提示跳转到登录页
	disconnected();
	// 请求首页接口判断，token是否失效
	showdata();
}, 5000);

2.在后台框架点击锁屏按钮，存储一个变量，设置它值为1，设置这个存储的变量是为了在显示框架页面的时候，判断是否有这个存储，如果有这个存储的变量，跳转到到锁屏页面，否则不跳转页面，点击锁屏跳转到锁屏页面，进入锁屏判断存储变量的值是否等于2，如果等于2跳转到框架页面

下面是在框架页面点击锁屏图片的代码

// 点击锁屏函数
function lock() {
	// 存储一个数据为1
	localStorage.setItem('locks', 1);

	// 创建一个新的状态对象newState，它包含了两个属性
	// pageTitle属性用于表示页面标题，这里设置为"lock.html"
	// pageContent属性用于描述页面的内容，这里设置了相关的描述字符串
	var newState = {
		pageTitle: "lock.html",
		pageContent: "这是新的页面内容相关描述"
	};

	// 使用history.replaceState方法来更新浏览器历史记录中的当前状态
	// 第一个参数newState就是上面定义的新状态对象，它包含了页面相关的一些状态信息
	// 第二个参数"新页面标题"是一个可选的标题参数，用于在某些浏览器的历史记录中展示相关标题（不过实际支持情况因浏览器而异）
	// 第三个参数"lock.html"指定了与该历史记录状态关联的URL路径，当用户点击浏览器的前进/后退按钮时可能会用到这个路径信息
	history.replaceState(newState, "新页面标题", "lock.html");

	// 使用location.reload方法来重新加载当前页面，这会导致页面重新从服务器获取资源（如果是无缓存情况）
	// 或者从缓存中重新加载页面内容（如果有可用缓存），常用于需要更新页面显示状态的场景
	location.reload();
}

下面是在框架的js里面，判断存储的值是否为1，如果为1跳转到锁屏页面

// 如果获取的存储为1跳转到锁屏页面
if (localStorage.getItem('locks') == 1) {
	window.location.replace('lock.html');
}

 下面代码是写锁屏页面写的，在锁屏页面判断存储的值如果等于2跳转到框架页面

// 判断存储的值如果等于2，就跳转到锁屏之前的页面
if (localStorage.getItem('locks') == 2) {
	window.location.replace("index.html");
}

3.点击解锁功能，判断是否填写密码，没有填写弹出窗提示用户请填写密码，否则判断输入的内容的格式是否为大于等于6小于等于18，这是我自己写的规则，当然也可以通过自己格式进行密码格式判断的修改或者也可以去除这个不是必要的，不是弹出窗提示用户格式错误，否则最后判断输入的内容是否跟存储的登录密码一样，如果不一样弹出窗提示用户密码错误，否则弹出窗提示用户解锁成功，跳转到框架页面

下面是点击解锁事件和监听的回车事件

这个事件是放在锁屏的js里面去写的

// 点击解锁事件
function lockhiode() {
	// 如果密码输入框的值为空，弹出窗提示
	if ($("#password").val() == "") {
		// 设置弹出窗的提示信息
		tooltip.innerHTML = `请填写密码`;
		// 显示弹出窗
		tooltip.style = "display:block";
		//判断密码格式是否错误
	} else if ($('#password').val().length < 6 || $('#password').val().length > 18) {
		// 设置弹出窗的提示信息
		tooltip.innerHTML = `密码格式错误`;
		// 显示弹出窗
		tooltip.style = "display:block";
// 如果密码和本地存储的登录密码不一样，弹出窗提示
	} else if ($('#password').val() != localStorage.getItem('pass')) {
		// 设置弹出窗的提示信息
		tooltip.innerHTML = `密码错误`;
		// 显示弹出窗
		tooltip.style = "display:block";
		// 如果上面条件都不满足，弹出窗提示，跳转到锁屏之前的页面
	} else {
		// 设置密码框为空
		$('#password').val("");
		// 设置提示弹出窗信息
		tooltip.innerHTML = `解锁成功`;
		// 显示提示弹出窗改变弹出窗的颜色
		tooltip.style = "display:block;background:#e8f5e9;color:#67c23a;";
		// 设置lock存储为1
		localStorage.setItem('lock', 1)
		// 设置locks存储为2
		localStorage.setItem('locks', 2);
		// 设置定时器。跳转到锁屏之前的页面
		setTimeout(function() {
			// 跳转到锁屏之前的页面
			window.location.replace('index.html');
		}, 2000)

	}

	//设置定时器
	setTimeout(function() {
		//让弹出窗隐藏
		tooltip.style = "display:none";
	}, 2000)
}

// 监听回车键
$(document).ready(function() {
	// 在密码框监听键盘事件
	$('#password').keypress(function(event) {
		// 如果键盘点击回车执行里面的内容
		if (event.which === 13) {
			event.preventDefault(); // 防止表单默认提交
			lockhiode(); // 调用解释函数
		}
	});
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2263780.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

flutter --no-color pub get 超时解决方法

flutter --no-color pub get 超时解决方法

新建Flutter项目后&#xff0c;运行报错&#xff0c;需要执行pub get 点击Run ‘flutter pub get’ … … … 卡着&#xff0c;不动了&#xff0c;提示超时 是因为墙的问题 解决方案&#xff1a; 添加以下环境变量 变量名: PUB_HOSTED_URL 变量值: https://pub.flutter-io.cn …
阅读更多...
【题解】【枚举】——[NOIP2018 普及组] 龙虎斗

【题解】【枚举】——[NOIP2018 普及组] 龙虎斗

【题解】【枚举】——[NOIP2018 普及组] 龙虎斗 [NOIP2018 普及组] 龙虎斗题目背景题目描述输入格式输出格式输入输出样例输入 #1输出 #1输入 #2输出 #2 提示 1.思路解析2.AC代码 [NOIP2018 普及组] 龙虎斗 通往洛谷的传送门 题目背景 NOIP2018 普及组 T2 题目描述 轩轩和…
阅读更多...
记录仪方案_记录仪安卓主板定制_音视频记录仪PCBA定制开发

记录仪方案_记录仪安卓主板定制_音视频记录仪PCBA定制开发

记录仪主板采用了强大的联发科MTK8768处理器&#xff0c;拥有出色的性能表现。它搭载了四个主频为2.0GHz的Cortex-A53核心与四个主频为1.5GHz的Cortex-A53核心&#xff0c;确保了高效的处理速度。此外&#xff0c;主板配备了4GB的RAM(可选8GB)&#xff0c;并且内置64GB的ROM(可…
阅读更多...
数据集-目标检测系列 车牌检测识别 数据集 CCPD2019

数据集-目标检测系列 车牌检测识别 数据集 CCPD2019

车牌检测&识别 数据集 CCPD2019 DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种数据集&#xff0c;持续增加中。 需要更多数据资源和技术解决方案&#xff0c;知识星球&#xff1a; “DataBall - X 数据球(free)” 贵在坚持&#xff01; 数据样…
阅读更多...
Eclipse设置自动补全后 输入字符串类型变量后会自动追加String的解决方案

Eclipse设置自动补全后 输入字符串类型变量后会自动追加String的解决方案

很简单&#xff0c;先打开eclipse&#xff0c;顶部找到window&#xff0c;点击preference 弹出一个设置窗口&#xff1b; 在窗口左侧选择Java>Editor>Content Assist&#xff1b;然后再右侧找到Disable insertion triggers except Enter 的选项&#xff08;禁用除Enter以…
阅读更多...
uniApp上传文件踩坑日记

uniApp上传文件踩坑日记

最近在做移动端app&#xff0c;开始接触uniapp。想着直接用PC端的前后端API去做文件上传&#xff0c;但是uniapp的底层把请求拆成了普通请求和文件上传请求&#xff0c;所以不能用一个axios去做所有请求的处理&#xff0c;拆成uni.request和uni.uploadFile去分别处理两种情况。…
阅读更多...
Qt Quick：CheckBox 复选框

Qt Quick：CheckBox 复选框

复选框不止选中和未选中2种状态哦&#xff0c;它还有1种部分选中的状态。这3种状态都是Qt自带的&#xff0c;如果想让复选框有部分选中这个状态&#xff0c;需要将三态属性&#xff08;tristate&#xff09;设为true。 未选中的状态值为0&#xff0c;部分选中是1&#xff0c;选…
阅读更多...
Pytorch | 从零构建GoogleNet对CIFAR10进行分类

Pytorch | 从零构建GoogleNet对CIFAR10进行分类

Pytorch | 从零构建GoogleNet对CIFAR10进行分类 CIFAR10数据集GoogleNet网络结构特点网络整体架构应用与影响Inceptionv1到Inceptionv2 GoogleNet结构代码详解结构代码代码详解Inception 类初始化方法前向传播 forward GoogleNet 类初始化方法前向传播 forward 训练过程和测试结…
阅读更多...
PCIe_Host驱动分析_地址映射

PCIe_Host驱动分析_地址映射

往期内容 本文章相关专栏往期内容&#xff0c;PCI/PCIe子系统专栏&#xff1a; 嵌入式系统的内存访问和总线通信机制解析、PCI/PCIe引入 深入解析非桥PCI设备的访问和配置方法 PCI桥设备的访问方法、软件角度讲解PCIe设备的硬件结构 深入解析PCIe设备事务层与配置过程 PCIe的三…
阅读更多...
jenkins 出现 Jenkins: 403 No valid crumb was included in the request

jenkins 出现 Jenkins: 403 No valid crumb was included in the request

文章目录 前言解决方式:1.跨站请求为找保护勾选"代理兼容"2.全局变量或者节点上添加环境变量3.&#xff08;可选&#xff09;下载插件 the strict Crumb Issuer plugin4.重启 前言 jenkins运行时间长了&#xff0c;经常出现点了好几次才能构建&#xff0c;然后报了Je…
阅读更多...
CentOS 7 安装、测试和部署FastDFS

CentOS 7 安装、测试和部署FastDFS

目录 FastDFS环境搭建 安装 libfastcommon 库 安装FastDFS 查看编译后的文件 FastDFS配置 FastDFS启动 启动tracker服务 启动storage服务 查看storage是否已经注册到了tracker下 查看存储文件的目录 FastDFS重启 FastDFS关闭 使用fdfs_test进行测试 修改client.co…
阅读更多...
【WRF教程第3.1期】预处理系统 WPS 详解：以4.5版本为例

【WRF教程第3.1期】预处理系统 WPS 详解：以4.5版本为例

预处理系统 WPS 详解&#xff1a;以4.5版本为例 每个 WPS 程序的功能程序1&#xff1a;geogrid程序2&#xff1a;ungrib程序3&#xff1a;metgrid WPS运行&#xff08;Running the WPS&#xff09;步骤1&#xff1a;Define model domains with geogrid步骤2&#xff1a;Extract…
阅读更多...
Flutter组件————FloatingActionButton

Flutter组件————FloatingActionButton

FloatingActionButton 是Flutter中的一个组件&#xff0c;通常用于显示一个圆形的按钮&#xff0c;它悬浮在内容之上&#xff0c;旨在吸引用户的注意力&#xff0c;并代表屏幕上的主要动作。这种按钮是Material Design的一部分&#xff0c;通常放置在页面的右下角&#xff0c;但…
阅读更多...
在Windows11上编译C#的实现Mono的步骤

在Windows11上编译C#的实现Mono的步骤

在Windows11上编译Mono的步骤 1、 在win11打开开发者模式，在更新和安全选项里，如下图： 2、下载并安装64位的cygwin, 下载网站：www.cygwin.com 3、 安装 Visual Studio 2015 or later 的社区版本。 4、 下载Mono的windows最新版本。 5、 在cmd.exe里运行下面的命令来安…
阅读更多...
[HNCTF 2022 Week1]你想学密码吗？

[HNCTF 2022 Week1]你想学密码吗？

下载附件用记事本打开 把这些代码放在pytho中 # encode utf-8 # python3 # pycryptodemo 3.12.0import Crypto.PublicKey as pk from hashlib import md5 from functools import reducea sum([len(str(i)) for i in pk.__dict__]) funcs list(pk.__dict__.keys()) b reduc…
阅读更多...
【记录50】uniapp安装uview插件，样式引入失败分析及解决

【记录50】uniapp安装uview插件，样式引入失败分析及解决

SassError: Undefined variable: "$u-border-color". 表示样式变量$u-border-color没定义&#xff0c;实际是定义的 首先确保安装了scss/sass 其次&#xff0c;根目录下 app.vue中是否全局引入 <style lang"scss">import /uni_modules/uview-ui/in…
阅读更多...
如何写申请essay

如何写申请essay

俗话说&#xff1a;万事开头难。英国留学申请essay也是如此。申请essay怎么写呢&#xff1f;一篇essay的开头是否精彩直接关系到导师能否被你的文字吸引。一把而言&#xff0c;招生官每天阅读的essay在200封以上&#xff0c;每篇阅读在12分钟以内&#xff0c;所以你的essay开头…
阅读更多...
14-zookeeper环境搭建

14-zookeeper环境搭建

0、环境 java&#xff1a;1.8zookeeper&#xff1a;3.5.6 1、下载 zookeeper下载点击这里。 2、安装 下载完成后解压&#xff0c;放到你想放的目录里。先看一下zookeeper的目录结构&#xff0c;如下图&#xff1a; 进入conf目录&#xff0c;复制zoo_sample.cfg&#xff0…
阅读更多...
【UE5】pmx导入UE5，套动作。（防止“气球人”现象。

【UE5】pmx导入UE5，套动作。（防止“气球人”现象。

参考视频&#xff1a;UE5Animation 16: MMD模型與動作導入 (繁中自動字幕) 问题所在&#xff1a; 做法记录&#xff08;自用&#xff09; 1.导入pmx&#xff0c;删除这两个。 2.转换给blender&#xff0c;清理节点。 3.导出时&#xff0c;内嵌贴图&#xff0c;选“复制”。 …
阅读更多...
yolo 视频流播放并进行目标识别

yolo 视频流播放并进行目标识别

根据视频流&#xff0c;实时的进行目标识别 一、下载 [lal](https://github.com/q191201771/lal/releases/tag/v0.37.4)二、安装 [FFmpeg](https://ffmpeg.org/)三、完整代码演示 需要前置了解YOLO的完整操作 使用labelImg标注&#xff0c;YOLO进行目标训练 一、下载 lal 下载…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023