jQuery 연습문제 1 ( 특정 시간마다 일정 범위의 숫자 출력 )

• 0.3초마다 숫자 0 ~ 9까지 출력하는 span 태그

<h1 class="area"></h1>
<button id="stop">정지</button>

.area{
  width: 200px;
  height: 40px;
  border: 1px solid black;
}

.text1{
  color: red;
  cursor: pointer;
}

// 0.3초마다 0~9까지 출력하는 span 태그

// 1. 필요한 변수 선언
let count=0; // 0~9까지 증가하는 것을 세기 위한 변수
let interval; // setInterval을 저장할 변수

$(()=>{
  interval = setInterval(function(){
     
     // 0~9까지 출력할 span 태그 작성
     if(count < 10){
        const span = "<span class='text1'>" + count++ + "</span>";
        
        $(".area").append(span);
        
     } else{ // count가 9를 초과한 경우
           
           // 클래스가 area인 요소 내부에 있는 내용을 모두 삭제
           $(".area").empty();
           
           // 다시 0~9까지 숫자를 세도록 변수 초기화
           count = 0;
     }
  }, 300)
  
  // HTML 문서의 로딩이 완료된 후
  // 아이디가 stop인 요소가 클릭되었을 때 멈추기
  $("#stop").on("click", function(){
     clearInterval(interval);
  })
  
  // + 클래스가 text1인 요소를 클릭했을 때
  // 콘솔에 요소의 내용을 출력
  /* $(".text1").on("click", function(){}) -> 코드 작동 X */
  $(document).on("click", ".text1", function(){
     console.log($(this).text());
  })
  // + 1. HTML 문서는 위에서 아래로 해석
  // 2. on(), addEventListener()는 요소에 이벤트가 발생했을 때
  //    동작(기능)을 추가하는 메소드
  // (★★) 기존에 on(), addEventListener()를 이용하여
  // 이벤트 동작을 추가할 때는 이미 화면에 로딩이 완료된 상태인 요소에 추가
  
  // 지금 같은 경우는 기존 화면에 없던 요소(span)에
  // 이벤트 동작을 추가하려 했지만 실패
  
  // 정적 요소 : HTML 문서 로딩 이전부터 이미 작성되어 있는 요소
  // -> 기존 방법 on("click", function(){}) 사용 가능
  
  // 동적 요소 : 자바스크립트 또는 제이쿼리에 의해서 HTML 문서 로딩 이후 추가되는 요소
  // -> 기본 방법 불가
  // -> $(document).on('이벤트', '선택자', function(){})
})

See the Pen 24-12-25 jquery pr1 by Namu (@Namu-the-sans) on CodePen.