给网站页面添加一个访问密码验证

有时候会遇到自己的一个网页不想让别人访问,或者仅限于某些人访问,这个时候可以给自己的网站添加一个访问密码验证的方式,输入密码才可以继续访问你的网站。

SweetAlert方式:

代码:

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script type="text/javascript">
 swal({
	title:'请输入访问口令',
	text:"该网页需要口令才能访问,请填写访问口令:",
	type:'input',
	closeOnConfirm: false,
	closeOnCancel: false,
	confirmButtonText: "确 认",
	inputPlaceholder:"请填写访问口令",
	showLoaderOnConfirm:true,
	},function(inputValue){
		if (inputValue != '123') {
			swal.showInputError('口令错误,请重新输入');
			return;
		}
		else{
			swal.close('123');
			return;
		}			
	});
</script>

已经集成SweetAlert的CDN文件在里面,直接复制代码放到想添加密码的网页head标签内就可以实现,密码为123,自己修改。

JS方式实现:

代码:

<script type="text/javascript">
loopy();
function loopy(){
	var sWord ="";
	while (sWord != "123") {
		sWord = prompt("输入正确口令后才能访问:");
	}
	alert("欢迎访问!");
}
</script>

这俩种方式都是可以实现网站需要输入密码才可以访问的功能,但是各有优缺点,SweetAlert方式虽然美观,但是还是会看见部分网站内容,而已右键或者F12都是可以查看到密码的,建议再加一个屏蔽右键和禁止F12审查元素,而第二种就是很彻底的必须访问密码才会转到页面内,但是相对来说毕竟简陋。

给TA打赏
共{{data.count}}人
人已打赏
相关技能

一段CSS代码让全站变灰,进入"悼念模式"

2021-12-14 20:15:46

共享资源想法探索相关技能

不需要服务器和域名即可将微擎快速部署至云托管实战

2022-3-16 21:26:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