웹언어/JavaScript 검색 결과
14 개의 검색 결과가 있습니다.
웹언어/JavaScript

[JS] swiper.js / 작동이 안 될 때

[JS] swiper.js / 작동이 안 될 때 swiper슬라이드가 작동을 안하는 이유가 있다. 주로 한페이지에서 컨테이너가 display:none이 block등으로 다시 보여졌을 때 작동이 안 되는 이슈이다. 문제를 해결하는 방법은 간단하다. 문제해결방법 swiper를 선언한 스크립트에다가 아래의 두 개의 코드를 추가하면 정상적으로 작동한다. observer: true, observeParents: true, 적용을 한다면 아래와 같다. 함께 보면 좋은 글 응용 : [JS] swiper.js / 페이지 이동 [JS] swiper.js / 페이지 이동 들어가기 전에 swiper.js란 swiper.js에 관한 글은 이전에 작성한 글을 참고하면 도움이 될 것입니다. [JS] swiper.js / swip..

2021. 6. 29. 14:57
웹언어/JavaScript

[JS] swiper.js / 페이지 이동

들어가기 전에 swiper.js란 swiper.js에 관한 글은 이전에 작성한 글을 참고하면 도움이 될 것입니다. [JS] swiper.js / swiper슬라이드 [JS] swiper.js / swiper슬라이드 swiper 슬라이드 사용법 입니다. 시간이 없으면 3-3 javascript 부분만 보시면 됩니다. 1.swiper.js swiper.js는 쉽게 슬라이드를 만들수 있게 해놓은 스크립트 이다. 공식 홈페이지에서 자료를 볼수 있다. sw jh91.tistory.com [JS] swiper.js / 페이지 이동 오늘 포스팅을 다뤄 볼 것은 slideTo 함수를 이용한 페이지 이동입니다. 아래의 코드를 참고하시기 바랍니다. 제이쿼리와 함께 사용하면 조금 더 편리하게 사용 가능합니다. HTML 코드..

2021. 6. 2. 21:20
웹언어/JavaScript

[JS] select box에 생년월일 생성하는 함수

[JS] select box에 생년월일 생성하는 함수 select box에 대한 내용은 저번에 포스팅으로 한번 다룬 적이 있다. 오늘은 저번에 한 포스팅과 이어지는 option을 자동으로 생성하는 함수이다. (생년월일 한정) 2021.05.26 - [웹언어/HTML] - [HTML] select 하나만 골라봐 준비물 1.제이쿼리 " target="_blank" rel="noopener">http://code.jquery.com/jquery-1.12.4.min.js"> 2. 아래의 소스코드 다운받아서 링크 걸어도 되고 직접 타이핑해도 된다 3.html 설정 select의 id를 year, month, day로 해둘 것 사용법 [JS] 코드 $(document).ready(function(){ var now..

2021. 5. 27. 09:00
웹언어/JavaScript

[JS] 반응형 코드 만들기

JS 반응형 코드 만들기 요즘은 반응형으로 홈페이지를 만든다. 반응형 페이지란 페이지 하나로 화면 사이즈에 따라 다르게 보여주는 표현해주는 기술입니다. 사용자가 보기 편리하게 만드는 페이지입니다. 사용법 //기준 설정 var windowWidth = window.matchMedia("screen and (max-width: 768px)"); if (windowWidth.matches) { //screen and (max-width: 768px)에 해당한다. alert('모바일 사이즈 입니다.') } else { //screen and (max-width: 768px)에 해당하지 않는다. alert('모바일 사이즈가 아닙니다.') } 변수하나를 설정하여 기준을 저장해 놓는다. 변수를 기준으로 기준 사이즈에..

2021. 5. 22. 09:00
웹언어/JavaScript

[JS] 페이지 이동

[JS] 페이지 이동 HTML에서는 a링크를 통하여 다른 페이지로 이동을 할 수 있다. 자바스크립트에서도 a링크의 기능을 하는 기능들이 있다. 1. location.href 이동 페이지 이동 합니다 네이버 a링크의 이동과 자바스크립트 location.href는 값이 페이지로 이동하는 기능을 가지고 있다. 2. window.open() 새 탭으로 열기 페이지 이동 합니다 네이버 window.open은 타깃에 있는 페이지를 새로운 탭에 열게 합니다. HTML a태그의 target="_blank"와 같은 기능을 수행합니다. 3.window.open() 새 창으로 열기 페이지 이동 합니다 window.open에 _blank를 붙이면 팝업창(새 창) 열기를 할 수 있습니다. HTML a태그로는 새 창열기는 불가능..

2021. 5. 18. 09:00
웹언어/JavaScript

[JS] 배열 섞는 함수

[JS] 배열 섞어주는 함수 배열이란 자료 구조의 종류 중 하나이다. 배열을 섞어주는 함수에 대해서 알아보도록 하자 코드 // 배열 섞기 함수 const shuffleArray = array => { for (var i = 0; i < array.length; i++) { var j = Math.floor(Math.random() * (i + 1)); const temp = array[i]; //빈 곳에 배열i를 저장 array[i] = array[j]; //배열 j를 배열 i에 저장 array[j] = temp; //상수 x를 배열 j에 저장 } return array; }; temp라는 변수, array[i] (array배열 i번째), array[j](array배열 j번째) temp에 array[i]..

2021. 5. 17. 09:40
웹언어/JavaScript

[JS] 쿠키 만들기 / 제어하기

자바스크립트 쿠키 1. 쿠키란 무엇인가 사용자 컴퓨터에 기록되는 정보를 쿠키라고 생각하면 된다. 2. 쿠키 만들기 / 값 가져오기 //쿠키 만들기 var setCookie = function(name, value, exp) { var date = new Date(); date.setTime(date.getTime() + exp*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/'; }; //쿠키 값 가져오기 var getCookie = function(name) { var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|..

2021. 4. 28. 09:00
웹언어/JavaScript

[JS] 프로그래스 조절

[HTML] [CSS] .progress{ width : 100%; height :50px; //부모 위치에 설정 position: relative; top:0; left:0; overflow-x: hidden; cursor: pointer; } .state{ width : 0; height :50px; //부모랑 같은 위치에 두기위한 포지션 position: absolute; top:0; left:0; //색상 background-color : rgb(24, 117, 255); } [JS] $(document).ready(function(){ //프로그래스 바를 클릭 $('.progress').click(function(e){ // 변수 x는 .progress의 left값에서 클릭한 위치의 X값을 뺀다..

2021. 4. 12. 10:12
웹언어/JavaScript

[JS] 책 넘기는 효과 turn.js

책 넘기는 효과를 주는 turn.js입니다 사용 예시 ↓↓ 아래의 동영상을 보면 충분 다하고 생각한다. ↓↓ 1.다운로드 1-1. 구글 드라이브에서 받는다 https://drive.google.com/file/d/1GbYE6rOXLDMKwmKGNPQJ9yp87YCIc888/view?usp=sharing turnjs4.zip drive.google.com 1-2. 사이트에서 받는다 www.turnjs.com/ 2. 실행 환경 2-1 필수사항 제이쿼리 1.3 이상의 버전 필수 2-2 적용 브라우저 2-3 적용 디바이스 안드로이드 : 크롬에서 사용 가능 애플 : ipad, iphone, ipod 3. 코드 및 사용법 The Bible Page: of 적용이 힘들면 그대로 가져가서 조금씩 수정해보는 것도 좋다 ..

2021. 4. 7. 11:33
웹언어/JavaScript

[JS] QR코드 만들기

qrcode.js로 QR코드 만들기 qrcode.js는 내가 원하는 자료를 qr로 바꿔주는 스크립트 이다. 코로나 시대가 되면서 qr체크인을 하면서 많은 사람들이 qr코드를 접하고 사용하고 있다 QR코드의 사용 예 1.전자출입명부 2.로또 정보 스캔 3.결제 시스템 qr코드 만들기 qrcode.js사용법 및 설명 [html] //자료를 넣을 input:text //qr코드를 보여주는 div //qr코드 생성 var qrcode = new QRCode(document.getElementById("qrcode"), { //가로, 세로 높이 조절 width : 100, height : 100 }); //input:text에 들어있는 value를 qr코드로 바꿔주는 function function makeCod..

2021. 4. 6. 09:53
웹언어/JavaScript

[JS] 초를 시:분:초 로 바꿔주는 함수

javascript로 파라미터로 받은 수를 시:분:초로 출력하는 기능을 가진 함수를 만들었다. 자바스크립트함수는 function 함수명(파라미터){적용할 코드} 형식으로 구성되었다. ※추후에함수에 대해서 자세히 알려드릴게요. 설명이 필요없게 최대한 간결하게 작성하였다. 제이쿼리를 사용하면 더 쉽게 출력 할 수 있고 밑의 코드는 제이쿼리 없이 순수 자바스크립트를 이용하여 구성한것이며 어떤 브라우저에서도 잘 작동한다. 함수를 선언해 주고 괄호 안에 숫자를 넣기만 하면된다. ex) time(23450); //임의로 만든 time()함수 함수명 바꾼다면 실행할 함수명도 같이 바꿔줘야지 작동합니다 function time(seconds) { //3항 연산자를 이용하여 10보다 작을 경우 0을 붙이도록 처리 하였다..

2021. 3. 31. 16:03
웹언어/JavaScript

[JS] swiper.js / swiper슬라이드

swiper 슬라이드 사용법 입니다. 시간이 없으면 3-3 javascript 부분만 보시면 됩니다. 1.swiper.js swiper.js는 쉽게 슬라이드를 만들수 있게 해놓은 스크립트 이다. 공식 홈페이지에서 자료를 볼수 있다. swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 2.적용 2-1 cdn방식 swiper.js를 적용하는 방법은 크게 2가지가 있다. 1.cdn 방식 외부에서 받아와서 사이트에 적용시키는 방..

2021. 3. 23. 09:25
웹언어/JavaScript

[JS] 스크롤바 퍼센트 구하기

[html] //↓↓객체 접근을 위해서 제이쿼리 사용하였음 //↓↓ 부모영역 //↓↓ 내용영역 ID메인안에 넣어야 됩니다 What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into..

2021. 3. 19. 13:50
웹언어/JavaScript

[JS] 이메일 유효성 검사

//test() 함수를 이용한 문자열 비교 var 변수명 = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/; if(변수명.test(검사할 문자)){ 조건에 만족하면 true; }else{ 조건에 만족하지 못하면 false; } See the Pen email_check by 윤재현 (@jh91) on CodePen.

2021. 3. 16. 13:48