有时候会遇到自己的一个网页不想让别人访问,或者仅限于某些人访问,这个时候可以给自己的网站添加一个访问密码验证的方式,输入密码才可以继续访问你的网站。
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审查元素,而第二种就是很彻底的必须访问密码才会转到页面内,但是相对来说毕竟简陋。