221005 Mittwoch - 타이머/정규식/캐러셀

 

1. setTimeout, setInterval

  <div class="alert alert-danger">
    <span class='min'>5</span>초 이내 구매시 사은품 증정!
  </div>
  <script>
    var count = 5;
    var timer = setInterval(countDown, 1000)
    function countDown(){
      if (document.querySelector('.min').innerHTML>0) {
        document.querySelector('.min').innerHTML-=1;
      } else {
        clearTimeout(timer);
        document.querySelector('.alert').style.display='none';
      }
    }
  </script>

2. 정규식 만들기
/\S+@\S+\.\S+/.test(aaa@bbb.ccc) == true;


3. Carousel 캐러셀 만들기

  <div style="overflow: hidden">
    <div class='slide-container'>
      <div class="slide-box">
        <img src="Zev_1-27-3.png">   
      </div>
      <div class="slide-box">
        <img src="Zev_1-27-4.png">   
      </div>
      <div class="slide-box">
        <img src="Zev_1-27-5.png">   
      </div>
    </div>
  </div>  

  <button class="before">◀️</button>
  <button class="slide-1" value='1'>1</button>
  <button class="slide-2" value='2'>2</button>
  <button class="slide-3" value='3'>3</button>
  <button class="next">▶️</button>

사진 세 개를 가로로 나열하고 그에 따른 버튼 세 개도 만든다

.slide-container {
    width:300vw; 
    transition: all 1s;    
}
.slide-box {
    width:100vw;
    float:left;
}
.slide-box img {
    width:100%
}

 

각 이미지를 감싸는 div인 .slide-box는 100vw, 전체 이미지를 감싸는 div인 .slide-container는 300vw로 설정함으로써
하나의 이미지가 보여지는 영역 전부를 차지하도록 한다

• vw 란 Viewpoint Width, 즉 보여지는 영역을 의미함

 

<script>
    document.querySelector('.slide-1').addEventListener('click',function(){
      document.querySelector('.slide-container').style.transform='translateX(0)'
    });
    document.querySelector('.slide-2').addEventListener('click',function(){
      document.querySelector('.slide-container').style.transform='translateX(-100vw)'
    });
    document.querySelector('.slide-3').addEventListener('click',function(){
      document.querySelector('.slide-container').style.transform='translateX(-200vw)'
    });

    //jQuery사용: $('.slide-container').css('transform','translateX(-100vw)')
</script>

버튼 1,2,3을 클릭하면 그에 맞는 이미지로 슬라이드하도록 한 것이다.


그렇다면 다음버튼, 이전버튼은 어떻게 구현할까

// 지금 보이는 사진이 1이면 2번 사진 보여주세요~
// 지금 보이는 사진이 2이면 3번 사진 보여주세요~
    var 지금사진 = 1;
    document.querySelector('.next').addEventListener('click',function(){
      if (지금사진 == 1) {
        document.querySelector('.slide-container').style.transform='translateX(-100vw)'
        지금사진+=1;
      } else if (지금사진 == 2) {
        document.querySelector('.slide-container').style.transform='translateX(-200vw)'
        지금사진+=1;
      }
    });
// 지금 보이는 사진이 3이면 2번 사진 보여주세요~
// 지금 보이는 사진이 2이면 1번 사진 보여주세요~
    document.querySelector('.before').addEventListener('click',function(){
      if (지금사진==3){
        document.querySelector('.slide-container').style.transform='translateX(-100vw)'
        지금사진-=1;
      } else if (지금사진==2) {
        document.querySelector('.slide-container').style.transform='translateX(0vw)'
        지금사진-=1;
      }
    });

현재 보이는 사진을 변수로 적어놓은 후 대조하면 된다.

 

짠! 이렇게 이쁘게 돌아간다!!

5일간의 베를린 여행 후
오랜만에 공부했더니 그동안 했던 것들이 리셋된 것 같아 마음이 좀..
10월 말에 2주 넘는 시간동안 또 여행 갔다오면 어떨지 벌써부터 불안한 마음이 드는 게 사실이다..

뭐 어쩌겠어!
일단 오늘 다시 앉아있는 연습과 더불어 진도를 좀 나갔으니 됐다.
이제 책 읽고 자야지!

 

 

 

Guten Nacht!