생각을 IT다
[JavaScript / jQuery] 10초 간 3번 클릭 버튼 제어 연습 본문
반응형
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>
웹 콘솔에서 즉시 확인 되도록 제작하였습니다.
연습용이기에 추가적인 수정이 필요할 수 있습니다.
반응형
'JS' 카테고리의 다른 글
| [JavaScript] 별 찍기 연습 (0) | 2024.07.02 |
|---|---|
| [JavaScript] 홀수 마방진 만들기 (연습) (0) | 2024.07.01 |
Comments