본문 바로가기

setInterval2

타임슬라이더 구현 input range를 활용하여 time slider를 구현하게 되어, 그에 대한 코드들을 아래 정리해보았다 Edge, chorme에서는 정상 작동 되었으나, IE에서는 일부 JS코드와 스타일이 비정상 작동하여, 추후 동기화 되도록 작업 후 코드와 게시글을 수정하였다. 작업 단계는 아래와 같이 분류하였다. 1. 레이아웃2. range 눈금 설정3. 조작버튼4. tooltip 생성5. 이벤트 1. 레이아웃 우선 조작을 위한 버튼과 input을 배치할 위치를 정하고, 그에 대한 레이아웃을 먼저 정의하였다. 가급적 내용은 생략하고 어떤 요소들을 가질 것이며 누구의 자식요소로 배치할지를 먼저 작성하였다. 구현 완료된 jsp페이지의 코드를 첨부하자면 아래와 같다. 각 목차별로 뜯어가며 자세히 설명.. 2022. 6. 24.

타이밍 이벤트 & 단원 총정리 JS에서 애니메이션을 구현할 수 있는 타이밍 이벤트에 대해 학습하였고, JS파트의 총 내용을 활용한 예제 풀이를 통해 단원 복습을 진행하였다. 1. 타이밍 이벤트 1) 타이밍 이벤트란? js에서 애니메이션은 구조가 일반적으로 어렵다고 판단되어 단독으로 사용되기 보다, 추후에 라이브러리, 플러그인과함께 사용한다. 하지만 기본적인 구조 자체를 미리 파악해두면 나중에 라이브러리, 플러그인 등을 사용할때 내용을 파악하기가 수월하기에 이를 목적으로 학습한다. 타이밍 이벤트 함수에는 아래와 같이 두가지가 있다. 메서드명 설명 setTimeout() 부여한 시간이 흐르면 딱 한 번 실행 setInterval() 부여한 시간마다 반복적으로 실행 앞에 set이 붙어있음으로 setter같은 역할임을 짐작할 수 있고, 이를.. 2022. 2. 18.

이전 1 다음

티스토리툴바