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

Question

我发现使用 javascript 闪烁单词的效果非常好，它有随机停顿，脚本在特定短语上停止运行然后再次重新启动。这个效果可以在http://mmmatt.com/about

查看

我查看了该网站的源代码，但我似乎无法让 javascript 在我自己的网站上运行 - 我认为这是因为上面网站上的脚本是通过单击主页上的 link - 我只是希望脚本应用于 <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

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

Rapidly cycling text with javascript and random pauses / timeouts

javascript

text

timeout