快速循環文本與JavaScript和隨機暫停/超時

Question

我遇到了一個非常好的效果，使用JavaScript的隨機暫停腳本停止運行特定的短語，然後再次重新啓動的話語閃爍。這個效果可以在http://mmmatt.com/about

我已經看過這個網站的源代碼，但我似乎無法讓javascript在我自己的網站上工作 - 我想這是因爲上面的網站上的腳本是通過點擊在主頁上的鏈接上 - 我只是希望腳本適用於<h1>元素並開始在文檔加載上運行。我的JavaScript技能非常差，至少可以這麼說，所以任何幫助我允許我修改下面的js和html標記來獲得這個運行，都會受到感謝。

的網站的JS是：

/** 
* Site! 
*/ 
var Site = Site || { }; 

$(function() { 
setTimeout(function() { 
$(document).trigger('Matt'); 
}, 500); 
}); 
/** 
* About 
*/ 
Site.About = function() { 

self = { 

$el : { }, 

data :{ 
    'count' : 0, 
    'loop' : null 
}, 

cycle : function() { 

    clearTimeout(self.data.loop); 
    var shit = Math.floor(Math.random() * self.data.count); 
    var timeout = Math.floor(Math.random() * 100) + 30; 
    var chance = Math.floor(Math.random() * 30); 
    self.$el.doin.find('.active').removeClass('active'); 
    self.$el.doin.find('span').eq(shit).addClass('active'); 

    if (chance == 0) timeout = 1500; 
    self.data.loop = setTimeout(self.cycle, timeout); 

}, 

load : function() { 
    clearTimeout(self.data.loop); 
    setTimeout(function() { 
     self.$el.doin = $('#project .doin'); 
     self.data.count = self.$el.doin.find('span').length; 
     self.cycle(); 
    }, 1000); 
}, 

unload : function() { 
    clearTimeout(self.data.loop); 
} 

}; 

return { 
load : self.load, 
unload : self.unload 
} 

}(); 

的HTML是：

<div id="clone" class="project"></div> 
<div id="project" class="project" data-section="about"> 

<div class="aboutContainer"> 
<div class="doin"> 
    Matthew Miller is<br/> 
       <span class="active">walking in circles</span> 
        <span >trying too hard</span> 
        <span >not trying hard enough</span> 
        <span >dancing</span> 
        <span >making strange noises</span> 
        <span >eating a donut</span> 
        <span >moving extremely fast</span> 
        <span >sitting still</span> 
        <span >making dinner</span> 
        <span >naked</span> 
        <span >making cookies</span> 
        <span >in love</span> 
        <span >doing the same thing</span> 
        <span >disappointed in pablo</span> 
        <span >skateboarding with steven</span> 
        <span >walking millie</span> 
        <span >in his favorite place</span> 
        <span >still alive</span> 
        <span >drinking water</span> 
        <span >running around naked</span> 
        <span >drawing</span> 
        <span >sleeping</span> 
        <span >a doctor</span> 
        <span >telling the truth</span> 

etc.etc。

唯一相關的CSS我能找到的是：

.aboutContainer .doin span { 
display:none 
} 
.aboutContainer .doin span.active { 
display:block 
} 

Answer 1

你可以得到相同的效果用更少的代碼：

function display() { 
    var el= document.querySelectorAll('.doin span'), 
     rnd= Math.floor(Math.random() * el.length-1) + 1, 
     rnd2= Math.round(Math.random()*20); 

    document.querySelector('.doin span.active').className= ''; 
    el[rnd].className= 'active'; 
    if(rnd2===5) { 
    setTimeout(display, 1500); 
    } else { 
    setTimeout(display, 100); 
    } 
} //display 

Fiddle