반응형 제이쿼리6 [jQuery]디지털 시계 만들기(시작/종료버튼) jQuery에서 new Date(), setInterveal()을 사용하여 간단히 현재시각을 보여주는 디지털 시계를 만들 수 있다. [html] 꾸밀 것 없이 간단히 시간을 나타낼 장소인 span태그와 시작과 종료 버튼만 마크업했다. 00: 00: 00 시작 종료 [css] css는 이쁘게 꾸미진 않았다...😌그냥..형태만..ㅎㅎ @charset "utf-8"; /*reset*/ *{margin:0; padding: 0;box-sizing: border-box;} html { overflow-x: auto;} dl,ol,ul,li {list-style: none;} a{outline:0; text-decoration:none;color:#555; cursor: pointer;} a:active, a:ho.. 2020. 5. 26. [jQuery]요소 추가하기:.appendTo() 타겟에 새로운 요소를 추가한다. $('새로운요소').appendTo('타겟'); [html] one two three four five six [css] .txtStyle{font-size:14px; line-height: 20px; margin: 10px;} [js] $(document).ready(function(){ $('*').addClass('txtStyle'); $('em+a').css('background-color','yellow').each(function(){ $(this).appendTo('.result') }); }); [결과화면] 선택자 em+a 는 첫번째 em태그와 형제인 a태그를 의미한다. 즉 two라는 문자열이 들어있는 태그이고 이 태그를 appenTo()를 사용하여 클래스r.. 2020. 5. 26. [jQuery]마우스 휠 이벤트 연결하기 jQuery에서 마우스 휠을 움직였는지 안움직였는지 확인 할 수 있다. 우선 https://github.com/jquery/jquery-mousewheel jquery/jquery-mousewheel A jQuery plugin that adds cross-browser mouse wheel support. - jquery/jquery-mousewheel github.com 에서 js파일을 다운받아야한다. [html] [css] @charset "utf-8"; /*reset*/ *{margin:0; padding: 0;} ol, ul{list-style:none;} a{outline:0;text-decoration: none;color:#555;} img{border:0;} body{font:12px/1.. 2020. 5. 26. [jQuery]현재 시간 정보 나타내기:new Date() jQuery도 javaScript와 마찬가지로 현재 시간에 대한 정보를 알 수 있다. 현재 날짜와 시간에 대한 모든 정보를 가져올 땐 new Date(); 를 사용한다. [js] $(document).ready(function(){ var now = new Date(); $("p").eq(0).text(now); }); new Date()를 now라는 변수에 지정해서 출력해보면 현재 날짜에 대한 전체 정보가 출력된다. 마찬가지로 전체만 출력되는 것이 아니라 요일, 월, 일, 시간, 분, 초 등의 개별 정보만도 출력 가능하다. new Date(); 전체 날짜 정보 .getFullYear(); 연도 .getMonth()+1; 월(월은 0부터 시작하므로 +1을 해줘야한다.) .getDate(); 날짜 .get.. 2020. 5. 26. [jQuery]일정시간마다 특정 구문 반복하기:.setInterval() 일정시간마다 특정 구문 반복할 땐 .setInterval()을 사용한다. //변수지정하기 var 변수명 = setInterval(funcion() {} 반복시간 지정); *clearInterval(변수명)을 입력하면 setInterval() 구문을 중지 할 수 있다. 2020. 5. 26. [jQuery]x축,y축 위치 알아내기-.offset().top과 .offset().left $("선택자").offset().left; 화면상에서 특정 요소의 x축 위치 알아내고자 할 때 사용한다. $("선택자").offset().top; 화면상에서 특정 요소의 y축 위치 알아내고자 할 때 사용한다. [html] [css] div{width: 200px; height: 200px; background-color: blue; margin: 100px;} *margin을 모두 100px 줬다. 즉 화면상의 x,y축은 100px 인 것이다. [js] y축의 위치 $(document).ready(function(){ alert($("div").offset().top); }); x축의 위치 $(document).ready(function(){ alert($("div").offset().left); });.. 2020. 5. 26. 이전 1 다음 반응형
