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

Question

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

密码应每天更改，使人们更难猜出密码。用户获取密码的方式是通过 google 文档发送 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)（浏览器支持少一点）

^{See other ways of checking if an element is in an array}

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's 代码来创建此工作代码。

<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一个月前才开始学习，当时我提的问题听起来很难，但现在知道了提示是如何操作的，我就更加理解了。

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

Using a JavaScript Prompt as a Password for a Small Website

html

javascript

arrays

performance

function