Question

我想一个接一个地显示5到10条短信，每条短信应该出现在彩虹色效果的同一个div中，代码如下。一次只能出现一条消息。

<!-- Add the below code 
where you wish the text to appear on the page: -->

<b>
<font size="5">
<script>

// ********** MAKE YOUR CHANGES HERE

var text="RAINBOW TEXT"     //   YOUR TEXT
var speed=80    //   SPEED OF FADE -     

// ********** LEAVE THE NEXT BIT ALONE!

// **** Do Not Alter Code Below ****
if (document.all||document.getElementById){
    document.write('<span id="highlight">' + text + '</span>')
    var storetext=document.getElementById?document.getElementById("highlight"):document.all.highlight
}
else
    document.write(text)

var hex=new     Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1

function changetext(){
    rainbow="#"+hex[r]+hex[g]+hex[b]
    storetext.style.color=rainbow
}

function change(){
    if (seq==6){
        b--

        if (b==0)
            seq=1
    }

    if (seq==5){
        r++

        if (r==12)
            seq=6
    }

    if (seq==4){
        g--

        if (g==0)
            seq=5
    }

    if (seq==3){
        b++

        if (b==12)
            seq=4
    }

    if (seq==2){
        r--

        if (r==0)
            seq=3
    }

    if (seq==1){
        g++

        if (g==12)
            seq=2
    }

    changetext()
}

function starteffect(){
    if (document.all||document.getElementById)
        flash=setInterval("change()",speed)
}

starteffect()
</script>
</font>
</b>

Answer 1

你可能会尝试这些方面：如果你希望你的单词一次出现一个，在给定的频率，你可以开始使用

setInterval(callback, timer)

这将允许您每隔X秒调用“外观功能”。

回调函数将是向容器添加单词的函数。你可以去寻找类似的东西：

myContainer.innerHTML += '<span class="word">' + randomWord +'</span>';

如果你的单词来自一个准备好的单词列表，你可以走这个列表，每次运行一个时间间隔一步：

 var list = ["hello", "my", "name", "is", "Robert"];
 var current = 0;
 setInterval(function() {
     myContainer.innerHTML += '<span class="word">' + list[current] +'</span>';
     current++;
 }, 1000);

不要忘记添加有关颜色变化的功能。您可以计算新的RGB代码，并将其添加为我们添加到容器的每个<span>标记的样式。另一种解决方案，如果你不打算像你一样强制使用一组颜色，可以考虑这个Leaflet.Deflate，这很好地解释了如何使用纯CSS +实现彩虹效果它会自动扩展颜色区域在容器中添加更多单词。不幸的是，你不可能每个单词总是只有一种颜色。

然后，请务必在到达阵列末尾时立即停止间隔：

 var list = ["hello", "my", "name", "is", "Robert"];
 var current = 0;
 var itv = setInterval(function() {
     myContainer.innerHTML += '<span class="word">' + list[current] +'</span>';
     current++;
     if (current >= list.length) {
         clearInterval(itv);
     }
 }, 1000);

请务必查看blog article，这对于网络开发人员来说非常完整且非常酷;）

如何在以下JavaScript中添加多条短信

1 个答案: