본문 바로가기

전체 글

 (60)
jquery Math.random값 사용하기 jquery Math.random값 사용하기 CSS body{ margin:0; padding:0; } .number{ text-align: center; font-size:20px; color: #000;} SCRIPT var list = [ 1, 2, 3, 4, 5, 6 ] var len = list.length + 1; var dataText = $( ".number" ); dataText.text( Math.floor( Math.random() * len ) ); HTML 새로고침 될때마다 .number에 텍스트값이 랜덤으로 변경 된다.
jquery image slider jquery image slider HTML 동해안 갤러리 CSS *{margin:0;padding:0;}li{list-style:none;}a{text-decoration:none;color:#000;}#gallery{width:350px;margin:30px auto;border:1px solid #999;box-shadow:0 5px 5px rgba(0, 0, 0, 0.3);}#gallery h1{text-align:center;}#gallery img{border:1px solid #666;}#photo{text-align:center;}#gallery ul{width:800px;margin:0 auto;overflow:hidden;}#photo_list ul li{width:100px;f..
이전 버튼 다음 버튼 클릭 시 해당 녀석 찾기 이전 버튼 다음 버튼 클릭 시 해당 녀석 찾기 CSS .dot_list li a{ font-style: normal; font-size:28px; color:#000; text-decoration: none;} .dot_list li.on a{ color:red;} .btn_list li a{ text-decoration: none; color:#000; } HTML 1 2 3 이전버튼 다음버튼 JAVASCRIPT var dotList = $( ".dot_list" ).children( "li" ); var btnPrev = $( ".btn_prev" ); var btnNext = $( ".btn_next" ); var _myIndexNumber = 0; btnPrev.on("click", functio..
자바스크립트 특정 날짜 자바스크립트 특정 날짜일때 HTML 텍스트 JAVASCRIPT var dDay = new Date( "5/17/2018 00:00:00" ); var nowDay = new Date(); var tiTile = $( "p" ); if( nowDay.getTime() > dDay.getTime() ) { tiTile.css( "display", "none" ); } Date 객체는 날짜와 시간을 처리하는데 사용한다. Date 객체는 new Date로 만든다.. getTime는 1970 년 1 월 1 일 자정 이후의 밀리 세컨드 수와 지정된 날짜를 리턴한다.. 그래서 if문 안에 지금 현재 시간이 지정한 날짜보다 클경우에 실행을 시켜준다..
vue 단한 번만 캐시를 실행시키는 v-once vue 단한 번만 캐시를 실행시키는 v-once 애플리케이션 개발에는 서비스 이용약관 같이 데이터가 없는 정적 콘텐츠를 렌더링하는 경우도 있다. 이런 경우에는 여러 번 캐시될 필요가 없으므로, 단 한번만 캐시를 싱행하기 위해서는 컴포넌트 템플릿의 루트 엘리먼트에 v-once를 추가하면 된다. HTML SCRIPT 이용약관 이용약관 내용입니다. Vue.component( "static-component",{ template: "#static-component-template" }); new Vue({ el: "#app" });
vue이벤트 메서드- 첫번째 기술 서적 : VUE.JS 이정도는 알아야지 책 정보 http://book.naver.com/bookdb/book_detail.nhn?bid=12800811 vue 이벤트 메서드 v-on:[이벤트] = "자바스크립트 표현식" v-on은 click, keyup, keydown, input등 다양한 이벤트를 핸들링 할 수 있다. 밑에 예제1 소스는 클릭 할때 마다 증가 및 감소를 표현 하는 방법이다. 예제1 html Counter : {{ counter }} +클릭 -클릭 script new Vue({ el: '#app', data:{ counter : 0 } }) 예제 2번 shuffle 메서드 처럼 for 안에서 매번 Vue.set을 호출하는 것은 비용이 크므로, this.messages와 동일한 값을 ..
트윈맥스(TweenMax ) 트윈맥스(TweenMax ) 트윈맥스를 사용하는 이유 jquery animate의 움직임이 부드럽다 jquery animate은 초당 30프레임일 경우 트윈맥스는 초당 60프레임이다. 그러므로 더 자연럽게 애니메이션을 할수 있다. 트윈맥스 코드 TweenMax.to('.box', 2, {width:100,height:100,repeat:1}) '.box' 는 엘리먼트, {객세 속성} repeat은 반복 횟수 이며, repeat:-1을 주면 무한 반복이다. repeatDelay는 반복 지연시켜준다. 이 속성을 쓰기 위해서는 repeat속성이 반드시 들어가야한다. yoyo속성은 우직이는 경로와 똑같이 반복효과?같다. yoyo특성상 불린값 true랑 false값을 사용한다.
팝업 데이터로 불러오기 팝업 데이터로 불러오기 HTML 팝업1 팝업2 팝업3 팝업4 X 데이터 텍스트 들어가는 곳 CSS .popup_layer{ display:none; position: absolute; top:0; left:50%; width:800px; margin-left:-450px; border:1px solid red; z-index:200; background:#fff;} .popup_layer .inner{ position: relative; padding:15px;} .popup_layer .inner .btn_close{position: absolute; top:-30px; right:0; font-size:20px; color:#fff; text-decoration: none;} .popup_layer ..

티스토리툴바