2016-11-08 38 views
0

我想要一個接一個地顯示5至10條短信,每條短信都應該出現在具有彩虹色效果的同一個div中,代碼如下所示。一次只能顯示一條消息。如何在以下JavaScript中添加多條短信

<!-- 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> 
+0

所以你從某處複製了一些代碼,但不明白它並要求我們修復它?這不是StackOverflow的工作原理。你需要能夠編程。然後在這裏提出具體問題。不要要求我們做你的工作。 – Robert

回答

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>標籤。另一種解決方案,如果你不打算像你一樣強制設置一組顏色,可以考慮這個blog article,它很好地解釋瞭如何用純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); 

一定要檢查the Mozilla documentation這是非常完整的,很酷爲Web開發;)

相關問題