更改颜色亮度

JavaScriptJavaScriptBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索如何使用 JavaScript 更改 hsl() 颜色字符串的亮度。通过利用字符串操作、数组方法和数学函数,我们将学习如何修改亮度值,同时确保其保持在 0100 的有效范围内。在开发需要根据用户交互进行动态颜色操作的 Web 应用程序时,这项技能会派上用场。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("`Template Literals`") subgraph Lab Skills javascript/variables -.-> lab-28193{{"`更改颜色亮度`"}} javascript/data_types -.-> lab-28193{{"`更改颜色亮度`"}} javascript/arith_ops -.-> lab-28193{{"`更改颜色亮度`"}} javascript/comp_ops -.-> lab-28193{{"`更改颜色亮度`"}} javascript/higher_funcs -.-> lab-28193{{"`更改颜色亮度`"}} javascript/template_lit -.-> lab-28193{{"`更改颜色亮度`"}} end

如何更改 HSL 颜色的亮度

要更改 hsl() 颜色字符串的亮度值,请执行以下步骤:

  1. 打开终端/SSH 并输入 node 以开始练习编码。

  2. 使用 String.prototype.match() 获取一个包含三个字符串的数组,这些字符串来自 hsl() 字符串中的数值。

  3. 结合使用 Array.prototype.map()Number 将字符串转换为数值数组。

  4. 使用 Math.max()Math.min() 确保亮度值落在有效范围内(介于 0100 之间)。

  5. 使用模板字面量创建一个新的 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 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程