My footsteps
JavaScript / 2 본문
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 |