时间戳

首页 > 解决方案 > 统计所有用户点击的全局点击计数器

javascript - 统计所有用户点击的全局点击计数器

问题描述

我在 CSS、HTML 和 JS 方面很熟悉，但我希望创建点击计数器来计算所有用户的所有点击次数。

IE。当计数器显示“0”时，如果 A 已打开站点并单击计数器，则 B 通过单击计数器一次也得到“2”而不是“1”的结果。

我看过很多关于如何创建计数器的视频，但是一旦页面重新加载它就会重置，这不是我想要的。

<!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">
    <title>Counter App</title>
<!-- ---------------- linked css file ----------------- -->
<link rel="stylesheet" href="counter.css">

</head>
<body>

    <!-- ----------------html formated --------------- -->

<div class="container">
    <main>
        <h1>Counter App</h1>
        <div class="button-counter">
            <button class="btn decreased"> - </button>
            <span> 0 </span>
            <button class="btn increase"> + </button>  
        </div>
    </main>
</div>





<!-- ---------------- linked js file ---------------- -->
    <script src="app.js"></script>
    
</body>
</html>


    // initial value of span ========  

let value = 0 

// getting value by reference ==========

const span = document.querySelector("span");
const decreased = document.querySelector(".decreased")
const increase = document.querySelector(".increase");


// --------- calling the even function -------------------

decreased.addEventListener("click" , () => {
    span.innerHTML=value--;

});

// --------------- event for increase button--------------------

increase.addEventListener("click" , () =>{
    span.innerHTML=value++;
})
    

*{
    margin 0%;
    padding: 0%;
    box-sizing: border-box;
    background-color: rgba(255, 166, 0, 0.644);

}
.container
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: orange;
    border: 1px solid orange;
    border-radius: 20px;
    box-shadow: 5px 5px 4px 2px rgb(211, 161, 96);
    width: 300px;
    height: 200px;

}

h1{
    font-size: 30px;
    text-align: center;
    text-shadow: 2px 2px rgba(5, 5, 5, 5);
    color: white;


}

.button-counter{
    display: flex;
    justify-content: space-around;
    align-items: center;
    
}
button
{
    text-align: center;
    padding: 10px;
    margin: 10px;
    font-size: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(255, 166, 0, 0.445);
    cursor: pointer;
    box-shadow: 5px 5px 5px rgba(255, 166, 0, 0.829);
    border: 1px solid rgb(231, 230, 230);
    font-weight: bolder;
    color: white;
    

}
button:hover{
    background-color: #fff;
    color: black;

}
span
{
    text-align: center;
    box-shadow: 5px 5px 4px 2px rgb(150, 143, 121);
    font-size: 32px;
    font-weight: bolder;
    
    border-radius: 10px;
    width: 50px;
    border: 1px solid rgb(90, 89, 89);
    color: rgb(36, 17, 33);

}

标签： javascripthtmlcss

解决方案

如果您希望下一个用户从前一个左数开始计数，您需要将数据存储在某处（例如在数据库中），并且当页面首先加载时，您再次读取该值并将其显示给用户。

答案是否定的，你不能只用 CSS、HTML 和 JS 做到这一点。

推荐阅读