如何計算一個按鈕在網站上被點擊的次數？-有解無憂

我對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>

uj5u.com熱心網友回復：

您應該撰寫一個 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>

uj5u.com熱心網友回復：

您可以使用 localstorage 計算每個用戶點擊的次數（閱讀此處：https ://www.w3schools.com/jsref/prop_win_localstorage.asp ）

但是，如果要跟蹤所有用戶，則需要一個資料庫。對于網路應用程式，我會推薦 firebase。

uj5u.com熱心網友回復：

單擊運行代碼片段進行演示

檢查代碼下面的代碼

@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>Yout Have Clucked Button</p>
    <p id="demo"></p>
    <script>
      let count = 0;
      function myFunction() {
        count  ;
        document.getElementById("demo").innerHTML = count;
      }
    </script>
  </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/421166.html

標籤：

上一篇：CSS背景圖片回應式覆寫底部

下一篇：html/css文本未出現在div中