blocks|key|1938281|text|这样如何：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1938282|​|1938283|var+hexValue+=+"aaaaaa";
hexValue+=+(parseInt(hexValue,+16)+%2B+0x010101).toString(16);
document.writeln(hexValue);+//+outputs+'ababab'|code-block|syntax|javascript|1938284|1938285|如果使用parseInt，则不需要添加0x前缀。|1938286|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>How about this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var hexValue = "aaaaaa";
hexValue = (parseInt(hexValue, 16) + 0x010101).toString(16);
document.writeln(hexValue); // outputs 'ababab'</code></pre>
</div>
</div>
</p>

<p>There is no need to add the 0x prefix if you use parseInt.</p>


blocks|key|1938350|text|不，没有办法告诉JavaScript语言在默认情况下使用十六进制整数格式而不是十进制。您的代码尽可能简洁，但请注意，当您将"parseInt“与基址一起使用时，您不需要在"0x”基址指示器之前添加。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1938351|以下是我将如何处理您的问题：|1938352|function+addHexColor(c1,+c2)+{
++var+hexStr+=+(parseInt(c1,+16)+%2B+parseInt(c2,+16)).toString(16);
++while+(hexStr.length+<+6)+{+hexStr+=+'0'+%2B+hexStr;+}+//+Zero+pad.
++return+hexStr;
}

addHexColor('aaaaaa',+'010101');+//+=>+'ababab'
addHexColor('010101',+'010101');+//+=>+'020202'|code-block|syntax|javascript|1938353|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>No, there is no way to tell the JavaScript language to use hex integer format instead of decimal by default.  Your code is about as concise as it gets but note that you do not need to prepend the "0x" base indicator when you use "parseInt" with a base.</p>

<p>Here is how I would approach your problem:</p>

<pre class="lang-javascript prettyprint-override"><code>function addHexColor(c1, c2) {
  var hexStr = (parseInt(c1, 16) + parseInt(c2, 16)).toString(16);
  while (hexStr.length &lt; 6) { hexStr = '0' + hexStr; } // Zero pad.
  return hexStr;
}

addHexColor('aaaaaa', '010101'); // =&gt; 'ababab'
addHexColor('010101', '010101'); // =&gt; '020202'
</code></pre>


blocks|key|1938413|text|我认为公认的答案是错误的。十六进制的颜色表示不是线性的。而是给予R、G和B+3组两个字符。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1938414|因此，你不能简单地添加一个整数，然后期望RGB正确地相加。|1938415|For+Example

n1+=+'005500';+<---+green
n2+=+'00ff00';+<---+brighter+green|code-block|syntax|javascript|1938416|将这些数字相加应该会得到更绿色的结果。在任何情况下，添加绿色都不应该增加红色。但是按照公认的答案去做，就像把整数当做一个数字一样，然后你可以继续处理大于f的数字，f%2B1+=+10。|1938417|you+get+`015400`+so+by+adding+greens+the+RED+increased+....+WRONG|1938418|将005500+%2B+00ff00相加应该会得到，=+00ff00。你不能将更多的绿色添加到最大绿色。|1938419|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I think accepted answer is wrong. Hexadecimal color representation is not a linear. But instead, 3 sets of two characters are given to R, G &amp; B.</p>

<p>So you can't just add a whole number and expect to RGB to add up correctly. </p>

<pre><code>For Example

n1 = '005500'; &lt;--- green
n2 = '00ff00'; &lt;--- brighter green
</code></pre>

<p>Adding these numbers should result in a greener green. 
In no way, adding greens should increase RED to increase. but by doing what accepted answer is doing, as in just treat whole number as one number then you'd carry over for numbers adding upto greater than f, f+1 = 10.</p>

<pre><code>you get `015400` so by adding greens the RED increased .... WRONG
</code></pre>

<p>adding 005500 + 00ff00 should result in, = 00ff00. You can't add more green to max green.</p>


