No sé nada sobre javascript, pero solo tengo que hacer que esto funcione, ¿cómo puedo contar la cantidad de veces que las personas han hecho clic en un botón? El código para ello está a continuación. Quiero contar la cantidad de veces que TODOS han hecho clic en el botón, como si hubiera hecho clic en el botón desde otra PC.
@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>Puede contar las veces que cada usuario hace clic con almacenamiento local (se guarda solo en su navegador) (Lea aquí: https://www.w3schools.com/jsref/prop_win_localstorage.asp )
Pero si tuviera que realizar un seguimiento de todos los usuarios, necesitaría una base de datos para eso. Para aplicaciones web, recomendaría firebase.
Haga clic en Ejecutar fragmento de código para demostración
Verifique el código a continuación
@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>Debe escribir un javascript porque eso hará que su botón piense y cuente cuántas veces se presiona un botón. Ejemplo-
<!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>