본문 바로가기

반응형

blog/Javascript

(7)
[aos.js] aosjs 애니메이션 플러그인 캐쉬 오류 처음 페이지에 접속하면 페이지가 길어질 경우 aos가 제대로 동작하지 않았는데 aos api 초기화 시 위와 같이 작성해서 해결하였습니다.
현재 서버시간으로 팝업 (스크립트) 제어 현재 서버시간으로 팝업 (스크립트) 제어하기 javascript 의 Date() 함수는 현재 컴퓨터 시간을 따라가기 때문에 100% 보장하기 힘들다 그래서 생각해본게 서버의 시간을 기준으로 스크립트를 예약 실행한다면 보다 나은 결과를 얻을것 같다 여기서는 php 기준으로 작성 html로 팝업 작성 팝업! javascript + php var phpDate = ""; var today = new Date(phpDate); var endDate = new Date(2022,2,8,17,19); isUseDay(); setInterval("isUseDay()", 30000); function isUseDay() { today.setSeconds(today.getSeconds()+30); var year = t..
페이지 전환 스크립트 + 공사중 페이지 페이지 전환 스크립트 (공사중 페이지) 만들기 도메인주소 wdev.kr 을 입력시 그대로 wdev.kr만 노출 wdev.kr 입력시 www.wdev.kr 주소 앞에 www가 자동으로 입력되게 가능\ javascript 이렇게 입력하면 wdev.kr만 입력하여도 자동으로 www.wdev.kr로 변경 페이지 작성시 해당 폴더의 /index.html 파일로 실행되는데 다른 폴더의 페이지나 공사중 페이지를 띄울 수 있다. index.html에 직접 입력해도 되지만, 번거롭거나 파일관리에 불편한 경우 아래와 같이 입력하면 도메인 주소로 접속시 원하는 페이지로 이동 가능 javascript
페이지 접속시 모바일 페이지로 이동 페이지 접속시 모바일 페이지로 이동 javascript 모바일로 접속시 네이버로 이동하게되는 페이지 이동 소스 replace를 사용하여 뒤로가기에 pc버전페이지가 남지 않음 PC버전 페이지에 입력 2번째줄 location.replace("전환할주소"); 모바일로 접속시 전환할주소로 이동한다
예약시간에 스크립트 실행하기2 예약시간에 스크립트 실행하기2 - 스크립트 예약 실행 이전포스트 참조 2021.09.27 - [자바스크립트] - 예약시간에 스크립트 실행하기 예약시간에 스크립트 실행하기 예약시간 넣어 스크립트 실행하기 if (today > endDate) { $('.popup_wrap').css('display','none') } 현재시간이 지정시간보다 클 경우 .popup_wrap 를 display none (여기선 팝업을 종료하는 기능을 사용).. wdevs.tistory.com setInterval(isUseDay, 30000) //30초마다 실행(페이지 열고있어도 실시간 반영되게) isUseDay(); // 접속(새로고침)시 조건에 맞으면 바로 실행
예약시간에 스크립트 실행하기 예약시간 넣어 스크립트 실행하기 - 스크립트 예약 실행 if (today > endDate) { $('.popup_wrap').css('display','none') } 현재시간이 지정시간보다 클 경우 .popup_wrap 를 display none (여기선 팝업을 종료하는 기능을 사용) 월은 0부터 시작이라 9월 = 8
페이지 로딩중 (스크립트) 만들기 페이지 로딩중 (스크립트) 만들기 - 이미지 없이 css, jquery, javascript 만으로 로딩중 객체 + 스크롤 락 스크립트 script // jQuery 불러오기 html css /* loading */ .loading { position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.6); z-index:100; } .loading__image { position:absolute; left:50%; top:50%;margin-left:-40px;margin-top:-40px;border: 12px solid #f3f3f3; /* Light grey */ border-top: 12px solid #8a8a8a; ..

반응형