blocks|key|1725069|text|对于正在寻找一个可以在不超出单个元组界限的情况下进行十六进制颜色相加和相减的函数的人来说，我几分钟前编写了这个函数来做这件事：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1725070|export+function+shiftColor(base,+change,+direction)+{
++const+colorRegEx+=+/%5E\#?[A-Fa-f0-9]{6}$/;

++//+Missing+parameter(s)
++if+(!base+%7C%7C+!change)+{
++++return+'000000';
++}

++//+Invalid+parameter(s)
++if+(!base.match(colorRegEx)+%7C%7C+!change.match(colorRegEx))+{
++++return+'000000';
++}

++//+Remove+any+'#'s
++base+=+base.replace(/\#/g,+'');
++change+=+change.replace(/\#/g,+'');

++//+Build+new+color
++let+newColor+=+'';
++for+(let+i+=+0;+i+<+3;+i%2B%2B)+{
++++const+basePiece+=+parseInt(base.substring(i+*+2,+i+*+2+%2B+2),+16);
++++const+changePiece+=+parseInt(change.substring(i+*+2,+i+*+2+%2B+2),+16);
++++let+newPiece+=+'';

++++if+(direction+===+'add')+{
++++++newPiece+=+(basePiece+%2B+changePiece);
++++++newPiece+=+newPiece+>+255+?+255+:+newPiece;
++++}
++++if+(direction+===+'sub')+{
++++++newPiece+=+(basePiece+-+changePiece);
++++++newPiece+=+newPiece+<+0+?+0+:+newPiece;
++++}

++++newPiece+=+newPiece.toString(16);
++++newPiece+=+newPiece.length+<+2+?+'0'+%2B+newPiece+:+newPiece;
++++newColor+%2B=+newPiece;
++}

++return+newColor;
}|code-block|syntax|javascript|1725071|您可以将您的基色作为参数1传递，您的更改作为参数2传递，然后'add‘或'sub’作为最后一个参数，这取决于您的意图。|1725072|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>For folks looking for a function that can add and subtract HEX colors without going out of bounds on an individual tuple, I wrote this function a few minutes ago to do just that:</p>

<pre><code>export function shiftColor(base, change, direction) {
  const colorRegEx = /^\#?[A-Fa-f0-9]{6}$/;

  // Missing parameter(s)
  if (!base || !change) {
    return '000000';
  }

  // Invalid parameter(s)
  if (!base.match(colorRegEx) || !change.match(colorRegEx)) {
    return '000000';
  }

  // Remove any '#'s
  base = base.replace(/\#/g, '');
  change = change.replace(/\#/g, '');

  // Build new color
  let newColor = '';
  for (let i = 0; i &lt; 3; i++) {
    const basePiece = parseInt(base.substring(i * 2, i * 2 + 2), 16);
    const changePiece = parseInt(change.substring(i * 2, i * 2 + 2), 16);
    let newPiece = '';

    if (direction === 'add') {
      newPiece = (basePiece + changePiece);
      newPiece = newPiece &gt; 255 ? 255 : newPiece;
    }
    if (direction === 'sub') {
      newPiece = (basePiece - changePiece);
      newPiece = newPiece &lt; 0 ? 0 : newPiece;
    }

    newPiece = newPiece.toString(16);
    newPiece = newPiece.length &lt; 2 ? '0' + newPiece : newPiece;
    newColor += newPiece;
  }

  return newColor;
}
</code></pre>

<p>You pass your base color as parameter 1, your change as parameter 2, and then 'add' or 'sub' as the last parameter depending on your intent.</p>


<p>I have some code which takes strings representing hexadecimal numbers - hex colors, actually - and adds them. For example, adding <code>aaaaaa</code> and <code>010101</code> gives the output <code>ababab</code>.<br>
However, my method seems unnecessarily long and complicated:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var hexValue = "aaaaaa";
hexValue = "0x" + hexValue;
hexValue = parseInt(hexValue, 16);
hexValue = hexValue + 0x010101;
hexValue = hexValue.toString(16);
document.write(hexValue); // outputs 'ababab'</code></pre>
</div>
</div>
</p>
<p>The hex value is still a string after concatenating <code>0x</code>, so then I have to change it to a number, <em>then</em> I can add, and then I have to change it <em>back</em> into hex format! There are even more steps if the number I'm adding to it is a hexadecimal string to begin with, or if you take into consideration that I am removing the <code>#</code> from the hex color before all this starts.</p>
<p>Surely there's a simpler way to do such simple hexadecimal calculations! And just to be clear, I don't mean just putting it all on one line like <code>(parseInt(&quot;0x&quot;+&quot;aaaaaa&quot;,16)+0x010101).toString(16)</code> or using shorthand - I mean actually doing less operations.</p>
<p>Is there some way to get javascript to stop using decimal for all of its mathematical operations and use hex instead? Or is there some other method of making JS work with hex more easily?</p>


Working with hex strings and hex values more easily in Javascript

我有一些代码，它接受表示十六进制数字的字符串-实际上是十六进制颜色-并将它们相加。例如，将aaaaaa和010101相加得到输出ababab。然而，我的方法似乎不必要地冗长和复杂：​var hexValue = "aaaaaa";hexValue = "0x" + hexValue;hexValue = parseIn...

问在Javascript中更轻松地处理十六进制字符串和十六进制值
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Javascript中更轻松地处理十六进制字符串和十六进制值EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Javascript中更轻松地处理十六进制字符串和十六进制值
EN