반응형
결과물
아래 제출 버튼을 눌러보세요!
소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Timer</title>
</head>
<body>
<button id="timer" onclick="startTimeout()" style="border:1px solid black; padding:5px; background-color:#dcdcde">제출</button>
<script>
var limitTime=10;
var timeoutId;
var target = document.getElementById('timer');
function startTimeout() {
target.disabled=true;
timeoutId=setInterval(printCurrentDate, 1000);
}
function printCurrentDate() {
if(--limitTime>0) target.innerHTML = limitTime+"초 후에 제출 가능합니다.";
else {
target.innerHTML = "제출";
clearInterval(timeoutId);
limitTime=10;
target.disabled=false;
}
}
</script>
</body>
</html>
+ JQuery 코드
var limitTime=10;
var timeoutId;
var target = $('#timer');
function startTimeout() {
target.attr("disabled", true);
timeoutId=setInterval(printCurrentDate, 1000);
}
function printCurrentDate() {
if(--limitTime>0) target.val(limitTime+"초 후에 제출 가능합니다.");
else {
target.val("제출");
clearInterval(timeoutId);
limitTime=10;
target.attr("disabled", false);
}
}반응형
'유용한 정보, 링크' 카테고리의 다른 글
| 직무적성검사 전략 (0) | 2022.11.23 |
|---|---|
| [C/C++] 모든 문자열 대체(replace) 하기 (0) | 2022.10.07 |
| IntelliJ 파일 한글 깨짐 해결 방법 (0) | 2022.08.13 |
| 두 vector의 집합 구하기 (C++) (0) | 2022.06.24 |
| Spring @Bean 메소드 파라미터의 의존관계 주입 (0) | 2022.06.18 |
댓글