แจก Code สร้าง Web Click Counter แบบแยกระหว่าง Single Click / Double Click / Triple Click ได้ และเป็น Responsive Website ครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Click Counter Website</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #ffffff;
}
div {
font-size: 48px;
margin: 20px;
border: 1px solid #000000;
padding: 10px;
background-color: #cccccc;
}
span {
display: inline-block;
margin: 10px;
padding: 10px;
width: 100px;
height: 30px;
font-size: 20px;
text-align: center;
border: 1px solid #000000;
background-color: #eeeeee;
color: #000;
font-weight: bold;
}
button {
font-size: 24px;
padding: 10px;
border: 1px solid #000000;
background-color: #0000ff;
color: #ffffff;
}
@media (max-width: 768px) {
button {
width: 50%;
}
span {
width: 50%;
}
}
@media (max-width: 480px) {
button {
width: 70%;
}
span {
width: 70%;
}
}
</style>
</head>
<body>
<div id="count">0</div>
<span id="single">Single: 0</span>
<span id="double">Double: 0</span>
<span id="triple">Triple: 0</span><br><br>
<button id="click">Click Me</button>
<script>
// Get the div and span elements from the HTML document
const div = document.getElementById("count");
const single = document.getElementById("single");
const double = document.getElementById("double");
const triple = document.getElementById("triple");
// Get the button element from the HTML document
const button = document.getElementById("click");
// Initialize the click counts and the timestamps of the last three clicks
let totalCount = 0;
let singleCount = 0;
let doubleCount = 0;
let tripleCount = 0;
let lastClick = 0;
let secondLastClick = 0;
let thirdLastClick = 0;
// Define the maximum time interval between two clicks in milliseconds
const maxInterval = 300;
// Add an event listener to the button element that will execute a function on every click
button.addEventListener("click", function() {
// Increment the total click count by one and update the div element
totalCount++;
div.textContent = totalCount;
// Shift the timestamps of the last three clicks by one position and assign the current timestamp to the last position
thirdLastClick = secondLastClick;
secondLastClick = lastClick;
lastClick = Date.now();
// Compare the timestamps of the last three clicks and determine if they are within the maximum time interval
if (lastClick - secondLastClick <= maxInterval && secondLastClick - thirdLastClick <= maxInterval) {
// If yes, increment the triple click count by one and update the span element
tripleCount++;
triple.textContent = "Triple: " + tripleCount;
} else if (lastClick - secondLastClick <= maxInterval) {
// If yes, increment the double click count by one and update the span element
doubleCount++;
double.textContent = "Double: " + doubleCount;
} else {
// If no, increment the single click count by one and update the span element
singleCount++;
single.textContent = "Single: " + singleCount;
}
});
</script>
</body>
</html>
Load balance : Server 02
