제목 :  html javascript 사다리게임


소스 :

 

<!doctype html>

<html lang="en">

 <head>

  <meta charset="EUC-KR">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

  <style>

 #main{

  background:yellow;

  position:absolute;

  width:320pt;

  top:10pt;

  left:300pt;

 }

 #inputName{

  background:#66ff66;

  position:absolute;

  width:320pt;

  top:150pt;

  left:300pt;

  visibility:hidden;

 }

 #result{

  background:#9966ff;

  position:absolute;

  width:320pt;

  top:150pt;

  left:300pt;

  visibility:hidden;

 }

 

  </style>

  <script>

 var idNum = 0;

 var arra=[];

 var view = ["","ㅡ"];

 var num=0;

 window.onload=function(){

  var ok=document.getElementById("ok");

 

  var start=document.getElementById("start");

  var moneys=[];

 

 

  ok.onclick=function(){

   inputName.style.visibility="visible";

   num=document.getElementById("num").value;

   var show="<table border id='input'>";

   show+="<tr><th>no</th><th>이름</th><th>항목</th></tr>"

   for(var i=0; i<num; i++){

    show+="<tr><td>"+(i+1)+"</td><td><input type='text' name='name'></td><td><input type='text' name='item'></td></tr>";

   }

   show+="</table>";

   document.getElementById("show").innerHTML=show;

  }

 

  start.onclick=function(){

   inputName.style.visibility="hidden";

   result.style.visibility="visible";

   var name=document.getElementsByName("name");

   var item=document.getElementsByName("item");

   var show1="<h3>결과</h3><br>"

   show1+="<table width='50' height='500' id='output' >";

   show1+="<tr>";

   for(var i=0; i<num; i++){

    show1+="<td><input id = "+idNum+" type='button' name='b_name' value="+name[i].value+"></td>";

    idNum++;

    if(i!=num-1){

     show1+="<td> </td>";

     idNum++;

    }

   }

   show1+="</tr>";

   for(var i=0; i<10; i++){

    show1+="<tr>";

    for(var j=0; j<num; j++){

     //show1+="<td >"+parseInt(Math.random()*2)+"</td>";

     arra[j]=parseInt(Math.random()*2);

     show1+="<td>|</td>";

     idNum++;

     if(j!=num-1){

      if(j!=0&&(arra[j-1]==1)){

       arra[j]=0;

      }

      show1+="<td>"+view[arra[j]]+"</td>"; // 0 1 2

     }

    }

    show1+="</tr>";

   }

   show1+="<tr>";

   for(var i=0; i<num; i++){

    show1+="<td>"+item[i].value+"</td>";

    if(i!=num-1){

     show1+="<td></td>";

    }

   }

   show1+="</tr>";

   show1+="</table>";

   document.getElementById("shResult").innerHTML=show1;

   var b_name = document.getElementsByName("b_name");

   for(var i = 0; i <b_name.length; i++ ){

    b_name[i].onclick=chResult;

   }

  }

 }

 

 function chResult(){

  var tr = document.getElementsByTagName("tr");

  var i = parseInt(num)+2;

  var j = parseInt(this.id);

  var inter = null;

  var finish=tr[i].childNodes[j].innerHTML;

 

  tr[i].childNodes[j].innerHTML=3;

  inter=setInterval(function(){

 

 

 

     if(tr[i].childNodes[j-1]&&tr[i].childNodes[j-1].innerHTML=="ㅡ"){

      j=j-2;

     }

     else if(tr[i].childNodes[j+1]&&tr[i].childNodes[j+1].innerHTML=="ㅡ"){

      j=j+2;

 

     }

 

 

    finish=tr[++i].childNodes[j].innerHTML;

    tr[i].childNodes[j].innerHTML=3;

 

   if(finish!="|" && finish!="ㅡ"){

    alert(finish);

    clearInterval(inter);

   }

  },100);

 }

  </script>

 </head>

 <body>

 <div id="main">

  <center>

  <h3>사다리 게임</h3>

  참가할 인원: <input type="text" id="num"/><br>

  <input type="button" id="ok" value="확인"/>

 </div>

 <div id="inputName">

  <p id="show"></p>

  <input type="button" id="start" value="사다리타기"/>

 </div>

 <div id="result">

  <p id="shResult"></p>

 </div>

 

 

 

 

 </body>

</html>

 




내용 :




 출처 :  


저작자 표시 비영리 변경 금지
신고

'플밍_기타' 카테고리의 다른 글

ie 버전별 다운로드 페이지  (0) 2015.05.20
단축 URL 기법  (0) 2015.03.18
html javascript 사다리게임  (0) 2015.02.12
쿠키 허용 한도  (0) 2014.09.16
웹 개발자가 알아야할 사이트  (0) 2014.04.21
구글 다국어 지원 - 스크립트  (0) 2014.04.18
Posted by 잠수콩



제목 :  cookies 쿠키 허용 한도


