web.paper 1 페이지 | web.paper

w e b . p a p e r

[jquery/js] 메일 자동완성 코드 [css] position:absolute 가운데 정렬 [js/jquery] 배열에서 최고, 최소 값 찾아오기 (jquery array max, min) [js] jqGrid 무료 QR코드 생성기 favicon 만들기 홈페이지 제작에 필수 구글웹폰트 Korean [youtube] 동영상 플레이 하는 목록 / 화면 만들어보기

[jquery/js] 메일 자동완성 코드

메일 자동완성코드 Autocomplete | jQuery UIjQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.https://jqueryui.com/autocomplete/ jQuery UI Autocomplete 사용 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> function autoEmail(a,b){ /* a : input의 ID b : 입력되는 input의 값 */ var mailId = b.split('@'); // 메일계정의 ID만 받아와서 처리하기 위함 var mailList = ['naver.com','gmail.com','daum.net','hanmail.net','korea.kr']; // 메일목록 var availableCity = new Array; // 자동완성 키워드 리스트 for(var i=0; i < mailList.length; i++ ){ availableCity.push( mailId[0] +'@'+ mailList[i] ); // 입력되는 텍스트와 메일목록을 조합 } $("#"+a).autocomplete({ source: availableCity, // jQuery 자동완성에 목록을 넣어줌 focus: function(event, ui) { return false; } }); } </script> <div class="ui-widget"> <label for="email">email: </label> <input id="email" onkeyup="autoEmail('email',this.value)" autocomplete="off"> </div>

# jqueryui # jquery # 메일자동완성

21-01-05 17:21

4057

1
[js/jquery] 배열에서 최고, 최소 값 찾아오기 (jquery array max, min)

jquery 배열에서 최고, 최소 값 받아오는 소스 Math.max.apply(null, 배열); // 최대값Math.min.apply(null, 배열); //최소값

# jquery # 배열최소값 # 배열최대값

20-12-28 16:29

2583

0
[js] jqGrid

