代码
/**
* 两种颜色混合后的值
* @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
replace
方法在字符串中搜索值或正则表达式。
replace
方法返回已替换值的新字符串。
replace
方法不会更改原始字符串。
如果您替换值,则只会替换第一个实例。如需替换所有实例,请使用带有g
修饰符集的正则表达式。
MDN
replace
方法返回一个由替换值(replacement
)替换部分或所有的模式(pattern
)匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式,替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern
是字符串,则仅替换第一个匹配项。
parseInt
MDN
parseInt(string, radix)
解析一个字符串并返回指定基数的十进制整数,radix
是2-36
之间的整数,表示被解析字符串的基数。
string
要被解析的值。如果参数不是一个字符串,则将其转换为字符串(使用ToString抽象操作)。字符串开头的空白符将会被忽略。
radix
可选
从2
到36
的整数,表示进制的基数。例如指定16
表示被解析值是十六进制数。如果超出这个范围,将返回NaN
。假如指定0
或未指定,基数将会根据字符串的值进行推算。=推算的结果不会永远是默认值10
!文章后面的描述解释了当参数radix
不传时该函数的具体行为。
w3school
parseInt()
函数解析字符串并返回整数。
radix
参数用于指定使用哪种数字系统,例如基数为16
(十六进制)表示字符串中的数字应从十六进制数解析为十进制数。
如果radix
参数被省略,JavaScript
假定如下:
如果字符串以"0x"
开头,则基数为16
(十六进制)
如果字符串以"0"
开头,则基数为8
(八进制)。此特性已弃用
如果字符串以任何其他值开头,则基数为10
(十进制)
只返回字符串中的第一个数字!
允许前导和尾随空格。
如果第一个字符不能转换为数字,parseInt()
返回NaN
。
==旧浏览器将导致parseInt("010")
为8
,因为旧版本的ECMAScript
比ECMAScript5
旧当字符串以"0"
开头时使用八进制基数8
作为默认值。从ECMAScript5
开始,默认值为十进制基数10
。
slice
w3school
slice
方法以新的数组对象,返回数组中被选中的元素。
slice
方法选择从给定的start
参数开始的元素,并在给定的end
参数处结束,但不包括。
slice
方法不会改变原始数组。
MDN
slice
方法返回一个新的数组对象,这一对象是一个由start
和end
决定的原数组的浅拷贝,包括start
,不包括end
,其中start
和end
代表了数组元素的索引。原始数组不会被改变。
round
w3school
round()
方法将数字四舍五入到最接近的整数。
注释:2.49
将向下舍入(2
),而2.5
将向上舍入(3
)。
说明
对于0.5
,该方法将进行上舍入。
例如,3.5
将舍入为4
,而-3.5
将舍入为-3
。
MDN
Math.round()
函数返回一个数字四舍五入后最接近的整数。
toString
w3school
toString()
方法将对象作为字符串返回。
如果toString()
方法不能返回字符串,则返回"[object Object]"
。
Object.toString()
总是返回对象构造函数。
toString()
方法不会更改原始对象。
每个JavaScript
对象都有toString()
方法。
当需要将对象显示为文本(如在HTML
中)或需要将对象用作字符串时,JavaScript
在内部使用toString()
方法。
通常,您不会在自己的代码中使用它。
MDN
toString()
方法返回一个表示该对象的字符串。该方法旨在重写(自定义)派生类对象的类型转换的逻辑。