<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>连点器示例</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="container">
<div class="circle"></div>
</div>
<script>
const container = document.querySelector('.container');
const circle = document.querySelector('.circle');
let clickCount = 0;
let startTime = null;
function trackTouch(event) {
event.preventDefault();
const x = event.clientX;
const y = event.clientY;
if (startTime === null) {
startTime = new Date().getTime();
return;
}
const currentTime = new Date().getTime();
const elapsedTime = currentTime - startTime;
if (elapsedTime < 500) {
clickCount++;
} else {
if (clickCount >= 5) {
// 触发滑动操作
triggerSlide(x, y);
}
clickCount = 0;
startTime = currentTime;
}
}
container.addEventListener('touchstart', trackTouch);
container.addEventListener('touchmove', trackTouch);
container.addEventListener('touchend', trackTouch);
function triggerSlide(x, y) {
console.log(触发滑动到 (${x}, ${y}));
// 在这里实现滑动操作，例如移动到某个位置
circle.style.transform =translate(${x}px, ${y}px);
}
</script>
这个HTML文件展示了如何使用JavaScript创建一个基本的连点器，点击容器内的圆圈时，如果连续点击次数达到5次且间隔时间为500毫秒，则触发滑动操作，使圆圈移动到新的位置。
