Question

我在CodePen上发现了这个脚本，它允许你模拟来自Stranger Things的光墙，目前你必须手动输入一条消息让灯点亮，我想知道如何制作它以便你可以输入一个脚本中的预定义消息，并使用计时器循环它。

// Using jQuery because I'm lazy
var str = "Hello";
var lights = {

  // Set up event listeners for keyboard keys
  init: function() {

    // Use pre-defined message
    for (var i = 0, len = str.length; i < len; i++) {
      var el = $('#item--'+str[i]);
      setTimeout(function () {
        lights.blink(el);
      }, 3000);
    }

    // Every time a key is pressed...
    $(document).keypress(function(e){
      // ... get its value
      // and find the matching DOM element, if any...
      var ch = String.fromCharCode(e.charCode),
          el = $('#item--'+ch);
      // ... then send it to the 'blink' function
      lights.blink(el);
      // If user hits enter, flash everything randomly
      // Kinda crappy effect, I know
      if (e.which === 13) {
        lights.random();
      }
    });

    // Lights also respond to being clicked
    $('.item').on('click',function(e){
      lights.blink($(this));
    });
  },

  // Turn a single bulb on and off
  blink: function(el){
    var bulb = el.find('.bulb');
    bulb.addClass('lit');
    setTimeout(function(){
      bulb.removeClass('lit');
    },600);
  },

  // Flash lights randomly
  random: function(){
    (function(count){
      if (count < 36) {
        var caller = arguments.callee;
        window.setTimeout(function() {
          var rand = Math.floor(Math.random() * 26) + 1;
          var el = $('.item').eq(rand);
          var el2 = $('.item').eq(rand*2);
          lights.blink(el);
          lights.blink(el2);
          $('html').toggleClass('flicker');
          caller(count + 1);
        }, Math.floor(Math.random() * 100));
      }
    })(0)
  }
}

$(function(){
  lights.init();
})

Answer 1

这是一个工作示例。我已经删除了按键事件，以防止在预定义的事件上键入消息。你总是可以把它放回去。

首先让我们讨论一下代码尝试的问题。您在timeOut循环内调用for，这实际上会产生一个问题，即您立即触发所有这些超时请求。你必须一个接一个地做一个计时器请求。

在我的代码中，我使用setInterval大约每秒运行一次定义的函数。该函数使下一个字符闪烁，找出它对应的页面上的哪个元素然后调用该元素上的闪烁函数（页面上的字母）。最后，我做了一个简单的边界检查以循环回到第一个字母。

另外需要注意的是，您的HTML元素都是使用小写标识符（item--h而非item--H）定义的，因此此解决方案仅适用于预定义的字符串，包含小写字母。我将此作为练习来确定如何校正大写以及检测非字母字符（空格，数字等）并跳过它们。

// Using jQuery because I'm lazy
var str = "hello";
var strCounter = 0;
var lights = {

  // Set up event listeners for keyboard keys
  init: function() {

    // Use pre-defined message
    setInterval(function() {
      console.log('Blinking: ' + str[strCounter]);
      var ch = str[strCounter];
      var el = $('#item--'+ch);
      // ... then send it to the 'blink' function
      lights.blink(el);

      // next character in the message and bounds check
      strCounter += 1;
      if (strCounter >= str.length) {
        strCounter = 0;
      }
    }, 1000);

    // ALL CODE BELOW IS UNCHANGED AND KEYPRESS FUNCTION IS REMOVED

    // Lights also respond to being clicked
    $('.item').on('click',function(e){
      lights.blink($(this));
    });
  },

  // Turn a single bulb on and off
  blink: function(el){
    console.log(el);
    var bulb = el.find('.bulb');
    bulb.addClass('lit');
    setTimeout(function(){
      bulb.removeClass('lit');
    },600);
  },

  // Flash lights randomly
  random: function(){
    (function(count){
      if (count < 36) {
        var caller = arguments.callee;
        window.setTimeout(function() {
          var rand = Math.floor(Math.random() * 26) + 1;
          var el = $('.item').eq(rand);
          var el2 = $('.item').eq(rand*2);
          lights.blink(el);
          lights.blink(el2);
          $('html').toggleClass('flicker');
          caller(count + 1);
        }, Math.floor(Math.random() * 100));
      }
    })(0)
  }
}

$(function(){
  lights.init();
})

将脚本从手动文本输入转换为预定义消息

1 个答案: