简介
在本实验中,我们将探索如何使用 JavaScript 更改 hsl()
颜色字符串的亮度。通过利用字符串操作、数组方法和数学函数,我们将学习如何修改亮度值,同时确保其保持在 0
到 100
的有效范围内。在开发需要根据用户交互进行动态颜色操作的 Web 应用程序时,这项技能会派上用场。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将探索如何使用 JavaScript 更改 hsl()
颜色字符串的亮度。通过利用字符串操作、数组方法和数学函数,我们将学习如何修改亮度值,同时确保其保持在 0
到 100
的有效范围内。在开发需要根据用户交互进行动态颜色操作的 Web 应用程序时,这项技能会派上用场。
要更改 hsl()
颜色字符串的亮度值,请执行以下步骤:
打开终端/SSH 并输入 node
以开始练习编码。
使用 String.prototype.match()
获取一个包含三个字符串的数组,这些字符串来自 hsl()
字符串中的数值。
结合使用 Array.prototype.map()
和 Number
将字符串转换为数值数组。
使用 Math.max()
和 Math.min()
确保亮度值落在有效范围内(介于 0
和 100
之间)。
使用模板字面量创建一个新的 hsl()
字符串,其中包含更新后的亮度值。
以下是实现这些步骤的示例代码片段:
const changeLightness = (delta, hslStr) => {
const [hue, saturation, lightness] = hslStr.match(/\d+/g).map(Number);
const newLightness = Math.max(
0,
Math.min(100, lightness + parseFloat(delta))
);
return `hsl(${hue}, ${saturation}%, ${newLightness}%)`;
};
然后,你可以使用一个增量值和一个 hsl()
字符串调用 changeLightness()
函数,以获取一个包含更新后亮度值的新 hsl()
字符串。例如:
changeLightness(10, "hsl(330, 50%, 50%)"); // 'hsl(330, 50%, 60%)'
changeLightness(-10, "hsl(330, 50%, 50%)"); // 'hsl(330, 50%, 40%)'
恭喜你!你已经完成了“更改颜色亮度”实验。你可以在 LabEx 中练习更多实验来提升你的技能。