javascript - 单击几个按钮后动态网站更改

标签 javascript php html

首先,我对此很陌生,如果我说了一些愚蠢的话,请提前道歉。

这个想法很简单:假设我有一个带有一堆按钮的网站。用户单击一些按钮,在它们下面会出现一些文本。如果用户点击了错误的按钮,文本就会消失,取而代之的是另一个文本。

我可以使用带有 POST 和某些表单的 PHP 来完成此操作,但它会重新加载整个页面,这是我不喜欢的。如果在提交后刷新页面,我会收到烦人的消息“您正在查找的页面使用了您输入的信息。返回那个法师可能会导致您重复执行任何操作。”,我想返回刷新后的默认文本,没有任何消息。

为了简单明了,我将举一个例子:假设我的网站上有 6 个按钮,分别命名为 1、2、3、4、5 和 6,下方的文本将列出最后点击的 3 个按钮:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
  <body>
    <button type="button">1</button>
    <button type="button">2</button>
    <button type="button">3</button>
    <button type="button">4</button>
    <button type="button">5</button>
    <button type="button">6</button>
    <br/>
    <p>Last 3 buttons clicked: none</p>
  </body>
</html>

假设用户单击按钮 1、2 和 3,然后文本变为“最后单击的 3 个按钮:1、2、3”,在用户再次单击 3 之后文本变为“单击的最后 3 个按钮:2、3” , 3".

如果在单击特定的 3 个按钮后所有按钮都消失并且“胜利!”,那就更好了。将显示文本而不是它们。

类似于门锁密码。

那么,有人可以给我一个例子,说明如何获得我想要的结果吗?

最佳答案

您可以使用数组 push()shift()分别在数组末尾添加一个元素和删除第一个元素。

因此,您可以通过处理大小为 <= 的数组来跟踪推送的元素3.

此片段的正确代码是 4 3 2 .

// add event listeners
var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    digicode(this);
  });
}

// the array holding last 3 codes
var codes = [];

// handling the array
var digicode = function(element) {
  codes.push(parseInt(element.innerHTML));
  if (codes.length > 3) codes.shift();
  var codes_tmp = "";
  for (var i = 0; i < codes.length; i++) {
    codes_tmp += codes[i] + " ";
  }
  document.getElementById("clicked").innerHTML = codes_tmp;

  // handling "victory"
  if (codes[0] !== undefined && codes[0] == 4 &&
    codes[1] !== undefined && codes[1] == 3 &&
    codes[2] !== undefined && codes[2] == 2) {
    document.body.innerHTML = "";
    alert("Victory!");
  }
  console.log(codes);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
</head>

<body>
  <button type="button">1</button>
  <button type="button">2</button>
  <button type="button">3</button>
  <button type="button">4</button>
  <button type="button">5</button>
  <button type="button">6</button>
  <br/>
  <p>Last 3 buttons clicked: <span id="clicked">none</span>
  </p>
</body>

</html>

关于javascript - 单击几个按钮后动态网站更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36976994/

相关文章:

javascript - 未捕获( promise )RangeError : Maximum call stack size exceeded in HTML2Canvas

php - Postman:如何在Postman中执行Paypal CURL请求?

php - 在 PHP 中从 SQL 表获取单个结果

html - bootstrap - 隐藏移动菜单(导航栏)

javascript - 按钮需要点击两次才能触发脚本

html - 响应式下拉菜单问题

javascript - AJAX 加载加载微调器

javascript - 使用 ko.mapping.fromJS 将对象数据映射到 View 模型函数

javascript - react : this. 状态与 this.setState

php - Javascript - If 条件由 "&&"分隔(需要建议)