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

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

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审查元素，而第二种就是很彻底的必须访问密码才会转到页面内，但是相对来说毕竟简陋。