如何在即時消息應用程序中爲不同用戶分配不同顏色的對話泡泡

Question

如果您正在開發允許羣聊（允許3人以上）的即時消息應用程序，並且每個對話泡泡需要具有不同的顏色，你會這樣做嗎？是否有特定的邏輯可用於根據用戶ID或會話ID來更改特定的CSS語音氣泡類？比如說，如果讓我們說每個ID的最後一個數字範圍是0-9和10個不同顏色的CSS語音氣泡類都放在同一個CSS文件中，那麼這樣的事情是可行的嗎？我確實認識到，如果兩位或更多用戶的數字相同，這種邏輯就會有缺陷。有更簡單和更智能的方法嗎？就像給第一個用戶分配一個不同的令牌一樣，然後是第二個用戶，等等。有什麼可以用CSS選擇器完成的嗎？我很好奇如何解決這個任務！非常感謝您的意見/答覆！

Answer 1

<script> 
window.setInterval(function(){ 
    var initialowner = $(".currentonlineuser").html(); 
    var container = $(".chatbox").html(); 
    if(container.length){ 
     $('.chatboxmessage .chatboxmessagefrom').each(function(){ 
      var df = $(this).html(); 
      var origin = $(this); 
      var chatowner = df.slice(0, -1); 
      if(chatowner == initialowner){ 
       origin.next().css('box-sizing', 'border-box').css('position', 'relative').css('background', '#95c2fd').css('background-image', '-webkit-gradient(linear, left bottom, left top, color-stop(0.15, #bee2ff), color-stop(1, #95c2fd))').css('background-image', '-webkit-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%)').css('background-image', '-moz-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%)').css('background-image', '-ms-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%)').css('background-image', '-o-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%)').css('background-image', 'linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%)').css('border', 'solid 1px rgba(0,0,0,0.5)').css('-webkit-border-radius', '3px').css('-moz-border-radius', '3px').css('border-radius', '3px').css('-webkit-box-shadow', 'inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2)').css('-moz-box-shadow', 'inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2)').css('box-shadow', 'inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2)').css('margin-bottom', '5px').css('padding', '3px 3px').css('color', '#000').css('text-shadow', '0 1px 1px rgba(255,255,255,0.8)').css('word-wrap', 'break-word').css('z-index', '1'); 
      } 
      else{ 
       origin.next().css('box-sizing', 'border-box').css('position', 'relative').css('background', '#7acd47').css('background-image', '-webkit-gradient(linear,left bottom,left top,color-stop(0.15, #ace44b),color-stop(1, #7acd47))').css('background-image', '-webkit-linear-gradient(bottom, #ace44b 15%, #7acd47 100%)').css('background-image', '-moz-linear-gradient(bottom, #ace44b 15%, #7acd47 100%)').css('background-image', '-ms-linear-gradient(bottom, #ace44b 15%, #7acd47 100%)').css('background-image', '-o-linear-gradient(bottom, #ace44b 15%, #7acd47 100%)').css('background-image', 'linear-gradient(bottom, #ace44b 15%, #7acd47 100%)').css('border', 'solid 1px rgba(0,0,0,0.5)').css('-webkit-border-radius', '3px').css('-moz-border-radius', '3px').css('border-radius', '3px').css('-webkit-box-shadow', 'inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2)').css('-moz-box-shadow', 'inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2)').css('box-shadow', 'inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2)').css('margin-bottom', '5px').css('padding', '3px 3px').css('color', '#000').css('text-shadow', '0 1px 1px rgba(255,255,255,0.8)').css('word-wrap', 'break-word').css('z-index', '1'); 
      } 
     }); 
    } 
    else{ 
     alert("not found"); 
    } 
}, 100); 

使用此代碼，它將幫助，它爲我工作。