1

HEX から RGB への変換の JSFiddle を作成しましたが、別の方法 (RGB から HEX) を行うにはどうすればよいか疑問に思っています。

$('#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">

これがJSFiddleです。

brokenに置き換えた場合、なぜfalseエラーが発生するのかも疑問に思っています。なぜ私が削除できずvar broken = false、単に に置き換えることができないのか知っていますfalseか?

4

1 に答える 1

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

于 2013-04-06T13:22:05.293 に答える