.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;}

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

표시할 문자:

종료됐습니다

이 예제의 코드

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