点击几个按钮后动态网站更改
Dynamic website change after few buttons clicked
首先,我对此很陌生,如果我说了一些愚蠢的话,请提前道歉。
这个想法很简单:比方说我有一个有很多按钮的网站。用户单击一些按钮,在它们下面会显示一些文本。如果用户单击了错误的按钮,文本将消失,而另一个文本将出现。
我可以使用带有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>
您可以通过AJAX
实现这一点。这里我给出了jQuery
和AJAX
的最小例子。这不是一个完整的解决方案。您必须根据自己的要求更改代码。您可以在这里参考jQuery和带有AJAX的jQuery。
<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>
您可以使用纯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次,用任何按钮编号替换1。我知道这还有很长的路要走,可能有办法简化它,但我对此也很陌生。
对于胜利消息,只需添加if语句,检查lastClicked==是否为您想要的任意3个数字。
- 点击几个按钮后动态网站更改
- 没有客户端 URL 处理的动态网站
- 动态网站更新脚本
- 如何为现有的动态网站制作安卓应用程序
- 如何从动态网站获取完整的网址
- 使用 JavaScript/jquery/PHP 构建一个动态网站,并将 HTML 存储在 MySQL 中
- 如何从动态网站在LESS中设置变量
- 动态网站宽度
- 动态网站的JS框架
- 动态网站的分页头
- 在动态网站中安排JS代码的最佳实践
- 动态网站内容没有Javascript
- 文件系统中的动态网站导航(一个文件用于所有页面)—无需Web服务器
- 使用AJAX为单页动态网站设计和SEO
- JQuery动态网站,页面链接
- 如何将Javascript链接到动态网站
- Angular.js:在动态网站中使用指令
- 保持动态网站的标题
- 垂直距离控制如果它溢出到下一行,在移动动态网站
- 如何在PHP和JS中定制动态网站