Practical user agent implementations have limits on the number and

   size of cookies that they can store.  In general, user agents' cookie

   support should have no fixed limits.  They should strive to store as

   many frequently-used cookies as possible.  Furthermore, general-use

   user agents should provide each of the following minimum capabilities

   individually, although not necessarily simultaneously:

 

      * at least 300 cookies

 

      * at least 4096 bytes per cookie (as measured by the size of the

        characters that comprise the cookie non-terminal in the syntax

        description of the Set-Cookie header)

 

      * at least 20 cookies per unique host or domain name

 

   User agents created for specific purposes or for limited-capacity

   devices should provide at least 20 cookies of 4096 bytes, to ensure

   that the user can interact with a session-based origin server.

 

   The information in a Set-Cookie response header must be retained in

   its entirety.  If for some reason there is inadequate space to store

   the cookie, it must be discarded, not truncated.

 

   Applications should use as few and as small cookies as possible, and

   they should cope gracefully with the loss of a cookie.




내용 :

최대 300개, 4096바이트, 도메인당 20개


추가 : http://support.microsoft.com/kb/941495/ko

 

internet explorer 에서 도메인당 20개에서 50개로 제한 늘림


 출처 :  


저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩




제목 : 웹개발자가 알아야할 사이트


소스 :


reset css - reset 해야할 css 정리

http://www.cssreset.com/scripts/eric-meyer-reset-css/


tiny png - png 파일 용량을 확 줄여준다.

https://tinypng.com/

css validation service - CSS 오류

http://jigsaw.w3.org/css-validator/

-- URI, css파일업로드, 직접입력 방법 중 택1


w3c school - 각종 웹관련 language 등을 배울 수 있다.

http://www.w3schools.com/


내용 :



예제 소스 파일 :


 



저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩

 



제목 :  구글 다국어 지원 - 스크립트


소스 :

 

<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>구글 다국어 지원</title>
 </head>
 <body>
최근 전 세계 웹 브라우저 시장에서 크롬의 약진이 무섭다. 지난 2008년 출시하자마자 독주하던 인터넷 익스플로러(IE)의 점유율을 잠식하더니 최근 점유율 1위를 기록한 것. 2위로 물러난 IE는 점차 점유율을 높여 가고 있는 파이어폭스(3위)에게도 위협받고 있다. 그렇다면 이들 웹 브라우저는 어떤 강점이 있을까. 크롬·IE·파이어폭스·사파리·오페라 등 대표적인 웹 브라우저의 특징을 살펴봤다. <br>
<div id="google_translate_element">
    </div>
        <script type="text/javascript">
            function googleTranslateElementInit() {
                new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,de,en,fr,ru,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
            }
    </script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
 </body>
</html>

 




내용 :

 

위 script 의 내용 중

 

  function googleTranslateElementInit() {
   new google.translate.TranslateElement({pageLanguage: 'ko', includedLanguages: 'ar,de,en,fr,ru,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
  }

 

은 includedLangguages 옵션을 사용하여, 번역할 국가를 선택한 것만 노출되도록 한다.

 

---------------------------------------------------------------------------------------------------------

아래 script는 번역가능한 전체 국가 목록이 selectbox list 형태로 노출된다.

 

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'ko'
  }, 'google_translate_element');
}

 

---------------------------------------------------------------------------------------------------------

아래는 selectbox 클릭시 전체 국가명이 div 형태로 노출됨

function googleTranslateElementInit() {
 new google.translate.TranslateElement({
  pageLanguage: 'ko',
  autoDisplay: false,
  gaTrack: true,
  layout: google.translate.TranslateElement.InlineLayout.SIMPLE
 }, 'google_translate_element');
}
 

---------------------------------------------------------------------------------------------------------

위 스크립트 실행시 브라우저 상단에 구글 툴바 형태로 '번역' 관련 레이어가 보이는데,

아래 style 을 주면, 해당 레이어가 사라짐.

 

<style>

.goog-te-banner-frame.skiptranslate {display: none !important;}
body { top: 0px !important; }

</style>


예제 소스 파일 : test2.html


 


 

저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩

 



제목 :  CSS3 Multi Column - 신문지 처럼 Column 갯수에 맞게 css3 코딩하는 법


 

 







 

저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 :  Zen-Coding 사용법 - 에디트플러스 내에서


사용법 : Ctrl+E 하면 해당 라인의 명령줄이 실행됨.


에디트플러스의 상단메뉴에서 ZC 클릭 > 활성화


내용 :

 script  --> ctrl + E 실행
 <script type="text/javascript"></script>
 link  --> ctrl + E 실행
 <link rel="stylesheet" href="" />
 </head>

 <body>

div.item$-$-content*6  --> ctrl + E 실행
<div class="item1-1-content"></div>
<div class="item2-2-content"></div>
<div class="item3-3-content"></div>
<div class="item4-4-content"></div>
<div class="item5-5-content"></div>
<div class="item6-6-content"></div>

div#page>div.logo+ul#navigation>li*5>a  --> ctrl + E 실행
<div id="page">
 <div class="logo"></div>
 <ul id="navigation">
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
 </ul>
</div>

div#button>a  --> ctrl + E 실행
<div id="button"><a href=""></a></div>

