<html>
<head>
<style type="text/css">
</style>
<script>
var array = [ "서", "울", "I", "T", "교", "육", "센", "터","여","러","분","힘","내","세","요","^","^" ];
var cnt1 = 0;
var cnt2 = array.length;
window.onload = function() {
increase(); //먼저 증가하는 메서드를 호출한다.
}
function increase() {
if(cnt1<array.length){ //cnt1이 배열의 길이가 되기직전까지 문자를 하나씩 추가하여 innerHTML에 넣는다.
f.innerHTML += array[cnt1];
cnt1++;
timer = setTimeout("increase()", 200); //0.2초후에 증가 메서드를 호출한다.
}else{ //만약 배열의 길이와 cnt1이 같아진다면 글자수가 감소해야되므로 감소하는 메서드를 호출한다.
cnt1=0; //무한반복을 위해 cnt1은 다시 초기화 시켜준다.
decrease();
}
}
function decrease() { //감소하는 로직을 갖고있는 메서드
if(cnt2>0){ //cnt2는 배열의 길이를 담고 있으므로 0직전까지 감소시키기 위해 조건을 준다.
f.innerHTML=f.innerHTML.substring(0,cnt2-1);
cnt2--;
timer = setTimeout("decrease()", 200); //0.2초 후에 감소 메서드를 호출한다.
}else{ //cnt가 0이 된다면 다시 증가해야하므로 증가메서드를 호출한다.
cnt2=array.length; //무한반복을 위해 cnt2도 배열의 길이로 초기화시켜준다.
increase();
}
}
</script>
</head>
<body>
<div id="f"></div>
</body>
</html>
'개발하자 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 달력만들기!! (0) | 2015.02.18 |
|---|---|
| request ,session,application (0) | 2015.02.17 |
| 현재 시스템의 초count 하기 (0) | 2015.02.17 |
| 글자색 0.5초마다 변하기 (0) | 2015.02.17 |
| 카운트시작과 멈춤 setTimeout(),clearTimeout() (0) | 2015.02.17 |
