My footsteps

JavaScript / 2 본문

Develop/곤부📙

JavaScript / 2

밀김 2023. 10. 12. 14:15
728x90

 

 

 

 

 

 

 

 

 

 

특정시간이후 코드 실행 setTimeout(funtion(){실행할코드},ms)

 

 

특정시간마다 코드 실행 setInterval (funtion(){실행할코드},ms)

 

 

// 위에서 만든 <div>안에 "5초 이내 구매시 사은품 증정" 이라는 문자가 있습니다.
// 1초마다 5라는 문자를 1씩 감소시켜봅시다.
// 0이 되면 <div>를 안보이게 처리합시다. 

    <div class="alert" id="alert">
        <span id="sec">5</span>초 이내 구매시 사은품 증정!
    </div>
    
        var sec = document.getElementById('sec');
        var alert = document.getElementById('alert');
        var count = 5;

        setInterval(function(){
        	// 누적뺄셈
            count -= 1;
            //카운트가 0이 아닐때
            if (count != 0){
            //sec의 내용을 바꿔줘야함
            sec.innerHTML = count;
            }else if(count == 0){
                alert.style.display = 'none';
            } 
        }, 1000);

 

 

 

 

 

.test() 하면 정규식 검사가 됨

 

/[a-zA-Z]/ : 아무영어문자 검색 정규식

 

/[ㄱ-ㅎ가-힣]/ : 아무한글문자 검색 정규식 (모음도 검색 가능 ㅏ-ㅓ 이런식으로)

 

^시작 끝$ 은 이렇게 표현

 

+는 왼쪽에 있는 문자들 반복 검색

 

나머지는 정규식 표현법 찾아보면서 하면 될듯...

 

 

 

 

캐러셀 = 이미지 슬라이드

 

 

transform : translate가 margin보다 훨씬 성능이 좋으니 이걸 쓰길 권장

 

 

 

 

이미지 캐러셀 이전,다음버튼 구현한거

    var trans = 0;

      $(document).ready(function() { //document.ready는 제이쿼리 문법. html이 모두 로드되고 파싱되면 실행되게하는 
            var translateValue = 0; // 초기 위치

            $('.btn-next').on('click', function() {
                translateValue -= 100; // 한 번 클릭할 때마다 100vw(한 화면) 이동
                $('.slide-container').css('transform', `translateX(${translateValue}vw)`);
                if(translateValue === -300){
                  $('.slide-container').css('transform','none');
                  translateValue = 0;
                }
            });
            
            $('.btn-bef').on('click',function(){
              if(translateValue !== 0){
                translateValue += 100;
                $('.slide-container').css('transform', `translateX(${translateValue}vw)`);
              }
            })

      });

 

 

 

toFixed(반올림몇자리) 반올림 

 

 

개발자도구 콘솔에 글자가 까만색이면 '문자'임 / 파란색이면 숫자

 

 

window.scrollY -> 유저가 얼마나 스크롤내렸는지 좌푯값?같은게 나옴 (당연히 가로도됨 X)

 

 

 

 

window.scrollTo(0,100);

강제로 스크롤 되게 하기

얼만큼 내렸는지 측정도 가능하게 해주는데 대신에 내가 정말 내린 길이만 알수있음. 전체 스크롤의 높이는 알수업뜸

 

 

window.scrollBy(0,100); //현재 위치에서부터 강제로 스크롤 하기

 

 

div나 어떤 섹션의 높이를 알고 싶으면 셀렉터.scrollHeight

 

그치만 실제 div박스의 높이를 알려면 오차도 있고 함. 그래서 그나마 정확하게 알수있는 방법의 공식은

div박스의 스크롤 내린양(scrollTop) + 눈에보이는 div박스 높이(clientHeight) == div의 실제높이

 

 

 

 

 

 

 

 

 

728x90

'Develop > 곤부📙' 카테고리의 다른 글

구멍가게코딩단 '코드로 배우는 스프링부트 웹프로젝트' / 1  (0) 2023.10.14
JavaScript / 3  (0) 2023.10.13
JavaScript / 1  (0) 2023.10.06
김영한 '스프링 입문' / 5  (0) 2023.10.05
김영한 '스프링 입문' / 4  (0) 2023.10.03