js41 알고리즘 - 콜라츠 추측 콜라츠 추측 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 주어진 수가 6이라면 6 → 3 → 10 → 5 → 16 → 8 → 4 → 2 → 1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야 하는지 반환하는 함수, solution을 완성해 주세요. 단, 주어진 수가 1인 경우에는 0을, 작업을 500번 반복할 때까지 1이 되지 않는다면 –1을 반환해 주세요. 입력된 수, n.. 2022. 10. 31. 이펙트 응용편 - 페럴럭스 칠번째 페럴럭스 이펙트u 이번 페럴럭스 이펙트는 사이드 메뉴의 버튼을 클릭하면 해당하는 섹션으로 이동하며, 해당하는 섹션의 위치에 도달하면 버튼의 모양이 바뀜니다. js 코드 설명 1. .content__item__desc에 reveal이 붙었을때의 상태만을 다중으로 선택 후 해당 요소를 forEach를 통해 추출합니다. 2. 각 꺼낸 요소를 .innerText로 문자열로 변환 후 splitText라는 변수안에 넣고 3. "" + splitWrap + "";를 통해 splitText 양쪽에 span 태그를 열고 닫는 태그를 넣어줍니다. 5. splitText을 각 뽑아낸 요소에 innerHTML로 넣습니다~ //스크롤시 딜레이를 걸어 show를 붙여주는 원리 0. revealDelay 에는 el.dataset... 2022. 10. 21. 이펙트 응용편 - 게임 첫번재 게임이펙트 코드보세요. 원본 소스 보기 원본 사이트 보기 2022. 10. 21. 이펙트 응용편 - 슬라이더 칠번째 이미지 버튼클릭으로 움직이기 버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이. JS 설명 그동안 배웠던 슬라이더 이펙트를 최대한 활용한것입니다. 따로 설명은 없습니다. 코드 보기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //보여지는영역 const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역 const slider = document.querySelectorAll(".slider"); //각각 이미지 const sliderDot = document.qu.. 2022. 10. 21. 이펙트 응용편 - 슬라이더 육번째 이미지 버튼클릭으로 움직이기 이번 슬라이더 이펙트는 버튼, 닷메뉴 및 무한이동 이됩니다. JS 설명 checkIndex() 함수는 sliderInner주었던 transition을 지우고 첫번째 와 마지막 이미지로 돌려보냅니다. 코드 보기 //순간이동 슬라이드 function checkIndex() { sliderInner.classList.remove("transition"); if (currentIndex == sliderLength) { sliderInner.style.left = -(1 * sliderWidth) + "px"; currentIndex = 0; } if (currentIndex == -1) { sliderInner.style.left = -(sliderLength * sliderWid.. 2022. 10. 21. 이펙트 응용편 - 슬라이더 오번째 이미지 버튼클릭으로 움직이기 이번 슬라이더 이펙트는 버튼, 닷메뉴 가있습니다. JS 설명 닷버튼을 클릭했을때 닷의 인덱스 값을 gotoSlider에 보내주어서 합니다. 코드 보기 //닷버튼 클릭했을때 document.querySelectorAll(".slider__dot .dot").forEach((e, i) => { e.addEventListener("click", () => { gotoSlider(i); }); }); 원본 소스 보기 원본 사이트 보기 2022. 10. 21. 이전 1 2 3 4 ··· 7 다음 728x90 반응형