jqGrid[HTML]<table id="jqGrid"></table>[javascript]<script>jQuery("#jqGrid").jqGrid({ datatype: "local", autowidth: true, shrinkToFit: true, height: 400, colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int",align:"center"}, {name:'invdate',index:'invdate', width:90, sorttype:"date",align:"center"}, {name:'name',index:'name', width:100, align:"center"}, {name:'amount',index:'amount', width:80, align:"center",sorttype:"float"}, {name:'tax',index:'tax', width:80, align:"center",sorttype:"float"}, {name:'total',index:'total', width:80,align:"center",sorttype:"float"}, {name:'note',index:'note', width:150, sortable:false, align:"center"} ], multiselect: true }); var mydata = [ {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ]; for(var i=0;i<=mydata.length;i++){ jQuery("#jqGrid").jqGrid('addRowData',i+1,mydata[i]); }</script>

# jquery # jqgird

20-12-28 16:25

2640

0
[youtube] 동영상 플레이 하는 목록 / 화면 만들어보기

구현된 페이지 캐나다온라인 수업캐나다온라인 수업, 캐나다고등학교 내신관리, 수학, 과학,영어,사회 토플 SAT 시험대비http://online.ige.kr/?page=sample 기본 개념은 이러합니다. #1 Youtube의 영상 공유하기에서, 코드를 선택하면 Iframe 형태로 공유할 수 있습니다. #2 그 코드에서 고유 콘텐츠 값 만을 변경하여, 플레이 리스트를 만들어 봅니다. <iframe width="1000" height="562" src="https://www.youtube.com/embed/yvg6m2ZUoHg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>공유하기에서 코드를 선택하면 대략적으로 저런 코드가 나옵니다. 여기서 src="https://www.youtube.com/embed/yvg6m2ZUoHg" 이 코드가 콘텐츠에 대한 주소이고, 여기서 yvg6m2ZUoHg 이 코드가 고유 콘테츠 코드라 할 수 있겠습니다. 그럼 여기서 부터 시작합니다. <iframe id="sampleMovie" width="1000" height="562" src="https://www.youtube.com/embed/yvg6m2ZUoHg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><div class="sampleMovieList"> <ul> <li><a href="#" data-url='yvg6m2ZUoHg'>수학강의 ( Grade 10, 11 )</a></li> <li><a href="#" data-url='yvg6m2ZUoHg'>화학 강의 ( Grade 11 )</a></li> <li><a href="#" data-url='yvg6m2ZUoHg'>고등학생 학업관리</a></li> </ul></div>동영상을 보여줄 Iframe과 리스트의 간략한 html 코드입니다. 여기서 중요한 것은 <a href="#" data-url='yvg6m2ZUoHg'>이 것입니다. 여기 data-url 에 다른 동영상들의 고유 코드 값을 넣어둡니다. data()의 활용법은 아래 링크 참고 해주세요. .data() | jQuery API DocumentationThe .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.https://api.jquery.com/data/ Script 입니다. $(".sampleMovieList ul li a").click(function(){ var movSrc = 'https://www.youtube.com/embed/'+$(this).data('url')+'?autoplay=1'; $("#sampleMovie").attr('src',movSrc); return false; });$(".sampleMovieList ul li a").click(function(){이 부분은 버튼을 클릭하는 동작입니다. $(this).data('url') 은 위의 html 코드에서 <a href="#" data-url='yvg6m2ZUoHg'> 여기에 넣어둔 고유 코드를 가져오는 부분입니다. $(this).data('url') 에서 $(this) 는 $(".sampleMovieList ul li a").click 이렇게 했으니 가능한 부분입니다. var movSrc = 'https://www.youtube.com/embed/'+$(this).data('url')+'?autoplay=1';코드를 받아와서, Iframe에 들어갈 주소를 만듭니다. +'?autoplay=1'; 이 코드는 주소에 넣으면 자동으로 플레이가 됩니다. $("#sampleMovie").attr('src',movSrc); 이 부분이 Iframe에 주소를 전달하는 부분입니다.

# youtube # jquery # javascript # 동영상플레이어

20-04-22 14:28

4745

1
[js/jquery] div 화면에 나왔는지 확인하는 함수

다른 lib 를 사용해서도 충분히 구현가능하다만, 그냥 필요에 의해서 한번 만들어본 코드 일단 필요할 것이라 판단되는 상황은 아래와 같다. 스크롤을 하다, 특정 영역에 도달했을 때 뭔가 동작이 일어나야함상단 네비게이션에 특정 영역에 메뉴 On 시킬 때 css animation을 실행시키는 시점(?) 이건 개인적인 걸로,,암튼 등등의 경우에 사용된다. 공식은 이러하다.#1 현재 위치 값을 알아낸다. - 현재 위치를 알아야, 특정 DIV의 위치와 비교를 할 수 있다. #2 특정 DIV 위치를 알아야한다. - #1과 같은 맥락이네.. 암튼 함수는 이러하다 function setVisible(a){ if( a.length > 0 ){ var stdPos = $(window).scrollTop() + $(window).height() - ($(window).height() / 3); if( stdPos > a.offset().top ){ a.addClass('on'); } } } setVisible는 함수명이다. 자유롭게 변경가능하다. (a) 는 div 엘레멘트이다. 재사용을 위해 ( div 만 지정해서, 반복해서 사용가능하기 때문에 )if( a.length > 0 ){이 부분은 내가 선택한 div 가 화면에 있을 경우에만 실행시키기 위해 넣은 것이다. $(window).scrollTop() + $(window).height() - ($(window).height() / 3);$(window).scrollTop() : 현재 윈도우의 스크롤 값 ( 0에서 부터 시작하고, 한번 스크롤 할때마다 100씩 증가한다. )$(window).height() : 현재 윈도창의 높이 현재 창의 높이를 알아야 현재 위치를 알 수 있다. ($(window).height() / 3) : 이건 div 가 창의 3분의 1 지점에 보일 때 체크하기 위함 ( 필요없다면 역시 삭제 )이제부터 비교하는 영역 if( stdPos > a.offset().top ){a.offset().top : div 의 위치 값. 화면에서 document 크기를 기준으로, 콘텐츠 시작점 위치 값을 준다. 이제 현재 위치와 div의 위치를 비교해서 현재 위치가 div 위치보다 클 경우 즉 스크롤이 div 를 지나쳤다고 판단되면, 필요한 기능을 추가하여 사용한다. 나의 경우는 'on' class 를 추가시켰다.

# jquery # javascript # 보이나안보이나 # 보일때뭐하기

20-04-22 13:55

7917

1
[js/jquery] 스크롤 Top 버튼 만들기

참 안외워 진다. 웬만하면 외워서 직접 작성하고 싶은데 매번 검색해서 쓰기되는 코드 <script> $(".goTop").click(function(){ $('body,html').animate({scrollTop:0},400); // 숫자는 움직이는 시간 클릭한 곳에서 Top 까지의 이동시간이라 보면 되겠다. return false; }); </script> <a href="#" class="goTop"> TOP </a>이제는 외워서 써보자

# jquery # javascript # CSS # HTML

20-04-22 13:44

3356

0
[jquery/css] 간단한 탭메뉴 만들기 tab menu

jquery 와 css 을 이용한 간단한 탭메뉴 만들기 head 부분에 jquery 호출 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>tab 메뉴를 구현할 box 만들기 box는 가로 200px 세로길이는 컨텐츠에 따라 자동으로 늘어나는 auto height로 구성height:auto;overflow:hidden; .tab{ width:200px; height:auto; overflow:hidden; }<div class="tab"></div>클릭하여 동작할 tab 부분 css 작업 tab을 3개 넣을거라 33.3333% 로 작업 / 같은 크기의 3개의 탭높이는 텍스트의 line-height 로 잡음 (40px)tab을 클릭해야 함으로 cursor:pointer 로 마우스 커스를 올렸을때 손가락 모양이 나오게 함그리고 tab이 선택된 것을 표시하기 위해 .on 클래스로 표기함 마우스 오버와 선택된 것을 동일하게 적용하기 위해 .tab ul li:hover,.tab ul li.on{ /*css*/ }위와같이 구현함 .tab{ width:200px; height:auto; overflow:hidden; } .tab ul{ padding:0; margin:0; list-style:none; width:100%: height:auto; overflow:hidden; } .tab ul li{ display:inline-block; width:33.3333%; float:left; line-height:40px; text-align:center; cursor:pointer; } .tab ul li:hover, .tab ul li.on{ background:#ccc; }<div class="tab"> <ul> <li class="on">tab #1</li> <li>tab #2</li> <li>tab #3</li> </ul></div>tab 선택에 따라 보여줄 content box 작업content box는 선택된 것만 보여줄 것이므로 기본적으로 display:none 으로 처리 선택된 것을 표시하기 위해 .on 클래스를 추가하여 display:block 속성을 줌 .tab{ width:200px; height:auto; overflow:hidden; } .tab ul{ padding:0; margin:0; list-style:none; width:100%: height:auto; overflow:hidden; } .tab ul li{ display:inline-block; width:33.3333%; float:left; line-height:40px; text-align:center; cursor:pointer; } .tab ul li:hover, .tab ul li.on{ background:#ccc; } .tab .conBox{ width:100%; height:auto; overflow:hidden; min-height:200px; background:#ccc; display:none; text-align:center; } .tab .conBox.on{ display:block; }<div class="tab"> <ul> <li class="on">tab #1</li> <li>tab #2</li> <li>tab #3</li> </ul> <div id="con1" class="conBox on"> cont1 </div> <div id="con2" class="conBox"> cont2 </div> <div id="con3" class="conBox"> cont3 </div></div>이렇게 되면 기본적인 틀을 되었음 이제 jquery 작업 시작 <script> $(function(){ // tab 메뉴를 클릭하였을 때 동작함 $(".tab ul li").click(function(){ // 현재 선택되어있던 메뉴들을 초기화함 $(".tab ul li").removeClass('on'); $(".tab .conBox").removeClass('on'); // 선택된 메뉴에 on 클래스를 주어 표기함 $(this).addClass('on'); // 선택된 탭의 data 값으로 content box를 선택함 $("#"+$(this).data('id')).addClass('on'); }); });</script>선택된 li 에 대한 index 값으로도 content box의 id 를 호출 할 수 있고, 그외 다른 방법들로도 구현은 가능하나, 이번에는 data 값을 주어 그 값으로 호출함간단하게 jquery와 css를 이용하여 탭메뉴 만들기 끝 완성코드 CSS .tab{ width:200px; height:auto; overflow:hidden; } .tab ul{ padding:0; margin:0; list-style:none; width:100%: height:auto; overflow:hidden; } .tab ul li{ display:inline-block; width:33.3333%; float:left; line-height:40px; text-align:center; cursor:pointer; } .tab ul li:hover, .tab ul li.on{ background:#ccc; } .tab .conBox{ width:100%; height:auto; overflow:hidden; min-height:200px; background:#ccc; display:none; text-align:center; } .tab .conBox.on{ display:block; }HTML / JAVASCRIPT<div class="tab"> <ul> <li data-id="con1" class="on">tab #1</li> <li data-id="con2">tab #2</li> <li data-id="con3">tab #3</li> </ul> <div id="con1" class="conBox on"> cont1 </div> <div id="con2" class="conBox"> cont2 </div> <div id="con3" class="conBox"> cont3 </div></div><script> $(function(){ $(".tab ul li").click(function(){ $(".tab ul li").removeClass('on'); $(".tab .conBox").removeClass('on'); $(this).addClass('on'); $("#"+$(this).data('id')).addClass('on'); }); });</script>

# jquery # CSS # 탭메뉴

19-03-05 10:22

25066

1
[js/jquery] 라디오박스/체크박스 값가져오기 (chkeckbox / radio get value)

jquery 를 사용하여, 체크박스 및 라디오 박스에서 값을 가져오는 코드 HTML 코드 <h2>체크박스</h2> <label><input type="checkbox" name="checkbox" value="chk1">chk1</label> <label><input type="checkbox" name="checkbox" value="chk2">chk1</label> <label><input type="checkbox" name="checkbox" value="chk3">chk3</label> <h2>레디오박스</h2> <label><input type="radio" name="radiobox" value="rdo1">rdo1</label> <label><input type="radio" name="radiobox" value="rdo2">rdo2</label> <label><input type="radio" name="radiobox" value="rdo3">rdo3</label> <button type="button" onclick="getValue()">값가져오기</button>script 부분 function getValue(){ console.log( 'radiobox값 : '+$(":input:radio[name=radiobox]:checked").val() ); $("input[name=checkbox]:checked").each(function() { console.log( 'checkbox값 : '+$(this).val() ); }); }

# jquery # checkbox # radiobox

19-02-21 09:32

15602

0
[JS/jQuery] 야구 게임 / PHP 간단한 숫자 야구 게임

PHP 웹페이지로 만든 간단한 숫자 야구게임 web.paper | PHP 야구게임PHP로 만든 간단한 야구게임http://webpaper.kr/baseball/ 방식 1. 1~9 사이의 숫자 중 중복되지 않는 3자리의 숫자를 입력한다. 2. 세자리의 숫자 중 숫자와 자리가 모두 맞으면 스트라이크 3. 숫자는 맞고, 자리가 틀리면 볼 4. 1번 숫자를 입력하는 것이 1회가 되며, 9회까지 기회가 제공됨.5. 입력된 숫자 중 스트라이크와 볼이 모두 없으면 아웃이 되며, 3아웃이 되면 게임이 종료된다. #1. 정답이 될 3자리 숫자를 랜덤 함수를 이용해서, 만든다. function makeNum(){ //중복없는 3자리 숫자 생성 var numbers = []; var pickNumbers = 3; for(insertCur = 0; insertCur < pickNumbers ; insertCur++){ numbers[insertCur] = Math.floor(Math.random() * 9) + 1; for(searchCur = 0; searchCur < insertCur; searchCur ++){ if(numbers[insertCur] == numbers[searchCur]){ insertCur--; // insertCur를 앞으로 민다 break; } } } return numbers;}#2. 입력된 숫자와 정답숫자를 비교 function setGame(a,b){// console.log(a);//공격번호// console.log(b);//맞출번호 var sCnt = 0; // 스트라이크 var bCnt = 0; // 볼 for(var i = 0; i<3; i++){ if(a[i] == b[i]){ //자리와 숫자가 맞으면 Strike 증가 sCnt++; }else{ for(var j = 0; j<3; j++){ //자리가 맞지 않고 숫자만 맞을 경우 Ball 증가 if(a[j] == b[i]){ bCnt++; } } } } gameCnt++; // 실행횟수 증가 // Strike 도 Ball 도 없는 경우 Out Count 증가 if(sCnt == 0 && bCnt == 0){ gameOutCnt++; } // Outdl 3일 경우 // 9번의 기회가 종료될때까지 3Strike가 되지 않은 경우 if(gameOutCnt > 2 || gameCnt == 9 && sCnt != 3){ chkGameOver = true; } if(sCnt == 3){ // win } }#3. 게임의 재미를 위해 최초로 숫자를 입력한 후에는 다음 입력시까지 30초의 제한을 둔다. function statrTimer(){ //타이머 if(setTimer == null){ timer = 30; setTimer = setInterval(function() { // 10초 이하일 경우 숫자에 색상 추가 if(timer < 10 ){ if($(".timer").hasClass() != 'on'){ $(".timer").addClass('on'); } } if(timer == 0 ){ // 제한시간 종료 시 숫자는 000 으로 입력됨 stopTimer('end'); statrTimer(); }else if(chkGameOver == true){ // 게임종료시 타이머 종료 stopTimer(); }else{ // 타이머 화면 표출 영역 $(".timer").html(timer); timer--; } }, 1000); } } function stopTimer(a){ // 타이머 중지 if(a=='end'){ // 타이머 오버 시 000 입력 setGame('000',rndNum); } // 타이머 색상 초기화 $(".timer").removeClass('on'); // 타이머 종료설정 clearInterval(setTimer); setTimer = null; $(".timer").html('30');}그렇게 만들어진 게임

# jquery # php # 야구게임

19-02-20 09:49

6940

0
[jquery/iframe] jquery > iframe 내에 접근하기

jquery로 iframe 내에 접근하기 <div id="frameBox"> <iframe id="ifrm"></iframe></div>// iframe 내의 콘텐츠로 접근$('#ifrm').contents(); // iframe 내의 콘텐츠 class 또는 id 로 selector $('#ifrm').contents().find('.class');$('#ifrm').contents().find('#id'); 이중 iframe의 경우 <div class="frameBox"> <iframe id="ifrm1"> <iframe id="ifrm2"></iframe> </div> var iframeInner = $('#ifrm1').find('#ifrm2').contents();var iframeContent = $(iframeInner).contents().find('.class');// $(iframeInner).contents().find('#id');이런 방법으로 접근가능합니다.

# jquery # iframe

19-02-20 09:39

10775

0

내 IP 주소확인

IP로 위치확인하는 페이지

Box-Shadow CSS

Box-Shadow CSS 설정 페이지

레이아웃 계산

배너사이즈 구하기

반응형 테스터

반응형 테스트 / 해상도 별 화면

셀프 배너제작

간단한 이미지 제작 셀프로 쉽게!