我最近遇到了一些关于JQuery和PHP的问题。我一直在创建一个网页，它有一个按钮，很多时候任何人都按下了按钮。目前，我正在使用JQuery和PHP来使按钮按下计数每秒更新4次。
以下是代码：
的index.php：
<!DOCTYPE html>
<html>
<head>
<title>The Button</title>
<audio id="click">
/* Big thanks to freesound.org and user "brnck" for the button click sound!
You can download the sound at: http://freesound.org/people/brnck/sounds/257357/ */
<source src="button-click.wav">
</audio>
</head>
<style>
#background1 {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: -1;
}
#button {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: 0;
}
/* This CSS class of #button is for the button press animation */
#button.press {
-webkit-animation-name: pressAnim; /* Webkit Syntax */
-webkit-animation-duration: 1s;
animation-name: pressAnim; /* Standard Syntax */
animation-duration: .75s;
}
#background2 {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: 1;
}
#number {
text-align: center;
font-style: "Arial Black";
font-size: 100px;
}
/* Webkit Animation */
@-webkit-keyframes pressAnim {
0% {left:50%; top:65%;}
50% {left:50%; top: calc(65% + 18px);}
100% {left:50%; top:65%;}
}
/* Standard Animation */
@keyframes pressAnim {
0% {left:50%; top:65%;}
50% {left:50%; top: calc(65% + 18px);}
100% {left:50%; top:65%;}
}
</style>
<body>
<div id="background1">
<img src="ButtonTop.png" width="290" height="372">
</div>
<div id="button">
<img src="Button.png" width="290" height="372">
</div>
<div id="background2">
<img src="ButtonBottom.png" onMouseDown="press()" width="290" height="372">
</div>
<div id="number">
<?php
include('reload.php');
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
$(document).ready(function(){
/* This function is for refreshing the total clicks number to make it live */
setInterval(function reload() {
console.log('Reloaded Clicks')
$('#number').load('reload.php');
}, 250);
});
</script>
<script>
/* This function is for the button animation, button sound, & button press delay */
var button = document.getElementById('button');
function press() {
if(button.className == "") {
button.className = "press";
document.getElementById('click').play();
/* send click event to server */
button.addEventListener("webkitAnimationEnd", removeListener);
}
};
function removeListener(event) {
button.removeEventListener("webkitAnimationEnd", removeListener);
button.className = "";
}
</script>
</body>
reload.php：
<?php
$my_file = 'clicks.txt';
$handle = fopen($my_file, 'r');
$value = fread($handle,filesize($my_file));
echo $value;
?>
在JQuery部分，有一个登录控制台的日志，但是当我进入网站时，日志中没有任何内容，所以我认为由于某种原因完全跳过了JQuery部分。虽然，控制台中没有错误，但这使得问题更难识别......
如果您想查看网站，这里是address，但正常运行时间不是很好，所以如果您无法访问该网站，请不要惊慌。
答案 0 :(得分：0)
您的代码无效，因为您在脚本中定义了加载jQuery库的逻辑的某些部分。 script标记的内容将被废弃，并替换为列为src属性的网址内容。
所以你需要将$(document).ready()移动到第二个块。当你在这里时，为了安全起见，你的所有代码都应该在ready块中定义，否则你无法真正控制它何时被执行。
最后，正如Ken Franqueiro和Kaleb Klein指出的那样，每250毫秒刷新一次数据会导致服务器无法使用。
答案 1 :(得分：0)
对于任何有同样问题的人，我想出的解决方案归功于Guillaume Bodi，Ken Franqueiro和Kaleb Klein：
<!DOCTYPE html>
<html>
<head>
<title>The Button</title>
<audio id="click">
/* Big thanks to freesound.org and user "brnck" for the button click sound!
You can download the sound at: http://freesound.org/people/brnck/sounds/257357/ */
<source src="button-click.wav">
</audio>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<style>
#background1 {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: -1;
}
#button {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: 0;
}
/* This CSS class of #button is for the button press animation */
#button.press {
-webkit-animation-name: pressAnim; /* Webkit Syntax */
-webkit-animation-duration: 1s;
animation-name: pressAnim; /* Standard Syntax */
animation-duration: .75s;
}
#background2 {
image-rendering:-webkit-optimize-contrast;
position: absolute;
top: 65%;
left: 50%;
margin-top: -167.5px;
margin-left: -145px;
z-index: 1;
}
#number {
text-align: center;
font-style: "Arial Black";
font-size: 100px;
}
/* Webkit Animation */
@-webkit-keyframes pressAnim {
0% {left:50%; top:65%;}
50% {left:50%; top: calc(65% + 18px);}
100% {left:50%; top:65%;}
}
/* Standard Animation */
@keyframes pressAnim {
0% {left:50%; top:65%;}
50% {left:50%; top: calc(65% + 18px);}
100% {left:50%; top:65%;}
}
</style>
<body>
<div id="background1">
<img src="ButtonTop.png" width="290" height="372">
</div>
<div id="button">
<img src="Button.png" width="290" height="372">
</div>
<div id="background2">
<img src="ButtonBottom.png" onMouseDown="press()" width="290" height="372">
</div>
<div id="number">
<?php
include('reload.php');
?>
</div>
<script>
$(document).ready(setInterval(function(){
console.log('Reloaded Clicks')
$('#number').load('reload.php');
}, 2000));
/* This function is for the button animation, button sound, & button press delay */
var button = document.getElementById('button');
function press() {
if(button.className == "") {
button.className = "press";
document.getElementById('click').play();
/* send click event to server */
button.addEventListener("webkitAnimationEnd", removeListener);
}
};
function removeListener(event) {
button.removeEventListener("webkitAnimationEnd", removeListener);
button.className = "";
}
</script>
</body>
总结一下我做了什么，我摆脱了不必要的额外功能，并将脚本源放在头部。另外，我每两秒钟重新加载一次。
如果需要，我会慢下来，但这会产生问题。如果我有一个客户端点击按钮，并且计数几秒钟没有变化，我们就会得到所谓的滞后。我计划通过客户部分的假设来解决这个问题。
通过＆＃34;假设＆＃34;，我的意思是我让客户端通知服务器他们点击了按钮，然后让客户端添加一个到他们的计数。然后，几秒钟后，服务器将响应新的总点击次数，其中包括来自其他客户端的点击次数。新号码将在客户端上更新，一切都会很好。
希望这一切都有道理，但它确实不需要。它并不重要，只是我自己的一些计划和理论。