如何计算网站上按钮被点击的次数？

Question

我对 javascript 一无所知，但我只需要完成这项工作，我如何计算人们点击按钮的次数？它的代码如下。我想计算每个人点击按钮的次数，就像我从另一台电脑上点击按钮一样。

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');

body{
    background-color: #2e2e2e;
}

.mainBtn{
    padding: 10px 20px;
    border-radius: 6px;
    border-width: 2px;
    border-color: #2b2b2b;
    border-style: solid;
    font-size: 45px;
    color: white;
    font-family: 'Roboto', sans-serif;
    background-color: #2b2b2b;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -60%);
    transition: 0.3s;
}

.mainBtn:hover{
    transition: 0.3s;
    background-color: #383838;
    border-radius: 6px;
    border-width: 2px;
    border-color: #383838;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device -width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Don't Do It. DT</title>
</head>
<body>
    <button class="mainBtn">Button</button>
</body> 
</html>

Answer 1

您可以使用 localstorage 计算每个用户的点击次数（它仅保存到他们的浏览器中）（阅读此处：https://www.w3schools.com/jsref/prop_win_localstorage.asp）

但是如果您要跟踪所有用户，则需要一个数据库。对于网络应用程序，我会推荐 firebase。

Answer 2

单击运行代码段进行演示

检查下面的代码

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap");

body {
  background-color: #2e2e2e;
}

.mainBtn {
  padding: 10px 20px;
  border-radius: 6px;
  border-width: 2px;
  border-color: #2b2b2b;
  border-style: solid;
  font-size: 45px;
  color: white;
  font-family: "Roboto", sans-serif;
  background-color: #2b2b2b;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -60%);
  transition: 0.3s;
}

.mainBtn:hover {
  transition: 0.3s;
  background-color: #383838;
  border-radius: 6px;
  border-width: 2px;
  border-color: #383838;
}

p {
  color: aqua;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device -width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Don't Do It. DT</title>
  </head>
  <body>
    <button onclick="myFunction()" class="mainBtn">Button</button>
    <p>You Have Clicked Button</p>
    <p id="demo"></p>
    <script>
      let count = 0;
      function myFunction() {
        count++;
        document.getElementById("demo").innerHTML = count;
      }
    </script>
  </body>
</html>

Answer 3

你应该写一个 javascript 因为这会让你的按钮思考并计算按钮被按下的次数。示例-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device -width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Example</title>
  </head>
  <body>
    <button onclick="myFunction()" class="mainBtn">Button</button>
    <p>The button has been clicked</p>
    <p id="demo"></p>
    <script>
      let count = 0;
      function myFunction() {
        count++;
        document.getElementById("demo").innerHTML = count;
      }
    </script>
  </body>
</html>

如何计算网站上按钮被点击的次数？

How can I count the amount of times a button has been clicked on a website?

html

javascript

css

button