전체 글 (55) 썸네일형 리스트형 자바스크립트 간단한 팝업창 만들기 - 확인 취소 버튼 클릭시 각자 기능 실행 휘뚜루마뚜루 쓰기 좋은 자바스크립트 팝업을 만들어봤습니다.메시지 내용과 확인 / 취소 버튼이 있고확인 / 취소 버튼을 클릭하면클릭한 버튼에 따라서 다른 기능을 실행할 수 있습니다. 아래는 그 결과입니다. 아래는 전체 코드 입니다.(별건 없습니다.) HTMLclick Scriptclass PopupComponent { constructor(message) { const popup = document.createElement('div'); this.popup = popup; popup.classList.add('popup'); const container = document.createElement('div'); container.classList.add('contain.. 카운트 숫자 (setInterval 아님) 숫자가 0부터 지정된 숫자까지 증가하는 스크립트 입니다.setInterval 을 사용하지 않고requestAnimationFrame() 을 사용한 방법입니다. requestAnimationFrame() 은 웹페이지에서 애니메이션을 만드는 데 최적화된 자바스크립트 API 입니다.응용하면 숫자 증가 뿐 아니라 UI 애니메이션에도 활용할 수 있습니다. 아래는 그 결과입니다.(숫자가 이미 60 이라면 새로고침을 해서 확인해 보기 바랍니다.) requestAnimationFrame() 을 사용하면 브라우저가 매 프레임 마다 해당 기능을 실행하게 됩니다. 아래는 전체 코드 입니다. (광고 클릭은 제작에 큰 힘이 됩니다.) 지도 이미지에 hover 효과 (자바스크립트 아님) 작업을 하다보면 가끔 지도를 활용한 UI 작업들을 많이 하게 됩니다.그래서 이번에는지도 위에 마우스를 올리면 해당 지역만 색이 바뀌도록 작업을 해봤습니다.자바스크립트 없이 CSS 만으로 가능합니다.아래는 결과입니다. 지도 SVG 파일이 필요하긴 합니다.(인터넷을 검색하거나 디자이너에게 부탁해서 SVG 파일을 받읍시다.) 핵심은 생각보다 간단한 CSS :hover 입니다.#myMap path{ fill: blue; cursor: pointer;}#myMap path:hover{ fill: red;} 아래는 전체 코드 입니다. (광고 클릭은 제작에 큰 힘이 됩니다.) HTML과 CSS 만으로 펼쳐지는 메뉴 만들기 (자바스크립트 안씀) CSS의 hover와 transition 속성을 활용해서마우스를 올리면 차르르 펼쳐지는 메뉴를 만들어봤습니다. 아래는 그 결과입니다.(result 탭으로 이동해서 마우스를 올려 보세요)"> html의 구조를 잘 짜고 CSS의 기능을 활용하면자바스크립트를 사용하지 않고 이정도의 기능은 구현이 가능합니다.(모바일용 으로는 어렵겠군요) (광고 클릭은 제작에 큰 힘이 됩니다.) "> 자바스크립트 클릭하면 폭죽 터지는 UI (그냥 만들어봄) 그냥 만들어봤습니다.아래 영역을 클릭하면 폭죽(?) 색종이가 터집니다. 이곳을 클릭해 보세요!">이곳을 클릭해 보세요!(제 컴퓨터에서는 잘 터지는데 안터지면 댓글 남겨주세요) 아래는 전체 코드입니다.(lottie 애니메이션 활용) (광고 클릭은 제작에 큰 도움이 됩니다.) "> 자바스크립트로 차르르 올라가는 숫자 표현하기 (오도미터 카운터) 퍼블리싱 작업 중 포인트가 차르르 올라가는 UI가 필요해서 만들어봤습니다.다른 좋은 방법들도 많이 있을거라 생각됩니다.숫자 값만 넘겨주면 천단위 기호를 포함하여 숫자가 차르르 올라갑니다. 아래는 그 결과입니다."> SCSS를 사용해서 $font-size만 입력하면 쉽게 사용할 수 있습니다. 먼저 숫자가 표시될 div 를 변수에 담아주시고const container = document.querySelector('#container'); new OdometerCounter(숫자, div이름); 의 형식으로 실행하면 됩니다.const testCounter = new OdometerCounter(1234567890, container); 아래는 전체 코드입니다. 자바스크립트class OdometerCount.. 자바스크립트 간단한 코드로 현재 시간 출력하기 (옵션 다양함) 자바스크립트로 현재 시간을 출력하는 방법 중 가장 일반적인 방법인 Date 객체를 사용하는 것 말고지역 설정에 맞는 시간 형식으로 현재 시간을 출력할 수 있습니다. 아래가 그 결과입니다."> 자세한 설명은 이곳에https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat Intl.DateTimeFormat - JavaScript | MDNIntl.DateTimeFormat 은 언어에 맞는 날짜 및 시간 서식을 적용하기 위한 객체입니다.developer.mozilla.org 아래는 전체 코드입니다.const KoreanFormatter = new Intl.DateTimeFormat('ko-.. 자바스크립트 mousedown / touchstart 를 한번에 처리 자바스크립트 이벤트 리스너 중에서mousedown 을 사용하면 모바일 터치를 인식하지 못합니다.그래서 touchstart / touchend 를 추가로 등록해야 했습니다. 해결책mousedown / touchstart 대신 pointerdown 을 사용mouseup / touchend 대신 pointerup 을 사용하면 됩니다. 마우스 클릭과 터치를 동시에 인식합니다. 특정 기능을 만들때 필요해서 남겨놓습니다. 이전 1 2 3 4 ··· 7 다음
