.charAt 예제

 

갤러리 배열

이번 예제는 jquery의 String 클래스, charAt 예제입니다. 예제의 조건은 다음과 같습니다.

1. 입력을 받기 위한 칸과 "값 입력"이라는 버튼을 둬주세요
2. 버튼을 누르면 전에 있던 텍스트가 사라지고 입력받은 문자열을 1초에 한번씩 #pannel에 출력해주세요
3. 출력이 완료되면 전에 있던 텍스트가 사라지고 "종료되었습니다"라는 글씨가  #pannel에 나타나고 밑에 초기화 버튼을 넣어주세요
4. 초기화 버튼을 누르면 1의 과정으로 돌아갑니다
5. #pannel{border:1px solid black; width:500px;height:250px;text-align:center; vertical-align:middle; display:table-cell;}
   .letter{display:inline-block;}

아래는 예제를 완성시킨 모습입니다.

표시할 문자:

종료됐습니다

이 예제의 코드

<span class="pln"> </span><span class="pun">내용물</span><span class="pln"> </span><span class="str">&lt;style&gt;</span><span class="pln"> </span><span class="com">#pannel{border:1px solid black; width:500px;height:250px;text-align:center; vertical-align:middle; display:table-cell;}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">letter</span><span class="pun">{</span><span class="pln">display</span><span class="pun">:</span><span class="kwd">inline</span><span class="pun">-</span><span class="pln">block</span><span class="pun">;}</span><span class="pln"> </span><span class="pun">&lt;/</span><span class="pln">style</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln">div id</span><span class="pun">=</span><span class="str">"pannel"</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"letter"</span><span class="pln"> id</span><span class="pun">=</span><span class="str">"input_pannel"</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">표시할</span><span class="pln"> </span><span class="pun">문자:&lt;</span><span class="pln">input type</span><span class="pun">=</span><span class="str">"text"</span><span class="pln"> id</span><span class="pun">=</span><span class="str">"show_letter"</span><span class="pun">&gt;&lt;</span><span class="pln">br </span><span class="pun">/&gt;&lt;</span><span class="pln">input type</span><span class="pun">=</span><span class="str">"button"</span><span class="pln"> </span><span class="kwd">value</span><span class="pun">=</span><span class="str">"값 입력"</span><span class="pln"> id</span><span class="pun">=</span><span class="str">"start"</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">&lt;/</span><span class="pln">div</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"letter"</span><span class="pln"> id</span><span class="pun">=</span><span class="str">"show_pannel"</span><span class="pun">&gt;&lt;/</span><span class="pln">div</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"letter"</span><span class="pln"> id</span><span class="pun">=</span><span class="str">"end_pannel"</span><span class="pun">&gt;종료됐습니다&lt;</span><span class="pln">br </span><span class="pun">/&gt;&lt;</span><span class="pln">input type</span><span class="pun">=</span><span class="str">"button"</span><span class="pln"> </span><span class="kwd">value</span><span class="pun">=</span><span class="str">"초기화"</span><span class="pln"> id</span><span class="pun">=</span><span class="str">"init"</span><span class="pun">&gt;&lt;/</span><span class="pln">div</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">&lt;/</span><span class="pln">div</span><span class="pun">&gt;</span><span class="pln"> </span><span class="str">&lt;script&gt;</span><span class="pln"> show</span><span class="pun">(</span><span class="lit">1</span><span class="pun">);</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#start'</span><span class="pun">).</span><span class="pln">click</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#show_letter'</span><span class="pun">).</span><span class="pln">val</span><span class="pun">()</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> string_number </span><span class="pun">=</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> show</span><span class="pun">(</span><span class="lit">2</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> I </span><span class="pun">=</span><span class="pln"> setInterval</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#show_pannel'</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="kwd">string</span><span class="pun">.</span><span class="pln">charAt</span><span class="pun">(</span><span class="pln">string_number</span><span class="pun">));</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">string</span><span class="pun">.</span><span class="pln">length </span><span class="pun">==</span><span class="pln"> string_number</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> show</span><span class="pun">(</span><span class="lit">3</span><span class="pun">);</span><span class="pln"> clearInterval</span><span class="pun">(</span><span class="pln">I</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> string_number</span><span class="pun">++;</span><span class="pln"> </span><span class="pun">},</span><span class="lit">1000</span><span class="pun">)</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#init'</span><span class="pun">).</span><span class="pln">click</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#show_letter'</span><span class="pun">).</span><span class="pln">val</span><span class="pun">(</span><span class="str">""</span><span class="pun">);</span><span class="pln"> show</span><span class="pun">(</span><span class="lit">1</span><span class="pun">);</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> show</span><span class="pun">(</span><span class="pln">number</span><span class="pun">){</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#pannel&gt;div'</span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="str">"display"</span><span class="pun">,</span><span class="str">"none"</span><span class="pun">)</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#pannel&gt;div'</span><span class="pun">).</span><span class="pln">eq</span><span class="pun">(</span><span class="pln">number</span><span class="pun">-</span><span class="lit">1</span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="str">"display"</span><span class="pun">,</span><span class="str">""</span><span class="pun">)</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">&lt;/</span><span class="pln">script</span><span class="pun">&gt;</span>