如何阻止Javascript动画文本重复?

时间:2016-08-19 11:42:35

标签: javascript jquery html

我有这个代码用于逐个显示这些字母和单词,但我的问题是代码仍在重复,有人可以帮助我知道如何阻止它吗?

 <div id="changeText"></div>
    <script type="text/javascript">
    var text = ["|", "W|", "We|", "Wel|", "Welc|", "Welco|", "Welcom|", "Welcome|", "Welcome |", "Welcome t|", "Welcome to|", "Welcome to |", "Welcome to K|", "Welcome to Ka|", "Welcome to Kar|", "Welcome to Karl|", "Welcome to Karla|", "Welcome to Karla'|", "Welcome to Karla's|", "Welcome to Karla's |", "Welcome to Karla's T|", "Welcome to Karla's Tr|", "Welcome to Karla's Tra|", "Welcome to Karla's Trad|", "Welcome to Karla's Tradi|", "Welcome to Karla's Tradin|", "Welcome to Karla's Trading|", "Welcome to Karla's Trading", "Welcome to Karla's Trading|", "Welcome to Karla's Tradin|", "Welcome to Karla's Tradi|", "Welcome to Karla's Trad|", "Welcome to Karla's Tra|", "Welcome to Karla's Tr|", "Welcome to Karla's T|", "Welcome to Karla's |", "Welcome to Karla's|", "Welcome to Karla'|", "Welcome to Karla|", "Welcome to Karl|", "Welcome to Kar|", "Welcome to Ka|", "Welcome to K|", "Welcome to |", "Welcome t|", "Welcome |", "Welcome|", "Welcom|", "Welco|", "Welc|", "Wel|", "We|", "W|", "|"];
    var counter = 0;
    var elem = document.getElementById("changeText");
    setInterval(change, 250);
    function change() {
     elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { counter = 0; }
    }


    </script>

3 个答案:

答案 0 :(得分:4)

它会重复,因为你将计数器设置为0.看看当我发表评论时会发生什么。

&#13;
&#13;
 <div id="changeText"></div>
    <script type="text/javascript">
    var text = ["|", "W|", "We|", "Wel|", "Welc|", "Welco|", "Welcom|", "Welcome|", "Welcome |", "Welcome t|", "Welcome to|", "Welcome to |", "Welcome to K|", "Welcome to Ka|", "Welcome to Kar|", "Welcome to Karl|", "Welcome to Karla|", "Welcome to Karla'|", "Welcome to Karla's|", "Welcome to Karla's |", "Welcome to Karla's T|", "Welcome to Karla's Tr|", "Welcome to Karla's Tra|", "Welcome to Karla's Trad|", "Welcome to Karla's Tradi|", "Welcome to Karla's Tradin|", "Welcome to Karla's Trading|", "Welcome to Karla's Trading", "Welcome to Karla's Trading|", "Welcome to Karla's Tradin|", "Welcome to Karla's Tradi|", "Welcome to Karla's Trad|", "Welcome to Karla's Tra|", "Welcome to Karla's Tr|", "Welcome to Karla's T|", "Welcome to Karla's |", "Welcome to Karla's|", "Welcome to Karla'|", "Welcome to Karla|", "Welcome to Karl|", "Welcome to Kar|", "Welcome to Ka|", "Welcome to K|", "Welcome to |", "Welcome t|", "Welcome |", "Welcome|", "Welcom|", "Welco|", "Welc|", "Wel|", "We|", "W|", "|"];
    var counter = 0;
    var elem = document.getElementById("changeText");
    setInterval(change, 250);
    function change() {
     elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { /* counter = 0;*/ }
    }


    </script>
&#13;
&#13;
&#13;

现在,您将获得结果,表明它未定义&#39;。显然不是你想要的。停止此操作的正确方法是取消动画结束时的间隔。

&#13;
&#13;
 <div id="changeText"></div>
    <script type="text/javascript">
    var text = ["|", "W|", "We|", "Wel|", "Welc|", "Welco|", "Welcom|", "Welcome|", "Welcome |", "Welcome t|", "Welcome to|", "Welcome to |", "Welcome to K|", "Welcome to Ka|", "Welcome to Kar|", "Welcome to Karl|", "Welcome to Karla|", "Welcome to Karla'|", "Welcome to Karla's|", "Welcome to Karla's |", "Welcome to Karla's T|", "Welcome to Karla's Tr|", "Welcome to Karla's Tra|", "Welcome to Karla's Trad|", "Welcome to Karla's Tradi|", "Welcome to Karla's Tradin|", "Welcome to Karla's Trading|", "Welcome to Karla's Trading", "Welcome to Karla's Trading|", "Welcome to Karla's Tradin|", "Welcome to Karla's Tradi|", "Welcome to Karla's Trad|", "Welcome to Karla's Tra|", "Welcome to Karla's Tr|", "Welcome to Karla's T|", "Welcome to Karla's |", "Welcome to Karla's|", "Welcome to Karla'|", "Welcome to Karla|", "Welcome to Karl|", "Welcome to Kar|", "Welcome to Ka|", "Welcome to K|", "Welcome to |", "Welcome t|", "Welcome |", "Welcome|", "Welcom|", "Welco|", "Welc|", "Wel|", "We|", "W|", "|"];
    var counter = 0;
    var elem = document.getElementById("changeText");
    var animation = setInterval(change, 250);
    function change() {
     elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { 
              clearInterval(animation); // stop the animation
           }
    }


    </script>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

