使用javascript和随机暂停/超时快速循环文本

Question

我发现了一个非常好的效果，可以使用javascript来闪烁单词，该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>

等等

我能找到的唯一相关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