Web dev/JavaScript
-
JS / 바닐라로 sticky 스티키 메뉴 구현하기Web dev/JavaScript 2023. 4. 16. 23:50
이번에는 바닐라스크립트로 스티키메뉴를 구현해보았다. 스티키메뉴를 구현하려면 스크롤좌표,메뉴의 좌표, 높이등을 구해야 하는데 제이쿼리와 어떻게 다른지 알아보았다. 1. 현재 스크롤 좌표 구하기 scrollTop, scrollTop() 차이 // 바닐라 스크립트 let scrollPosition = document.documentElement.scrollTop; // window.scrollY 익스에서 안됌 // window.pageYOffset 가능 // document.documentElement.scrollTop 가능 // 제이쿼리 let scrollPosition = $(window).scrollTop(); 2. 요소의 상단 위치 구하기 getBoundingClientRect().top, offset..
-
JS / 바닐라로 video play(), pause() 구현하기Web dev/JavaScript 2023. 2. 26. 16:18
커서를 올리면 동영상을 재생하도록 구현해보았다. 제이쿼리를 사용했으면 get(0) 을 사용해 간단하게 구현 했었겠지만 바닐라로만 작업하기로 했었다. 비디오는 promise를 반환하기 때문에 비동기 처리를 하여 구현하면 된다. 처음 랜딩 된 후 바로 커서를 올리면 아직 로드되지 않았다는 에러가 뜨고 영상재생이 되지않았다. 동영상 크기가 크거나 리스트가 많아서 그런 이슈가 생긴줄 알았는데 video태그에 muted(음소거) 속성을 추가하면 에러없이 잘동작했다. 동영상이 다운로드되는 시점을 체크하려고 삽질했지만 그게 아니였던것이다..ㅋㅋ videoEvt:function(){ let item = document.querySelectorAll("#video_list .item"); for(i = 0; i < it..
-
JS / nav anchor, active 효과 구현Web dev/JavaScript 2023. 2. 26. 15:46
스크롤에 따른 nav 엑티브효과 anchor 효과 코드펜에서 뺏겨 왔다. 키키 출처 https://codepen.io/eksch/pen/xwdOeK Jump menu with active class and smooth scroll Smoooooooooth... codepen.io Section 1 Section 2 Section 3 Smooth scroll, fixed jump menu with active class Section Two Section Three $(document).ready(function() { $('a[href*=#]').bind('click', function(e) { e.preventDefault(); // prevent hard jump, the default behavio..
-
JS / input 정규식으로 숫자만 입력하기Web dev/JavaScript 2023. 2. 26. 15:32
정규식 함수로 숫자만 입력하는 방법 인라인스타일로 바로 넣을 수 있다.
-
JS / selectBox custom하기Web dev/JavaScript 2022. 10. 30. 12:54
셀렉트박스를 커스텀해보았다. 처음엔 w3스쿨스에서 긁어다가 적용해보려했는데 개뿔 더 거지같다 알아보기도힘들고 ㅋㅋ 그냥 만들어보기로 결심! select 태그를 쓰지않고 만들어 보았다. 1. value를 담아줄 인풋 생성 2. option을 list태그로 생성 3. 옵션을 선택하면 값을 input에 전달 인풋을 두개 만들어 직접입력 칸까지 만들어 보았다. // email로 예제를 만들어 보았다. // list에 data-select에 value를 넣어준뒤 선택되면 인풋에 값으로 넘겨준다. 직접입력 naver.com google.com daum.com nate.com kkkkkkkkkkkkkkkkkkkkkkkk.com aaa.com aaa.com aaa.com aaa.com aaa.com aaa.com aa..
-
JS / 가격콤마찍기 Price new Intl.NumberFormat()Web dev/JavaScript 2022. 5. 7. 14:03
쇼핑몰 퍼블리싱중이다. 상품가격에 콤마를 찍어볼것이다. 포맷방법은 2가지 내장함수를 사용하거나 정규표현식을 이용하면 된다. 정규표현식을 이용한 방법은 디테일페이지에서 수량선택을하니 total가격이 바뀌는 이슈가 발생했다. 내장함수를 이용하는게 더 좋은것 같다. 1. 내장함수 사용하기 let PriceFormat = new Intl.NumberFormat().format(item.sale_price) 화폐마다 다르게 설정할 수 있다. 기본은 달러이다. 달러랑 원이랑 콤마자리가 똑같기 때문에 따로 설정은 안해도 된다. 2.정규표현식 사용하기 export function priceComma(price) { return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '..