我在 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);
}
uj5u.com熱心網友回復：
如果您希望下一個用戶從上一個用戶的左邊開始計數，您需要將資料存盤在某處（例如在資料庫中），并且當頁面首先加載時，您再次讀取該值并將其顯示給用戶。
答案是否定的，你不能只用 CSS、HTML 和 JS 做到這一點。
uj5u.com熱心網友回復：
window.localStorage.setItem(name, data); // -> set item
window.localStorage.getItem(name); // -> get item
缺點
- 可以使用 DevTools 更改
- 如果快取被清除則重置
如果您不希望那樣，則必須使用資料庫，因此您需要一個后端
編輯：您需要一個資料庫和一個服務器才能在多個用戶和/或客戶端之間共享資料
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/330112.html
標籤：javascript html css
上一篇：根據內容調整邊框