使用JavaScript提示作为小型网站的密码

Question

这当然不是最安全的方法，但我只有html和javascript，所以这是我能想到的最好的方法。我构建了一些示例代码来展示它应该如何工作，但它不起作用！

密码应该每天都会更改，让人们更难猜到。用户获取密码的方式将是通过谷歌文档发送的html文件，并手动批准对其的访问。在显示密码的文件上，javascript将被多次混淆。还有一个密码可以查看密码。我已经把这个代码搞了好几天了，什么都没有。。。

window.onload = function() {
chgDailyImg();
document.getElementById('answer').innerHTML = imagearray[i]
}
var passwordInput = prompt("Please enter the password to continue...");
const imagearray = new Array();
imagearray[0] = "9G7DcwnWafg*EtMH";
imagearray[1] = "MDe^5qHTG#P9dHBm";
imagearray[2] = "h%$u@2Nfu8FL9H+R";
imagearray[3] = "X&NB5tYdUs5u@G#z";
imagearray[4] = "k#Rc3LGsCdu4q%qZ";
imagearray[5] = "!$p!Ss5BA%#4zeAa";
imagearray[6] = "qz63!tue3WCUxJ@R";
let i = 0;
function chgDailyImg() {
let d = new Date();
i = d.getDay();
}
if ((passwordInput, imagearray[i]) === true) {
document.getElementById('hiddenContent').style.visibility = "visible"
console.log("RIGHT")
} else {
document.getElementById('hiddenContent').style.visibility = "hidden"
console.log("WRONG")
}

<h1 id="hiddenContent" style="visiblity: hidden">Hidden Stuff That Requires Password To See!</h1>

Answer 1

您没有检查passwordInput是否正确地位于imagearray中。

要检查密码是否在阵列中：

• 使用(imagearray.indexOf(passwordInput) !== -1)
• 或imagearray.includes(passwordInput)(较少的浏览器支持(

^{查看检查元素是否在数组中的其他方法}

window.onload = function() {
chgDailyImg();
document.getElementById('answer').innerHTML = imagearray[i]
}
var passwordInput = prompt("Please enter the password to continue...").trim();
const imagearray = new Array();
imagearray[0] = "9G7DcwnWafg*EtMH";
imagearray[1] = "MDe^5qHTG#P9dHBm";
imagearray[2] = "h%$u@2Nfu8FL9H+R";
imagearray[3] = "X&NB5tYdUs5u@G#z";
imagearray[4] = "k#Rc3LGsCdu4q%qZ";
imagearray[5] = "!$p!Ss5BA%#4zeAa";
imagearray[6] = "qz63!tue3WCUxJ@R";
let i = 0;
function chgDailyImg() {
let d = new Date();
i = d.getDay();
}
if (imagearray.indexOf(passwordInput) !== -1) {
document.getElementById('hiddenContent').style.visibility = "visible"
console.log("RIGHT")
} else {
document.getElementById('hiddenContent').style.visibility = "hidden"
console.log("WRONG")
}

<h1 id="hiddenContent" style="visiblity: hidden">Hidden Stuff That Requires Password To See!</h1>
<div id="answer"></div>

Answer 2

在对indexOf进行了更多研究后，我确定这不是我所需要的。我利用Chris Happy的代码创建了这个工作代码。

<h1 id="hiddenContent" style="visiblity: ">Hidden Stuff That Requires Password To See!</h1>
<div id="answer"></div>
<script type="text/javascript">
window.onload = function() {
chgDailyImg();
validate();
document.getElementById('answer').innerHTML = imagearray[b]
}
var passwordInput = prompt("Please enter the password to continue...");
const imagearray = new Array();
imagearray[0] = "9G7DcwnWafg*EtMH";
imagearray[1] = "MDe^5qHTG#P9dHBm";
imagearray[2] = "h%$u@2Nfu8FL9H+R";
imagearray[3] = "X&NB5tYdUs5u@G#z";
imagearray[4] = "k#Rc3LGsCdu4q%qZ";
imagearray[5] = "!$p!Ss5BA%#4zeAa";
imagearray[6] = "qz63!tue3WCUxJ@R";
let b = 0;
function chgDailyImg() {
let d = new Date(); /*** create a date object for use ***/
b = d.getDay();
}
function validate() {
if (passwordInput == imagearray[b]) {
console.log("RIGHT")
document.getElementById('hiddenContent').style.visibility = "visible"
} else {
document.getElementById('hiddenContent').style.visibility = "hidden"
console.log("WRONG")
}
}
</script>

我对该代码的理解是，当passwordInput等于imagearray[b]时([b]等于0，直到chgDailyImg()在页面加载上运行，然后[b]等于一周中的几天(，它将显示hiddenContent。在window.onload时，提示使用function validate() if (passwordInput == imagearray[b]) console.log("RIGHT")检查提供的密码是否等于imagearray[b](今天的密码(，然后在加载页面时声明函数validate()。

我最初询问的答案比我预想的要简单得多。我一个月前才开始学习JavaScript，当时我提出的问题听起来很难，但现在我知道了提示是如何操作的，我有了更好的理解。