如何將字體顏色更改為此代碼中的特定行？

Question

當然，必須有一種方法可以為下面顯示 m.codeletters = "&# +%?£@§$";的代碼中的行添加一些顏色。 等等？ 我想把顏色改成：**"&# +%?£@§$"**

var Messenger = function(el){
  'use strict';
  var m = this;
  
  m.init = function(){
    m.codeletters = "&#*+%?£@§$";
    m.message = 0;
    m.current_length = 0;
    m.fadeBuffer = false;
    m.messages = [
       'readers',
      'via feed',
      '👽'
    ];
    
    setTimeout(m.animateIn, 100);
  };
  
  m.generateRandomString = function(length){
    var random_text = '';
    while(random_text.length < length){
      random_text += m.codeletters.charAt(Math.floor(Math.random()*m.codeletters.length));
    } 
    
    return random_text;
  };
  
  m.animateIn = function(){
    if(m.current_length < m.messages[m.message].length){
      m.current_length = m.current_length + 2;
      if(m.current_length > m.messages[m.message].length) {
        m.current_length = m.messages[m.message].length;
      }
      
      var message = m.generateRandomString(m.current_length);
      $(el).html(message);
      
      setTimeout(m.animateIn, 20);
    } else { 
      setTimeout(m.animateFadeBuffer, 20);
    }
  };
  
  m.animateFadeBuffer = function(){
    if(m.fadeBuffer === false){
      m.fadeBuffer = [];
      for(var i = 0; i < m.messages[m.message].length; i++){
        m.fadeBuffer.push({c: (Math.floor(Math.random()*12))+1, l: m.messages[m.message].charAt(i)});
      }
    }
    
    var do_cycles = false;
    var message = ''; 
    
    for(var i = 0; i < m.fadeBuffer.length; i++){
      var fader = m.fadeBuffer[i];
      if(fader.c > 0){
        do_cycles = true;
        fader.c--;
        message += m.codeletters.charAt(Math.floor(Math.random()*m.codeletters.length));
      } else {
        message += fader.l;
      }
    }
    
    $(el).html(message);
    
    if(do_cycles === true){
      setTimeout(m.animateFadeBuffer, 20);
    } else {
      setTimeout(m.cycleText, 2000);
    }
  };
  
  m.cycleText = function(){
    m.message = m.message + 1;
    if(m.message >= m.messages.length){
      m.message = 0;
    }
    
    m.current_length = 0;
    m.fadeBuffer = false;
    $(el).html('');
    
    setTimeout(m.animateIn, 200);
  };
  
  m.init();
}

console.clear();
var messenger = new Messenger($('#messenger'));

我上下看了一遍，試圖看看我可以在代碼中的哪個位置執行此操作。 我也想知道我需要添加什么才能做到這一點。 我根本不知道。 我見過其他類似的代碼，其中代碼字母區域是彩色的，然后文本的其余部分是另一種顏色。

Answer 1

如果您嘗試為控制台輸出着色，您將使用類似於\ ANSI 轉義序列，您可以在這篇 SO post 中了解更多信息。 酒店還設有稱為NPM模塊的顏色，極大地簡化實施的過程當中。

如果您嘗試為 HTML 輸出着色，您只需將每個字符包裝在一個單獨的<span>元素中，並為所需的顏色添加具有 CSS 樣式的 class 或 style 屬性。