javascript - 页面刷新时字段值变大

Question

所以在 Firefox 中，当我刷新时 this页 HEX 值不断增加。像这样

如您所见，这不是正确的 HEX。它只发生在 Firefox 中，当您仅 刷新时。不输入 URL 并按回车键。这是代码。我是将代码放入字段的位置。

console.log("Here are all the colors that have been generated since you loaded the     page. \nAnd ignore any warnings, thats normal.");
var r = $(".r");
var g = $(".g");
var b = $(".b");
r.val(r.val() + "255");
g.val(g.val() + "255");
b.val(b.val() + "255");

function setColor(color) {
  var blackWhite = parseInt(color, 16) > 0xffffff / 2 ? 'black' : 'white';
  document.body.style.backgroundColor = "#" + color;
  document.body.style.color = blackWhite;
  $('input').css({
    borderColor: blackWhite,
    color: blackWhite
  });
  $('a').css({
    color: blackWhite,
    color: blackWhite
  });


  console.log("#" + color);
  $('.hex').val(color);

  function hex2rgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
  r: parseInt(result[1], 16),
  g: parseInt(result[2], 16),
  b: parseInt(result[3], 16)

    } : null;
  }
  $('.r').val(hex2rgb(color).r);
 $('.g').val(hex2rgb(color).g);
  $('.b').val(hex2rgb(color).b);
}

$(document).ready(function () {
  $(document).keydown(function (e) {
   if (e.keyCode == '32') {
     setColor(Math.random().toString(16).slice(2, 8));
     $(".dir").css("visibility", "hidden");
   }
  });


 $('.hex').keyup(function () {
   setColor($(this).val().replace(/^#+/i, ''));
 });
});

function update() {
  var red = parseInt($(".r").val(), 10);
  var green = parseInt($(".g").val());
  var blue = parseInt($(".b").val());
  red = red || 255;
  green = green || 255;
  blue = blue || 255;
  var rgb = RGB2HTML(red, green, blue);
  $(".hex").val(rgb);
  $("body").css("background", "#" + rgb);
}

function hex(num) {
  var ret = num.toString(16);
  if (ret.length < 2) {
    ret = "0" + ret;
  }
  return ret;
}

function RGB2HTML(red, green, blue) {
  return hex(red) + hex(green) + hex(blue);
}
$(function () {
  $('.r, .g, .b').keyup(update);
  update();
});
$('.newclass').click(function () {
  $('.hex').val('');
  $('.r').val('');
  $('.g').val('');
  $('.b').val('');
  $("body").css("background", "#fff");
  $("body").css("color", "black");
  $(".hex").css("border", "3px solid black");
  $(".hex").css("color", "black");
  $(".r").css("border", "3px solid black");
  $(".r").css("color", "black");
  $(".g").css("border", "3px solid black");
  $(".g").css("color", "black");
  $(".b").css("border", "3px solid black");
  $(".b").css("color", "black");
  $("a").css("color", "black");
});

Answer 1

我已经检查了您的代码并在本地服务器上对其进行了测试。这似乎是 JSBin 的 firefox 错误。它应该在您的网站上运行良好。我在 jsfiddle 上使用了相同的代码，它在 forefox 中运行没有任何问题。

演示 http://jsfiddle.net/T24y2/1/

你为什么要这样做:

r.val(r.val() + "255");
g.val(g.val() + "255");
b.val(b.val() + "255");

而不是这个？ :

r.val("255");
g.val("255");
b.val("255");