使用 php 或 js 的可点击 html 按钮计数器

Question

我对 php 和 javascript 非常陌生，我想知道如何制作一个全局计数器，每次用户按下按钮时都会向其添加 1。即使有人在另一台计算机上或刷新页面，该数字也将保持不变。我有这个使用javascript：

<script type="text/javascript">
var clicks = 0
function onClick() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
};
</script>
<button type="button" onClick="onClick()">Click me</button>
<footer>Clicks: <a id="clicks">0</a></footer>

但是当有人刷新页面时，它会重置数字，并且它不是全局的。我尝试在 php 中制作一些东西：

<?php

$clicks = 0
public function clickButton()
{
    $clicks = $clicks + 1
}

?>

但我不知道自己在做什么，也不知道如何调用 php 函数或显示 php 变量。

Answer 1

您当前的问题是您的 Click 变量仅存储在单击的一台计算机上。

你需要做两件事：

1. 存储点击变量。
2. 读取点击变量。
3. （实时更新。）

---

存储点击变量：

正如Vinicius Maia所说，您需要在用户之间建立连接，这可以通过数据库来完成，请阅读MySQL。

或者您可以使用更简单的方法，使用php读取并创建/写入Click变量到名为Clicks.txt的文件中。请参阅 W3C 上的 PHP Filesystem Functions

---

读取点击变量：

如果您选择 MySQL 方法，您应该使用命令，否则如果您选择原始方法，您可以使用以下命令：Php File Get Content

---

实时更新：

要实时显示变量而不是让您的用户刷新，您应该能够使用AJAX，因此请务必查看一下。这个question 可能有用。

您应该创建一个interval loop，它应该不断检查变量中的更新。这个question 可能有用

---

一起：

好好看看 Jonas w's 的回答，他给出了一个很好的例子来说明你如何做到这一点，他会按照你的要求去做。使用这种策略的唯一缺点是每次点击都会刷新，这对某些用户来说可能很烦人。

但他所做的是：

1. 他读取变量。
2. 当您单击该按钮时，他通过打开它来运行 PHP 代码。
3. 完成代码后，他会将您发送回索引并刷新页面
4. 重复...

但是对于你的用户来说，也许你应该使用这个系统来添加直播功能：

1. 读取变量。
2. 使用 AJAX 创建一个循环，调用一个检查并返回更新的 php 函数
3. 当您单击按钮时，使用 AJAX 运行另一个 php 函数来更新变量
4. 重复...

Answer 2

php 变量只在一个请求中起作用。因此，如果两个人请求您的站点，脚本会以两个不同的版本运行两次。您必须将变量存储在服务器上。 您可以将其存储到 mysql 数据库中（关于 php.net 的好文章） 或者你可以制作一个 counter.txt 并用 php 编辑它。 （php.net 上的“Fopen”）

php在服务器上运行，无法与客户端js交互。您需要将此“按钮单击”发送到服务器。您可以使用 AJAX ( google that) 或重新加载网站并将获取和帖子传递到服务器

更新.php：

<?php
$file=fopen("counter.txt","c+");//open or create counter.txt
$counter=fread($file, 10);//read content
$counter=(int)$counter+1;//add one
fwrite($file,$counter);//save counter
fclose($file);//close file
Header("Location: index.php");//go back to index.php
?>

索引.php：

<?php
 $file=fopen("counter.txt","c+");
$counter=fread($file, 10);
fclose($file);
Echo $counter;
?>
<a href="update.php">Click me</a>

Answer 3

Javascript 或 PHP 无法解决您的问题。仅仅因为您需要的是所有将访问您网站的用户之间的某种联系。为此，您必须使用某种数据库。我建议你开始学习 MySQL。 检查这个：http://php.net/manual/en/book.mysqli.php

Answer 4

您拥有正确的 JavaScript 逻辑，现在您只需将 clicks 存储在不受浏览器刷新影响的地方！

我的第一个建议是使用 HTML5 的 localStorage object。

链接上的示例非常好。看看你能不能做点什么！

Answer 5

如果您需要不同的用户看到相同的计数器，那么您需要将计数器保存在数据库中。

问候。