练习-原生js写的颜色选择器colorpicker

最新推荐文章于 2024-06-11 11:20:34 发布

阿门阿前下的蜗牛

最新推荐文章于 2024-06-11 11:20:34 发布

阅读量1.9k

点赞数 1

分类专栏：前端练习

本文链接：https://blog.csdn.net/Fky_mie/article/details/116800228

版权

本文档详细介绍了如何使用原生JavaScript编写两种颜色选择器：点击色块选择和拖拽色带选择。文章涵盖了需求分析、功能实现，包括HSL与RGB之间的转换，并展示了如何通过ES6和面向对象的思想来完善功能，如点击和拖拽选择颜色，以及通过拖动明暗带改变颜色明暗。

摘要由CSDN通过智能技术生成

colorpicker

文章目录

colorpicker

需求分析:

以下四种方案, 前三种为点击色块选择颜色, 第四种为滑动/拖拽选颜色, 所以分为两种实现类型-色块或者色带, 做出两种colorpicker.

第一种方案的颜色选择器: 点击色块选择颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一种方法:点击方块选择颜色</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        
        #colorpicker {
    
            width: 230px;
            height: 350px;
            margin: auto;
            padding: 2px;
            background-color: #f1f1f1;
            border: 1px solid black;
            text-align: center;
        }
        
        .color_container {
    
            display: flex;
            width: 220px;
            height: 210px;
            margin: 5px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            background-color: #cec7c7;
        }
        
        .rgb_value {
    
            margin: 10px;
        }
        
        .rgb_value input {
    
            display: inline-block;
            width: 70px;
        }
    </style>
</head>

<body>
    <div id="colorpicker">
        无颜色
        <div class="color_container"></div>
        <div class="rgb_value">
            RGB值为 <input type="text" value="">
        </div>
    </div>
    <script>
        let colorpicker = document.getElementById('colorpicker');
        let color_container = document.querySelector('.color_container');
        /* 创建颜色代码数组 */
        // 因为找不到这个案例的颜色变化的规律, 所以用了笨方法, 写死了颜色数组
        let color_array = [
            "#ffffff", "#e5e4e4", "#d9d8d8", "#c0bdbd", "#a7a4a4", "#8e8a8b", "#827e7f", "#767173", "#5c585a", "#000000",
            "#fefcdf", "#fef4c4", "#feed9b", "#fee573", "#ffed43", "#f6cc0b", "#f6cc0b", "#c9a601", "#ad8e00", "#8c7301",
            "#ffded3", "#ffc4b0", "#ff9d7d", "#ff7a4e", "#ff6600", "#e95d00", "#d15502", "#ba4b01", "#a44201", "#8d3901",
            "#ffd2d0", "#ffbab7", "#fe9a95", "#ff7a73", "#ff483f", "#fe2419", "#f10b00", "#d40a00", "#940000", "#6d201b",
            "#ffdaed", "#ffb7dc", "#ffa1d1", "#ff84c3", "#ff57ac", "#fd1289", "#ec0078", "#d6006d", "#bb005f", "#9b014f",
            "#fcd6fe",

最低0.47元/天解锁文章

阿门阿前下的蜗牛

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
练习-原生js写的颜色选择器colorpicker

colorpicker需求分析:以下四种方案, 前三种为点击色块选择颜色, 第四种为滑动/拖拽选颜色, 所以分为两种实现类型-色块或者色带, 做出两种colorpicker.第一种方案的颜色选择器: 点击色块选择颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="
复制链接

扫一扫

专栏目录