2013-04-06 3 views
1

Я сделал JSFiddle преобразования HEX в RGB, но мне интересно, как я могу сделать это по-другому (RGB to HEX).RGB to HEX Conversion JavaScript

$('#hex').bind('blur keydown', function (event) { 
    setTimeout(function() { 
    var rgb = [], 
     broken = false, 
     value = $("#hex").val(), 
     hex = (value+'').replace(/#/, ''); 

    if (value.length === 1 && value !== '#') { 
     $("#hex").val(value); 
    } 

    if (hex.length == 3) hex = hex + hex; 
    for (var i = 0; i < 6; i+=2) { 
     rgb.push(parseInt(hex.substr(i,2),16)); 
     broken = broken || rgb[rgb.length - 1].toString() === 'NaN'; 
    } 

    $('#rgb').val(broken ? '' : 'rgb(' + rgb.join(',') + ')'); 
    }, 13); 
}); 

'#hex' и '#rgb' только входы:

<input type="text" id="hex" placeholder="hex"> 
<input type="text" id="rgb" placeholder="rgb"> 

Here's the JSFiddle.

Я также задаюсь вопросом, почему, если я должен был заменить broken с false, я получаю сообщение об ошибке. Вы знаете, почему я не могу удалить var broken = false и просто заменить на false?

+3

Примечание: Ваша логика в настоящее время не так. '# abc' не' # abcabc', а '# aabbcc'. – Zeta

+0

О, не так ли? Как я могу это исправить? К сожалению, я новичок в JavaScript. – user2203362

+2

см. Http://stackoverflow.com/q/5623838/989121 – georg

ответ

0

Вот код, который будет конвертировать RGB в HEX:

$(function(){ 
    var $hex = $('#hex'); 
    $('#rgb').on('keyup blur', function() { 
    var value = this.value, 
     rgb, 
     hex = '', 
     component, 
     i; 
    try { 
     if(value && value.indexOf('rgb(') === 0 && value[value.length-1] === ')') { 
     rgb = value.slice(4,-1).split(','); 
     if(rgb.length === 3) { 
      for(i=0;i<3;i++) { 
      if(rgb[i] <= 0xFF) { 
       component = parseInt(rgb[i],10); 
       if(isNaN(component)) { 
       throw new SyntaxError(); 
       } 
       component = component.toString(16); 
       if(component.length === 1) { 
       component = '0'+component; 
       } 
       hex += component; 
      } else { 
       throw new RangeError(); 
      } 
      } 
      $hex.val('#'+hex); 
     } else { 
      throw new SyntaxError(); 
     } 
     } 
    } catch(e) { 
     $hex.val(''); 
    } 
    }); 
}); 

здесь работает пример http://jsbin.com/amisen/3/edit

+0

Он отлично работает, спасибо! Знаете ли вы, что проблема с моим HEX для RGB? По-видимому, логика ошибочна. – user2203362

+0

@ user2203362 Вы должны заменить 'if (hex.length == 3) hex = hex + hex;' с 'if (hex.length === 3) hex = hex [0] + hex [0] + hex [1 ] + hex [1] + hex [2] + hex [2]; ' – Vadim

+0

А, я вижу. Хорошо, спасибо! – user2203362