Question

首先，如果我说一些愚蠢的事情，我会非常感到非常抱歉。

这个想法非常简单：假设我有一个带有大量按钮的网站。用户单击某些按钮，在其下方会显示一些文本。如果用户单击错误的按钮，则会在另一个文本上显示文本消失。

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

为了简单明了，我举一个例子：假设我的网站上有6个按钮，名为1,2,3,4,5和6，下面的文字会列出最后3个按钮点：

console.log('typeOf Cash : ' + typeof cash + ', cash value : ' + cash);
console.log('typeOf pc : ' + typeof pc + ', pc value : ' + pc);

让我们说用户点击按钮1,2和3，然后文本更改为＆＃34;点击最后3个按钮：1,2,3和＃34;之后用户再次点击3，现在文字显示＆＃34;点击最后3个按钮：2,3,3和＃34;。

如果点击特定的3个按钮后，所有按钮都会消失，并且“胜利！”＃34;甚至更大。将显示文本而不是它们。

像门锁密码。

那么，有人可以给我一个如何得到我想要的结果的例子吗？

Answer 1

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

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

此代码段的正确代码为4 3 2。

＆＃13;

// 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);
}

＆＃13;

<!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>

＆＃13;

Answer 2

您可以通过AJAX实现此目的。在这里，我提供jQuery与AJAX的最小示例。这不是一个完整的解决方案。您必须根据您的要求更改代码。您可以在此处参考jQuery和jQuery with AJAX。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

</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"></span></p>

<script>

    $(document).ready(function(){

      $("button").on("click", function(){

       /* You need to write your logic accordingly */

       var val = $("#clicked").text()+","+$(this).text();

        $("#clicked").text(val)

    //Update to Server using AJAX

        $.ajax({
          url: "YourFileOnServer.php",
          data: {val: val},
          type: "post",
          success: function(data){
                  //Response from your Server
          }
        });

      });

    });

</script>   

</body>
</html>

Answer 3

您可以使用纯JavaScript执行此操作（但这可能不是最佳方式）

HTML：

<html>
<body>
<button type="button" onclick="button1()">1</button>
<button type="button" onclick="button2()">2</button>
<button type="button" onclick="button3()">3</button>
<button type="button" onclick="button4()">4</button>
<button type="button" onclick="button5()">5</button>
<button type="button" onclick="button6()">6</button>
<br/>
<p id="lastClicked">Last 3 buttons clicked: none</p>
<p hidden id="lastClicked1"></p>
<p hidden id="lastClicked2"></p>
<p hidden id="lastClicked3"></p>
<script src="button.js"></script>
</body>
</html>

JavaScript的：

function button1() {
lastClicked1 = document.getElementById("lastClicked1").innerHTML;
lastClicked2 = document.getElementById("lastClicked2").innerHTML;
lastClicked3 = document.getElementById("lastClicked3").innerHTML;

document.getElementById("lastClicked1").innerHTML = lastClicked2;
document.getElementById("lastClicked2").innerHTML = lastClicked3;
document.getElementById("lastClicked3").innerHTML = "1";

lastClicked1 = document.getElementById("lastClicked1").innerHTML;
lastClicked2 = document.getElementById("lastClicked2").innerHTML;
lastClicked3 = document.getElementById("lastClicked3").innerHTML;

document.getElementById("lastClicked").innerHTML = "Last 3 buttons clicked: " + lastClicked1 + ", " + lastClicked2 + ", " + lastClicked3;

}

重复6次，用任何按钮编号替换1s。我知道这有很长的路要走，可能有一种方法可以简化这一点，但我也很陌生。

对于胜利消息，只需添加一个if语句来检查lastClicked ==你想要的3个数字。

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

3 个答案: