Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- udemy
- 미래내일일경험
- 하나은행
- 웅진씽크빅
- 맥북백틱입력
- 프론트엔드배포
- 프로젝트캠프
- 개발자교육과정
- 디지털하나로입학식
- 배포
- 스나이퍼팩토리
- 깃허브 레포지토리와 로컬 코드 연결하기
- 부트캠프
- 디지털교육
- 디지털취업
- 맥북백틱
- Next.js
- 프론트엔드개발자양성과정
- s3
- 백틱
- 취준생
- 네이버로그인창만들기
- `
- DIGITALHANARO
- github
- 버전생성프로세스
- 유데미
- kdt
- 디지털하나로
Archives
- Today
- Total
Land of Joe
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!
'🌱 dailyStep' 카테고리의 다른 글
[React] 리액트 filter, map의 활용... (0) | 2023.07.14 |
---|---|
리액트 파일 열기 (부제: 난 개 바보 쉨이다...) (0) | 2023.07.13 |
발등에 용암 떨어져서 시작하는 리액트.. (0) | 2023.07.10 |
221013 Donnerstag - 데이터바인딩/array/object (0) | 2022.10.14 |
221006 Donnerstag - return/소수점 (0) | 2022.10.07 |