效果圖：

實現(xiàn)思路：

首先規(guī)定好顯示字?jǐn)?shù)的速度即settimeout執(zhí)行間隔用來控制每個字之間輸出速度。再把判斷段落的總字?jǐn)?shù)，循環(huán)段落總字?jǐn)?shù)來實現(xiàn)一個字一個字的輸出。

js代碼：

    


        


            


                


                

            

            


                

                    var theNewsNum;
                

            

        

        


            


                


                

            

            


                

                    var theAddNum;
                

            

        

        


            


                


                

            

            


                

                    var totalNum;
                

            

        

        


            


                


                

            

            


                

                    var CurrentPosion=0;
                

            

        

        


            


                


                

            

            


                

                    var theCurrentNews;
                

            

        

        


            


                


                

            

            


                

                    var theCurrentLength;
                

            

        

        


            


                


                

            

            


                

                    var theNewsText;
                

            

        

        


            


                


                

            

            


                

                    var theTargetLink;
                

            

        

        


            


                


                

            

            


                

                    var theCharacterTimeout;
                

            

        

        


            


                


                

            

            


                

                    var theNewsTimeout;
                

            

        

        


            


                


                

            

            


                

                    var theBrowserVersion;
                

            

        

        


            


                


                

            

            


                

                    var theWidgetOne;
                

            

        

        


            


                


                

            

            


                

                    var theWidgetTwo;
                

            

        

        


            


                


                

            

            


                

                    var theSpaceFiller;
                

            

        

        


            


                


                

            

            


                

                    var theLeadString;
                

            

        

        


            


                


                

            

            


                

                    var theNewsState;
                

            

        

        


            


                


                

            

            


                

                    function startTicker(){
                

            

        

        


            


                


                

            

            


                

                    // ------ 設(shè)置初始數(shù)值
                

            

        

        


            


                


                

            

            


                

                    theCharacterTimeout = 50;//字符間隔時間
                

            

        

        


            


                


                

            

            


                

                    theNewsTimeout = 2000;//新聞間隔時間
                

            

        

        


            


                


                

            

            


                

                    theWidgetOne = "_";//新聞前面下標(biāo)符1
                

            

        

        


            


                


                

            

            


                

                    theWidgetTwo = "-";//新聞前面下標(biāo)符
                

            

        

        


            


                


                

            

            


                

                    theNewsState = 1;
                

            

        

        


            


                


                

            

            


                

                    theNewsNum = document.getElementById("incoming").children.AllNews.children.length;//新聞總條數(shù)
                

            

        

        


            


                


                

            

            


                

                    theAddNum = document.getElementById("incoming").children.AddNews.children.length;//補(bǔ)充條數(shù)
                

            

        

        


            


                


                

            

            


                

                    totalNum =theNewsNum+theAddNum;
                

            

        

        


            


                


                

            

            


                

                    theCurrentNews = 0;
                

            

        

        


            


                


                

            

            


                

                    theCurrentLength = 0;
                

            

        

        


            


                


                

            

            


                

                    theLeadString = " ";
                

            

        

        


            


                


                

            

            


                

                    theSpaceFiller = " ";
                

            

        

        


            


                


                

            

            


                

                    runTheTicker();
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    // --- 基礎(chǔ)函數(shù)
                

            

        

        


            


                


                

            

            


                

                    function runTheTicker(){
                

            

        

        


            


                


                

            

            


                

                    if(theNewsState == 1){
                

            

        

        


            


                


                

            

            


                

                    if(CurrentPosion<theNewsNum){
                

            

        

        


            


                


                

            

            


                

                    setupNextNews();
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    else{
                

            

        

        


            


                


                

            

            


                

                    setupAddNews();
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    CurrentPosion++;
                

            

        

        


            


                


                

            

            


                

                    if(CurrentPosion>=totalNum||CurrentPosion>=1){
                

            

        

        


            


                


                

            

            


                

                    CurrentPosion=0;//最多條數(shù)不超過num_gun條
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    if(theCurrentLength != theNewsText.length){
                

            

        

        


            


                


                

            

            


                

                    drawNews();
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    else{
                

            

        

        


            


                


                

            

            


                

                    closeOutNews();
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    // --- 跳轉(zhuǎn)下一條新聞
                

            

        

        


            


                


                

            

            


                

                    function setupNextNews(){
                

            

        

        


            


                


                

            

            


                

                    theNewsState = 0;
                

            

        

        


            


                


                

            

            


                

                    theCurrentNews = theCurrentNews % theNewsNum;
                

            

        

        


            


                


                

            

            


                

                    theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
                

            

        

        


            


                


                

            

            


                

                    theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;
                

            

        

        


            


                


                

            

            


                

                    theCurrentLength = 0;
                

            

        

        


            


                


                

            

            


                

                    document.all.hottext.href = theTargetLink;
                

            

        

        


            


                


                

            

            


                

                    theCurrentNews++;
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    function setupAddNews() {
                

            

        

        


            


                


                

            

            


                

                    theNewsState = 0;
                

            

        

        


            


                


                

            

            


                

                    theCurrentNews = theCurrentNews % theAddNum;
                

            

        

        


            


                


                

            

            


                

                    theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
                

            

        

        


            


                


                

            

            


                

                    theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;
                

            

        

        


            


                


                

            

            


                

                    theCurrentLength = 0;
                

            

        

        


            


                


                

            

            


                

                    document.all.hottext.href = theTargetLink;
                

            

        

        


            


                


                

            

            


                

                    theCurrentNews++;
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    // --- 滾動新聞
                

            

        

        


            


                


                

            

            


                

                    function drawNews(){
                

            

        

        


            


                


                

            

            


                

                    var myWidget;
                

            

        

        


            


                


                

            

            


                

                    if((theCurrentLength % 2) == 1){
                

            

        

        


            


                


                

            

            


                

                    myWidget = theWidgetOne;
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    else{
                

            

        

        


            


                


                

            

            


                

                    myWidget = theWidgetTwo;
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    document.all.hottext.innerHTML = theLeadString + theNewsText.substring(0,theCurrentLength) + myWidget + theSpaceFiller;
                

            

        

        


            


                


                

            

            


                

                    theCurrentLength++;
                

            

        

        


            


                


                

            

            


                

                    setTimeout("runTheTicker()", theCharacterTimeout);
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    // --- 結(jié)束新聞循環(huán)
                

            

        

        


            


                


                

            

            


                

                    function closeOutNews(){
                

            

        

        


            


                


                

            

            


                

                    document.all.hottext.innerHTML = theLeadString + theNewsText + theSpaceFiller;
                

            

        

        


            


                


                

            

            


                

                    theNewsState = 1;
                

            

        

        


            


                


                

            

            


                

                    setTimeout("runTheTicker()", theNewsTimeout);
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    window.onload=startTicker;