在此版本中,change仅在text中仍有剩余元素时再次调用。

<div id="changeText"></div>
<script type="text/javascript">
    var text = ["|", "W|", "We|", "Wel|", "Welc|", "Welco|", "Welcom|", "Welcome|", "Welcome |", "Welcome t|", "Welcome to|", "Welcome to |", "Welcome to K|", "Welcome to Ka|", "Welcome to Kar|", "Welcome to Karl|", "Welcome to Karla|", "Welcome to Karla'|", "Welcome to Karla's|", "Welcome to Karla's |", "Welcome to Karla's T|", "Welcome to Karla's Tr|", "Welcome to Karla's Tra|", "Welcome to Karla's Trad|", "Welcome to Karla's Tradi|", "Welcome to Karla's Tradin|", "Welcome to Karla's Trading|", "Welcome to Karla's Trading", "Welcome to Karla's Trading|", "Welcome to Karla's Tradin|", "Welcome to Karla's Tradi|", "Welcome to Karla's Trad|", "Welcome to Karla's Tra|", "Welcome to Karla's Tr|", "Welcome to Karla's T|", "Welcome to Karla's |", "Welcome to Karla's|", "Welcome to Karla'|", "Welcome to Karla|", "Welcome to Karl|", "Welcome to Kar|", "Welcome to Ka|", "Welcome to K|", "Welcome to |", "Welcome t|", "Welcome |", "Welcome|", "Welcom|", "Welco|", "Welc|", "Wel|", "We|", "W|", "|"];
    var counter = 0;
    var elem = document.getElementById("changeText");
    function change() {
        elem.innerHTML = text[counter];
        counter++;
        if (counter < text.length) {
            setTimeout(change, 250);
        }
    }
    change();
</script>

顺便说一句,这是一种避免必须输入"W|""We|"等方法并使代码更具可重用性的方法:

<div id="changeText"></div>
<script type="text/javascript">
    function animate(elem, text) {
        var counter = 0;
        function change() {
            var length = counter;
            if (length > text.length) {
                length = 2 * text.length - counter;
            }
            elem.innerHTML = text.substring(0, length) + "|";
            counter++;
            if (counter <= 2 * text.length) {
                setTimeout(change, 250);
            }
        }
        change();
    }
    animate(document.getElementById("changeText"), "Welcome to Karla's Trading");
</script>

答案 2 :(得分:0)

完成后只需要清除 setInterval

&#13;
&#13;
<div id="changeText"></div>
<script type="text/javascript">
  var text = ["|", "W|", "We|", "Wel|", "Welc|", "Welco|", "Welcom|", "Welcome|", "Welcome |", "Welcome t|", "Welcome to|", "Welcome to |", "Welcome to K|", "Welcome to Ka|", "Welcome to Kar|", "Welcome to Karl|", "Welcome to Karla|", "Welcome to Karla'|", "Welcome to Karla's|", "Welcome to Karla's |", "Welcome to Karla's T|", "Welcome to Karla's Tr|", "Welcome to Karla's Tra|", "Welcome to Karla's Trad|", "Welcome to Karla's Tradi|", "Welcome to Karla's Tradin|", "Welcome to Karla's Trading|", "Welcome to Karla's Trading", "Welcome to Karla's Trading|", "Welcome to Karla's Tradin|", "Welcome to Karla's Tradi|", "Welcome to Karla's Trad|", "Welcome to Karla's Tra|", "Welcome to Karla's Tr|", "Welcome to Karla's T|", "Welcome to Karla's |", "Welcome to Karla's|", "Welcome to Karla'|", "Welcome to Karla|", "Welcome to Karl|", "Welcome to Kar|", "Welcome to Ka|", "Welcome to K|", "Welcome to |", "Welcome t|", "Welcome |", "Welcome|", "Welcom|", "Welco|", "Welc|", "Wel|", "We|", "W|", "|"];
  var counter = 0;
  var elem = document.getElementById("changeText");
  var setInt = setInterval(change, 250);

  function change() {
    elem.innerHTML = text[counter];
    counter++;
    console.log('c:'+counter +'t:'+text.length);
    if (counter == text.length) {
      console.log('clear');
      clearInterval(setInt);
    }
  }
</script>
&#13;
&#13;
&#13;