我有这个代码用于逐个显示这些字母和单词,但我的问题是代码仍在重复,有人可以帮助我知道如何阻止它吗?
<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>
答案 0 :(得分:4)
它会重复,因为你将计数器设置为0.看看当我发表评论时会发生什么。
<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;
现在,您将获得结果,表明它未定义&#39;。显然不是你想要的。停止此操作的正确方法是取消动画结束时的间隔。
<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;
答案 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 :
<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;