Question

所以我想创建一个标签

，该文本使用javascript从左向右移动。但是有时移动文本需要花费更长的时间当我刷新页面时，它没有在我期望的时间运行

My css code
#bao{
            margin:0 auto;
            width:600px;
            min-height:100px;
        }
        #bao p{
            text-align:center;
        }
My html code
<div id="bao">
        <p id="a">
            Chúc mừng sinh nhật
        </p>
    </div>
My javascript code
abc();
        function abc(){
            var a = document.getElementById('a').innerHTML;
            var c =a;
            var b = c.slice(c.length-1,c.length)+ c.slice(0,c.length-1);
            document.getElementById('a').innerHTML=b;
            setTimeout(abc,200);
        }

所以我预计文本将继续运行，但延迟时间为200毫秒，但有时运行时间会更长

Answer 1

这种缓慢的行为主要可以通过文本字符串中的空格来解释。这些空格的处理速度与所有其他字符相同，但是当它们位于实际字符串的前面或后面时，它们是不可见的。

要解决此问题，我replace()-用可见的空白（ -d替换空白，现在整个过程似乎运行得更加顺利。

我还介绍了一些其他更改：

我只能从DOM中读取一次文本字符串
trim()多余的空格（末尾加一个）和
加倍。
然后我display()从稳定增加的起始位置（c.substr((i++)%l,l)开始）
display()然后在200毫秒的间隔后再次调用自身。

修改

我刚刚从@ user202729的小提琴中注意到，您想将文本向右移动。对于这个方向，起始位置需要使用c.substr(l+(i--)%l,l) 减小，如下所示：

function display(){
 a.innerHTML=c.substr(l+(i--)%l,l).replace(/ /g,'&nbsp;');
 setTimeout(display,200)
}

var i=0, a = document.getElementById('a');
var c = a.innerHTML.trim()+' ', l=c.length; c=c+c;
display()

#bao{
            margin:0 auto;
            width:600px;
            min-height:100px;
        }
        #bao p{
            text-align:center;
        }

<div id="bao">
  <p id="a">
            Chúc mừng sinh nhật.
  </p>
</div>

我在JavaScript上移动文字时遇到问题

1 个答案: