JavaScript realizes hexadecimal color mixing function, weight value of color difference, replace, parseInt, slice, round, toString

---

the code

/**
 * 两种颜色混合后的值
 * @param {string} color1 颜色1
 * @param {string} color2 颜色2
 * @param {number} weight 权重
 * @return {string} blendedColor 最终结果
 */
function blendColors(color1, color2, weight) {
    
    
    // 解析颜色字符串为RGB值
    function parseColor(color) {
    
    
        const hex = color.replace(/^#/, '');
        const r = parseInt(hex.slice(0, 2), 16);
        const g = parseInt(hex.slice(2, 4), 16);
        const b = parseInt(hex.slice(4, 6), 16);

        return {
    
     r, g, b };
    }

    const color1RGB = parseColor(color1);
    const color2RGB = parseColor(color2);

    // 计算混合后的RGB值
    const blendedR = Math.round((1 - weight) * color1RGB.r + weight * color2RGB.r);
    const blendedG = Math.round((1 - weight) * color1RGB.g + weight * color2RGB.g);
    const blendedB = Math.round((1 - weight) * color1RGB.b + weight * color2RGB.b);

    // 将RGB值转换为十六进制颜色字符串
    function componentToHex(c) {
    
    
        const hex = c.toString(16);

        return hex.length === 1 ? '0' + hex : hex;
    }

    return `#${
      
      componentToHex(blendedR)}${
      
      componentToHex(blendedG)}${
      
      componentToHex(blendedB)}`;
}

console.log(blendColors('ffffff', 'ff0000', 0.7));
// #ff4d4d

---

replace

w3school

replacemethod searches a string for a value or a regular expression.
replacemethod returns a new string with the value replaced.
replacemethod does not change the original string.
If you replace a value, only the first instance will be replaced. To replace all instances, use ga regular expression with modifier sets.

---

MDN

replaceThe method returns a new string with replacementsome or all patternmatches of the pattern ( ) replaced by the replacement value ( ). The pattern can be a string or a regular expression, and the replacement value can be a string or a callback function to be called for each match. If patterna string, only the first occurrence is replaced.

---

parseInt

MDN

parseInt(string, radix)Parses a string and returns a decimal integer in the specified radix, radixwhich is 2-36an integer between, representing the radix of the string being parsed.
string
The value to be parsed. If the argument is not a string, it is converted to a string (using the ToString abstract operation). Whitespace at the beginning of the string will be ignored.
radixOptional Integer
from 2to 36, representing the base of the base. For example, specifying 16that the parsed value is a hexadecimal number. Will return if outside of this range NaN. If specified 0or not specified, the radix will be inferred from the value of the string. =The extrapolated result will not always be the default 10! The description at the end of the article explains radixthe specific behavior of the function when the parameter is not passed.

w3school

parseInt()The function parses the string and returns an integer.
radixThe parameter is used to specify which number system to use, e.g. radix is 16​​(hexadecimal) to indicate that the numbers in the string should be parsed from hexadecimal to decimal.
If radixthe argument is omitted, JavaScriptthe following is assumed:
if the string begins "0x"with , the radix is 16​​(hexadecimal)
If the string "0"starts with , the radix is 8​​(octal). This attribute is deprecated.
If the string starts with any other value, the base is 10(decimal)
Only returns the first number in the string!
Leading and trailing spaces are allowed.
parseInt()Returns if the first character cannot be converted to a number NaN.
== Older browsers will result parseInt("010")in , because 8older versions use an octal radix as the default when the string starts with . From start, the default is base-decimal .ECMAScriptECMAScript5"0"8ECMAScript510

---

slice

w3school

sliceThe method returns the selected elements in the array with a new array object.
slicemethod selects startelements starting at and ending at, but not including, the given endargument.
slicemethod does not alter the original array.

---

MDN

sliceThe method returns a new array object, which is a shallow copy of the original array determined by and, inclusive start, excluding , where and represent the index of the array element. The original array will not be changed.endstartendstart end

---

round

w3school

round()method rounds a number to the nearest integer.
Note: 2.49will be rounded down ( 2), and 2.5will be rounded up ( 3).
Remarks
For 0.5, the method will round up.
For example, 3.5rounds to 4and -3.5rounds to -3.

---

MDN

Math.round()The function returns a number rounded to the nearest integer.

---

w3school

toString()method returns the object as a string. Return
if the method cannot return a string . Always return the object constructor. method does not change the original object.toString()"[object Object]"
Object.toString()
toString()
Every JavaScriptobject has toString()methods. methods are used internally
when an object needs to be displayed as text (as in HTML) or when an object needs to be used as a string . Normally, you wouldn't use it in your own code.JavaScripttoString()

---

MDN

toString()method returns a string representing the object. This method is intended to override (customize) the logic of type conversions for derived class objects .