JS实现的在线调色板实例(附demo源码下载)

2023年6月10日下午7:04 • JavaScript

JS实现的在线调色板实例

本篇文章将向您展示如何使用JavaScript创建一个在线调色板实例。本项目使用HTML、CSS和JS，允许用户通过单击颜色选取器调整颜色，然后显示所选颜色的值。

项目代码

请先下载示例代码，然后跟随我们的指导进行实现：在线调色板实例源代码

实现过程

从Github仓库中下载示例代码。
用您最喜欢的编辑器打开index.html文件。
打开index.html文件，查看HTML代码，您将看到以下内容：

<body>
    <div id="picker"></div>
    <div id="colorValue"></div>
 </body>

这段HTML将创建一个包含调色板和颜色值的div。

接下来，打开style.css文件，查看CSS代码，您将看到以下内容：

#picker{ 
    width: 200px; 
    height: 200px; 
    border-radius: 100%; 
    margin: 10px auto; 
}

此处给调色板设置了圆形边框，颜色值区域稍后添加样式。

现在，打开js/colorPicker.js文件，查看JavaScript代码，您将看到以下内容：

document.addEventListener("DOMContentLoaded", function() {
    const picker = document.getElementById("picker");
    const colorValue = document.getElementById("colorValue");
    picker.addEventListener("click", function() {
        const color = getRandomColor();
        picker.style.backgroundColor = color;
        colorValue.innerHTML = color;
    });
});

function getRandomColor() {
    const letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

JavaScript代码设置了一个侦听器，当用户单击选取器时，将更新div的颜色，并在颜色值区域中显示所选颜色的值。它使用了一个名为getRandomColor的函数，该函数返回一个完全随机的颜色。

示例说明

这是一个可以直接使用的在线调色板实例，当用户单击颜色选取器时，将在颜色值区域中显示所选颜色，并将颜色选择器更改为所选颜色。

下面两个示例展示了如何使用本在线调色板来确定包含背景颜色和文本颜色的元素的最佳颜色组合。

示例1

在此示例中，我们将使用预定义颜色作为背景和文本颜色，以确定从每个背景颜色中选择最佳文本颜色。请操作如下：

在“调色板”中选择喜欢的背景颜色。
按下“确定”，这将给文本添加背景颜色，并根据最佳颜色情况在“颜色值”区域中显示文本颜色。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <title>Color Picker Example</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="picker"></div>
        <div id="colorValue"></div>

        <div id="text" style="padding: 20px; font-size: 24px;">
            Change this text's color
        </div>

        <script src="js/colorPicker.js"></script>

        <script>
            function changeTextColor() {
                const textColor = document.getElementById("colorValue").innerHTML;
                const text = document.getElementById("text");
                text.style.color = textColor;
            }

            const button = document.createElement("button");
            button.innerHTML = "确定";
            button.addEventListener("click", changeTextColor);
            document.body.appendChild(button);
        </script>
    </body>
</html>

示例2

此示例是用jQery框架完成的。

在此示例中，我们使用jQuery对文本和背景颜色应用相同的单值，以创建最佳的颜色组合。请操作如下：

在“调色板”中选择喜欢的背景颜色。
按下“确定”，文本的背景颜色被填充，jQuery更新了文本颜色以创建最佳颜色组合。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <title>Color Picker Example</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="picker"></div>
        <div id="colorValue"></div>

        <div id="text" style="padding: 20px; font-size: 24px;">
            Change this text's color
        </div>

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="js/colorPicker.js"></script>

        <script>
            function changeTextColor() {
                const textColor = document.getElementById("colorValue").innerHTML;
                const backgroundColor = textColor;
                $("#text").css({
                    "background-color": backgroundColor,
                    "color": textColor
                });
            }

            const button = document.createElement("button");
            button.innerHTML = "确定";
            button.addEventListener("click", changeTextColor);
            document.body.appendChild(button);
        </script>
    </body>
</html>

以上两个示例展示了如何使用我们的在线调色板实例。您可以使用自己的编程知识进一步扩展和修改此示例以根据自己的需求进行操作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现的在线调色板实例(附demo源码下载) - Python技术站