JS
[JavaScript / jQuery] 10초 간 3번 클릭 버튼 제어 연습
흑백논리
2024. 7. 1. 20:40
반응형
JavaScript 및 jQuery 연습을 위해 만든 로직입니다.
10초에 3번만 클릭이 성공되고 이후 실패가 노출됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Button Click Event</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<button id = "btnIncrease"> Click </button>
<div id = "counter">0</div>
<script>
let dateArray = [];
$('#btnIncrease').on("click", function (){
let start = Math.floor(new Date().getTime() / 1000);
let end = start - 10;
let count = Number($("#counter").text());
if (dateArray.length < 3) {
dateArray.push(start);
count = count + 1;
alert("성공");
} else if (dateArray[0] < end) {
dateArray.shift();
dateArray.push(start);
count = count + 1;
alert("성공");
} else {
alert("실패");
}
let text = count;
$("#counter").text(text);
});
</script>
</body>
</html>
웹 콘솔에서 즉시 확인 되도록 제작하였습니다.
연습용이기에 추가적인 수정이 필요할 수 있습니다.
반응형