오식랜드

어떨 때 쓰면 좋을까 Image Lasy loading 구현할 때 Content Lasy loading 구현할 때 Infinite scrolling 구현할 때 화면에 보이는 요소 에니메이션 처리할 때 구문 const observer = new IntersectionObserver(callback, options); 메서드 observe, unobserve, disconnect 메서드를 주로 사용하게 된다. observe(targetElement): 타겟 엘리먼트에 대한 관찰을 시작할 때 사용합니다. unobserve(targetElement): 타겟 엘리먼트에 대한 관찰을 멈출 때 사용합니다. disconnect(): 다수의 엘리먼트를 관찰하고 있을 때, 이에 대한 모든 관찰을 멈추고 싶을 때 사용합니다..

Date객체의 기본함수를 이용해서 오늘의 날짜와 현재의 시, 분, 초를 구하는 방법을 알아보쟈 기본적으로 각각의 요소를 반환하는 함수는 아래와 같다 let today = new Date(); // 대한민국 표준시 let year = today.getFullYear(), // 이번 년도 month = today.getMonth() + 1, // 이번 달 day = today.getDate(); // 오늘 날짜 let hours = today.getHours(), // 현재 시간 minutes = today.getMinutes(),// 현재 분 seconds = today.getSeconds(), // 현재 초 milliSeconds = today.getMilliseconds() // 현재 밀리초 여기서 원..

디데이 계산기 만들기 코드 dday 변수에 원하는 (월, 일, 년도, 시간)을 넣어주면 그날까지 남은 일수를 구해준다. 글 작성일(2021/05/28)로부터 2021년 12월 31일까지 남은 일수를 보면 217일 남았다고 한다 반대로 얼마나 지났는지 궁금하다면 gap에서 계산되는 두 변수의 위치를 바꿔주면 된다! 2021년 1월 1일부터 오늘까지 며칠이 지났나 계산해보면 147일이 지났다고 한다 :) *참고로 new Date()에서 월 입력 방식은 영어로 된 월별 이름에서 앞에서 3글자를 입력하면 된다! Jan, Feb, Mar, Apr, May, Jun, Jul, Agu, Sep, Oct, Nob, Dec

bgm을 on/off 버튼으로 조작되도록 하자 sound.js(첨부파일)를 불러온 후 main.js에서 제어를 할 것이다. html sound.js 우선은 sound.js를 확인해보자 내장 함수로 초기함수, 시작함수, 멈춤함수가 있고, 인자로는 id, source, volume, loop 네가지를 받는다. main.js bgmPath : bgm의 링크 bgmNowPlaying : 재생/멈춤을 제어할 때 쓰일 boolean형태의 변수 bgm : sound.js의 Sound() 함수를 인스턴스로 불러온다 불러온 후 초기 함수를 window가 로드되었을 때 실행시켜준다. bgm on/off 버튼 클릭 시 시작/멈춤 함수를 호출하자 bgm이 재생중일 땐 시작버튼이, 이미 멈춰있을 때 멈춤버튼이 클릭되지 않도록 ..

참고 링크 : https://velog.io/@awesomelon/jquery-this.index%EB%A5%BC-javascript%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0 $(this).index()를 javascript로 만들기[JS] jquery를 쓰다보면 현재 클릭한 요소의 인덱스 값을 구하는 것을 많이 쓰는데 코드로 보면 다음과 같다. 어떻게 구현하는 걸까? 생각해보자. 우선 현재 클릭한 요소의 부모 요소부터 찾아야 할 듯 velog.io 나는 참고 링크에서 사용하는 부분만 긁어왔다. 원글이 친절히 순서대로 설명되어 있으니 한번은 읽어보길 권장합니당 getElementIndex : 현재 클릭한 요소의 index값 구하는 함수 btn 클릭 시 getElementIndex..

jquery 없이 vanilla javascript로 class관련 함수를 구현해보자 1. addClass element.classList.add('추가할 class명'); function addClass(e, c) { e.classList.add(c); return e; }; 2. removeClass element.classList.remove('삭제할 class명'); function removeClass(e, c) { e.classList.remove(c); return e; }; 3. toggleClass element.classList.toggle('토글할 class명'); function toggleClass(e, c) { e.classList.toggle(c); return e; }; 4...