자바 스크립트 "..."대신 애니메이션 GIF를 사용하는

Question

간격

와 루프 기다리고 점은, 내가 대신 스팬의 텍스트를 가지고 싶다 :

1. 는
2. 대기 대기.
3. 대기 ..
4. 대기 ...

I 각 루프를 순환하고자하고 무한 루프의 첫 번째로 복귀. 또한 속도를 높이거나 느리게 할 간격을 제어하고 싶습니다. 내 HTML을 다음과 같이 지정하고 싶습니다.

<p>Waiting<span id="dots"></span></p> 

간단히 innerHTML 범위를 순환 시키십시오. 감사!

Answer 1

아마도 올바른 방향으로 설정 될 것입니다. 코드가 스스로 설명해야한다고 생각합니다.

function iterateDots(){ 
    var el = document.getElementById("dots"); 
    var dotsStr = el.innerHTML; 
    var dotsLen = dotsStr.length; 

    var maxDots = 3; 
    el.innerHTML = (dotsLen < maxDots ? dotsStr + '.' : ''); 
} 

function startLoading(){ 
    var intervalMs = 300; 

    var interval = setInterval("iterateDots()", intervalMs); 
}  

Answer 2

dots = document.getElementById('dots');은 점을 넣으려는 DOM 요소를 가져오고 해당 요소의 innerHTML 속성을 사용하면 그 안에 내용을 조작 할 수 있습니다.

특정 간격으로 범위를 변경하는 경우는 setInterval() 및 setTimeout()을 참조하십시오. 당신은 당신의 필요에 가장 적합한 것을 골라야 할 것입니다.

실제 해결 방법을 게시하지 않았으므로 올바른 방향으로 알려야합니다.