div#footer  --> ctrl + E 실행
<div id="footer"></div>



예제 소스 파일 :



저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 :  윈도우7 64비트에서 ODBC 안될때


64비트에선 sql server 만 인식되어 ODBC driver가 없는데

 

C:\Windows\SysWOW64\odbcad32.exe 이것을 실행하면 32비트로 실행할 수 있음. 기타 드라이버 모두 있다.




내용 : C:\Windows\SysWOW64\odbcad32.exe 를 실행시키면 됨



예제 소스 파일 :


 


저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 :  mfc71d.dll, msvcp71d.dll, msvcr71.dll, msvcr71d.dll 파일 다운로드


소스 :

 

mfc_dll.zip




내용 : mfc71d.dll, msvcp71d.dll, msvcr71.dll, msvcr71d.dll 등 mfc 관련 윈도우에 필요한 dll 파일들.

 

window root \ system32 폴더에 넣어두거나, 해당 프로그램 root 에 넣어두면 된다.



예제 소스 파일 :


 


저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 :  capicom.dll을 윈도우7에서 레지스트리 등록안될때 처리법


 

 




내용 : 윈도우7에서 capicom.dll 을 설치시 설치할 수 없다는 에러메시지와 함께 경고창이 뜨고 마는 경우가 생기는데,

capicom이 x86 버전이고, 64비트용이 아니라서..어쩌구는 아니고,

단지 레지스트 등록할때 관리자모드로 했냐 안했냐 차이다.

cmd 를 마우스 우클릭해서 '관리자로 실행' 한 후 capicom이 저장되어있는 폴더로 이동해서

regsvr32 capicom.dll 하면 설치됨.



capicom.dll SDK 파일 다운로드 링크 : http://www.microsoft.com/ko-kr/download/details.aspx?id=25281


출처 : 광고 좀 클릭해주세요. 보시는 건 많이들 보시는데...댓글도 없궁. 그냥 퍼가기만 하시니....


저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩

제목 :  노트북의 무선랜을 이용하여, AP로 이용. 스마트폰으로 웹페이지 접근하기. 노트북 ap 만들기


http://www.connectify.me/hotspot/

 

에서 connetctify FREE 프로그램을 다운 받는다.

 

FREE 프로그램이기 때문에 PRO 의 기능을 기대할 순 없지만, 모바일웹을 자체 호스트로 개발할 수 있다.

--------------------------------------------------------------------------------------------

프로그램 실행하고,

 

* 프로그램 셋팅

 

1. 탭메뉴중  settings >> Hotspot Name 설정 ( name에 강제로 Connectify 문자열이 들어간다 ㅜㅜ)

2. 패스워드 설정

3. internet to share 생성 - PRO 버전에만 되는 것이 있으니, 자기 무선랜을 선택

4. share Over - 위와 동일한 것 선택

5. 암호화방식 선택 - 되는것을 선택.

6. Start HotSpot 버튼 클릭

 

 

 

이렇게 하면 일단 설정이 완료된 것이다. 

 

 

이렇게 준비된 디바이스가 잡히는데, 이름을 변경할 수도 있다. 해당 디바이스에 대고 우클릭 >> Rename 클릭

 

 

 

* 사용방법
1. PC - 무선랜카드, 또는  USB 구입후 장착한 후, 무선랜 >> 어댑터에서 Hotspot Name 을 더블클릭, 패스입력하면 사용가능

2. 스마트폰 - wi-fi 검색에서 위 Hotspot Name 선택후 패스워드 입력, 연결.




내용 : 노트북의 AP를 따와서 Wi-Fi가 되게 하는 방법인데, 여러 방법으로 가능하리라 본다.

하지만, 노트북의 iis 설치후 로컬 웹페이지를 로딩하는게 힘들었는데, 위 방법으로 하면 접근 가능하다.

대신, iis 에서 웹사이트 바인딩을 80이 아닌 다른 포트로 전향하면 노트북의 웹서비스 > 웹페이지에 접근 가능하다.

 

이것으로 스마트폰에서 보여지는 모바일웹 페이지의 view 를 보며 개발할 수 있다.

노트북 웹서비스에 접근하기 위해서는 로컬ip가 필요한데, 이것은 ipconfig /all 실행 후,

무선 LAN 어댑터 무선 네크워크 연결의 IPv4 주소가 로컬 접근 ip 가 된다.

 

참고로, 나는 위 아이피를 찾은 후, 웹사이트 바인딩포트를 8080 으로 하니 접근이 된다.

당연히, iis 가 설치가 되는 윈도우 버전인 노트북이어야 하것지...

 

쉽게 절차를 말하자면,

 

1. 노트북 iis 의 웹사이트 설정에서 바인딩 8080 추가

2. 노트북의  ipconfig /all 실행

3. 노트북의 로컬 아이피 획득 ( 192.168... )

4. 스마트폰 브라우저 주소란에 192.168...:8080/index.html 입력 후 이동.



출처 : 도움되셨으면, 광고 클릭 좀~~ ^^;;


저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