728x90 반응형 javascript/javascript31 체크박스 input[type="checkbox"] 전체 체크 구현 이벤트 리스너를 등록해 전체 체크의 값이 변하면 나머지도 같이 바꿔준다 checkAll.addEventListener('change', function () { check1.checked = checkAll.checked; check2.checked = checkAll.checked; check3.checked = checkAll.checked; }); 전체 체크 이외의 체크박스 값이 변하는걸 감지해서 전체가 true가 아닐경우 가 해제 되도록 한다 check.addEventListener('change', function () { if (check1.checked && check2.checked && check3.checked) { checkAll.checked = true; } else { check.. 2022. 9. 5. 시간 계산(몇분전, 몇일전, 몇년전..) //현재시간 var now = new Date(); //기준시간 var writeDay = new Date(time); //현재 시간과 기준시간의 차이를 getTime을 통해 구한다 var difference = now.getTime() - writeDay.getTime(); //초로 바꿔준다 difference = Math.trunc(difference / 1000); 기준점을 만든다 // 초 const seconds = 1; // 분 const minute = seconds * 60; // 시 const hour = minute * 60; // 일 const day = hour * 24; // 달 const mon = day * 30; // 년 const year = mon * 12; differen.. 2022. 9. 5. 마우스 따라 움직이는 효과 See the Pen Untitled by gahyun (@gahyun) on CodePen. 마우스가 li 에 접근하면 마우스 위치로 .box 를 이동한뒤 가운데로 animate 를 통해 이동시킨다 (마우스를 따라 움직이는것처럼 보이도록) 활성화된 li에 active 클래스를 추가 이때 기존 active 는 영역 밖으로 이동시켜 버려야함! (mouseleave 이벤트를 등록하지만 가끔 제대로 동작하지 않는 경우도 있어서 추가해줌 - 무조건 1개만 active 되도록) $(document).on('mouseenter','li:not(.active)',function(e){ target = $(this).children('.box'); liTop = $(this).offset().top; liLeft = .. 2022. 9. 1. 여러개를 제어할때 쓰는 querySelectorAll 탭메뉴 버튼 구현 (forEach 사용) See the Pen Untitled by gahyun (@gahyun) on CodePen. let itemList = document.querySelectorAll('li'); //querySelectorAll를 이용해 li를 전부 불러온다 (리스트형태로 itemList에 저장됨) itemList.forEach(function(item){ item.addEventListener('click',function(){ itemList.forEach(function(e){ e.classList.remove('active'); }); item.classList.add('active'); }); }); 리스트형태로 갖고 있기 때문에 forEach를 이용해 반복한다 이때 .. 2022. 8. 31. 이전 1 2 3 4 ··· 8 다음 728x90 반응형