JavaScript implementa la función de diferencia de color hexadecimal, resta de color hexadecimal, reemplazo, parseInt, max, toString, slice


el código

/**
 * 将十六进制颜色转换为RGB格式
 * @param {string} hex 十六进制颜色值
 * @return {string} {r, g, b} 返回最终的rgb值
 */
function hexToRgb(hex) {
    
    
    // 去掉可能的#字符
    hex = hex.replace(/^#/, '');

    // 如果是缩写形式的颜色值(如 #FFF),则将其扩展为完整形式
    if (hex.length === 3) hex = hex.replace(/(.)/g, '$1$1');

    // 解析RGB值
    let bigint = parseInt(hex, 16),
        r = (bigint >> 16) & 255,
        g = (bigint >> 8) & 255,
        b = bigint & 255;

    return {
    
     r, g, b };
}

/**
 * 两种颜色相减后的值
 * @param {string} color1 颜色1(主颜色,一般是大值)
 * @param {string} color2 颜色2
 * @return {object} { hexadecimal, rgb } 返回十六进制和rgb值
 */
function subtractColors(color1, color2) {
    
    
    let rgb1 = hexToRgb(color1),
        rgb2 = hexToRgb(color2),
        r = rgb1.r - rgb2.r,
        g = rgb1.g - rgb2.g,
        b = rgb1.b - rgb2.b,
        reslut = (val) => Math.max(0, val);

    // 将RGB结果转换为十六进制格式
    return {
    
    
        hexadecimal: `#${
      
      (1 << 24 | reslut(r) << 16 | reslut(g) << 8 | reslut(b)).toString(16).slice(1)}`,
        rgb: `${
      
      r}, ${
      
      g}, ${
      
      b}`
    };
}

console.log(subtractColors('ffffff', 'ff0000'));
// {hexadecimal: '#00ffff', rgb: '0, 255, 255'}

reemplazar

w3escuela

replaceEl método busca en una cadena un valor o una expresión regular.
replaceEl método devuelve una nueva cadena con el valor reemplazado.
replaceEl método no cambia la cadena original.
Si reemplaza un valor, solo se reemplazará la primera instancia. Para reemplazar todas las instancias, use guna expresión regular con conjuntos de modificadores.


MDN

replaceEl método devuelve una nueva cadena con replacementalgunas o todas las coincidencias del patrón ( ) reemplazadas por el valor de reemplazo ( ) . patternEl patrón puede ser una cadena o una expresión regular, y el valor de reemplazo puede ser una cadena o una función de devolución de llamada que se llamará para cada coincidencia. Si es patternuna cadena, solo se reemplaza la primera aparición.


parseInt

MDN

parseInt(string, radix)Analiza una cadena y devuelve un número entero decimal en la base especificada, radixque es 2-36un número entero intermedio, que representa la base de la cadena que se está analizando.
string
El valor que se va a analizar. Si el argumento no es una cadena, se convierte en una cadena (mediante la operación abstracta ToString ). Se ignorarán los espacios en blanco al principio de la cadena.
radixOpcional Entero
de 2a 36, que representa la base de la base. Por ejemplo, 16especificar que el valor analizado es un número hexadecimal. Volverá si está fuera de este rango NaN. Si se especifica 0o no, la base se inferirá del valor de la cadena. =¡El resultado extrapolado no siempre será el predeterminado 10! La descripción al final del artículo explica radixel comportamiento específico de la función cuando no se pasa el parámetro.

w3escuela

parseInt()La función analiza la cadena y devuelve un número entero.
radixEl parámetro se usa para especificar qué sistema numérico usar, por ejemplo, la base es 16(hexadecimal) para indicar que los números en la cadena deben analizarse de hexadecimal a decimal.
Si radixse omite el argumento, JavaScriptse supone lo siguiente:
si la cadena comienza "0x"con , la base es 16(hexadecimal)
Si la cadena "0"comienza con , la base es 8(octal). Este atributo está en desuso.
Si la cadena comienza con cualquier otro valor, la base es 10(decimal)
¡Solo devuelve el primer número de la cadena!
Se permiten espacios iniciales y finales.
parseInt()Devuelve si el primer carácter no se puede convertir en un número NaN.
== Los navegadores más antiguos darán parseInt("010")como resultado , porque 8las versiones más antiguas usan una base octal como valor predeterminado cuando la cadena comienza con . Desde el principio, el valor predeterminado es base decimal .ECMAScriptECMAScript5"0"8ECMAScript510


máximo

MDN

Math.max()La función devuelve el número más grande tomado como parámetro de entrada, o -Infinito si no hay ningún parámetro .


W3escuela

max()El método devuelve el número con el valor más alto.
Consejo: El método min() devuelve el número con el valor más pequeño.


w3escuela

toString()El método devuelve el objeto como una cadena. Devuelve
si el método no puede devolver una cadena . Devuelve siempre el constructor del objeto. El método no cambia el objeto original.toString()"[object Object]"
Object.toString()
toString()
Cada JavaScriptobjeto tiene toString()métodos. Los métodos se usan internamente
cuando un objeto debe mostrarse como texto (como en HTML) o cuando un objeto debe usarse como una cadena . Normalmente, no lo usarías en tu propio código.JavaScripttoString()


MDN

toString()El método devuelve una cadena que representa el objeto. Este método está destinado a anular (personalizar) la lógica de conversiones de tipos para objetos de clase derivados .


rebanada

w3escuela

sliceEl método devuelve los elementos seleccionados en la matriz con un nuevo objeto de matriz.
sliceEl método selecciona startelementos que comienzan y terminan en el endargumento dado, pero sin incluirlo.
sliceEl método no altera la matriz original.


MDN

sliceEl método devuelve un nuevo objeto de matriz, que es una copia superficial de la matriz original determinada por y, inclusive start, excluyendo , donde y representa el índice del elemento de la matriz. La matriz original no se cambiará.endstartendstart end

Supongo que te gusta

Origin blog.csdn.net/weixin_51157081/article/details/132639364
Recomendado
Clasificación