Question

我知道如何以新闻打字器的形式展示特征(在出现延误的时候),但我似乎可以说明如何显示<><>><>> 倍> 新闻项目。例如:

I have an array of strings.
I d like to loop through each item in the array, and...
and for each item (i.e. each string of text) in the array, I would then like to
loop through EACH CHARACTER in that string and...
display the character on screen in 70ms intervals (using setTimeout).
Once I ve reached the last character in that string, I want to jump back to the previous loop (see #2) to continue at an interval of 1 sec. (again using setTimeout).

以下是我为解决这一问题所作的卑鄙尝试。我可以坐在每一处方位,迄今为止,我只是ole。标识。人数似乎表明,第4至第6步是怎样的。

有些人对此做了一些说明。

感谢:

<body>

<p class="theText">This is test 1 of the text.</p>
<p class="theText">This is test 2 of the text.</p>
<p class="theText">This is test 3 of the text.</p>
<div id="textScroller"></div>

<script type="text/javascript">

var textScroller = function(scrollContainer){
    var container = document.getElementById(scrollContainer);
    var nodeContainer = document.getElementsByClassName( theText );

    // this function gets only the nodeValues from the nodeContainer array
    // and puts them in an array called textArray
    var getTextArray = function makeTextArray(theNodeArray){
        var textArray = [];
        for(var i=0;i<nodeContainer.length;i++){
            var container_text = nodeContainer[i].firstChild.nodeValue;
            textArray.push(container_text);
        }   
        return textArray;   
    };


    var textArray = getTextArray();

    /* 
        Right now the "showText" function just logs the string of text to the console.
        But the function SHOULD 
            [a] loop through each character in the CURRENT string and 
            [b] display the current character 
            [c] check if there are more characters and, if so...
            [d] display the next character in 70 milliseconds (i.e. setTimeout or setInterval)
            [e] if no more characters, go back to the function (loopArray) and get the next string
    */
    function showText(theString){
        console.log(theString);
    }

    // loop through and process each item in the array
    var l = 0;
    function loopArray(){
        var thisString = textArray[l];
        showText(thisString);
        if(l < textArray.length -1){
            setTimeout(loopArray,1000);
        }
        l++;        
    }       

    setTimeout(loopArray,1000);
}

textScroller( textScroller );           
</script>

</body>

Answer 1

你不需要多处休息室,你只需要记住,如果你在结束发言之后转向下一个项目,那么你在目前这个阵列项目上又要回头来。引言如下:

var loopForever = false,
    itemIndex = 0,
    charIndex = 0;

function loopArray(){
   var currentItem = textArray[itemIndex];
   if (charIndex >= currentItem.length) {
      // move on to next item
      if (++itemIndex >= textArray.length) {
         // if looping forever go back to start of the item array,
         // otherwise return (in which case no new timeout will be set).
         if (loopForever)
            itemIndex = 0;
         else
            return;
      }
      charIndex = 0;
   }
   showText(currentItem.charAt(charIndex));
   // if at the end of the current item then delay 1000ms, otherwise 70ms
   setTimeout(loopArray, ++charIndex === currentItem.length ? 1000 : 70); 
}

setTimeout(loopArray,1000);

以上假设是,你的其他法典成功地建立了<代码>text Array,作为你想要展示的一系列指示(例如,在你的例子<代码>上,Array>。这是对文本的测试1,即“......”文本的测试2,即文本的测试3]。

友情链接