前端颜料盘??

前端颜料盘??

一、原生颜料盘

   <input type="color" placeholder="选择颜色">

在这里插入图片描述

二、第三方开源库

Pickr

  • GitHub: https://github.com/Simonwep/pickr
  • 官方网站: https://simonwep.github.io/pickr/
  • Pickr 是一个轻量级的颜色选择器,支持多种颜色格式,并且易于集成到任何项目中。
    <!-- One of the following themes --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css" /><!-- 'classic' theme --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css" /><!-- 'monolith' theme --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css" /><!-- 'nano' theme --><!-- Modern or es5 bundle --><script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script><input type="text" id="color-input" class="layui-input" placeholder="选择颜色"><script>// Simple example, see optional options for more configuration.const pickr = Pickr.create({el: '.color-picker',theme: 'classic', // or 'monolith', or 'nano'swatches: ['rgba(244, 67, 54, 1)','rgba(233, 30, 99, 0.95)','rgba(156, 39, 176, 0.9)','rgba(103, 58, 183, 0.85)','rgba(63, 81, 181, 0.8)','rgba(33, 150, 243, 0.75)','rgba(3, 169, 244, 0.7)','rgba(0, 188, 212, 0.7)','rgba(0, 150, 136, 0.75)','rgba(76, 175, 80, 0.8)','rgba(139, 195, 74, 0.85)','rgba(205, 220, 57, 0.9)','rgba(255, 235, 59, 0.95)','rgba(255, 193, 7, 1)'],components: {// Main componentspreview: true,opacity: true,hue: true,// Input / output Optionsinteraction: {hex: true,rgba: true,hsla: true,hsva: true,cmyk: true,input: true,clear: true,save: true}}});// 监听颜色选择变化pickr.on('change', (color, instance) => {const colorInput = document.getElementById('color-input');// 获取选择的颜色值const selectedColor = color.toHEXA().toString();// 将颜色值赋给输入框colorInput.value = selectedColor;});</script>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/657048.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

20240130 大模型快讯

//社区生态// 讯飞星火大模型v3.5发布。讯飞发布了完全基于全国产算力平台“飞星一号”训练的星火大模型v3.5&#xff0c;同时开源深度适配国产算了的iFlyTekSpark-13B大模型。 Code Llama 70B大模型发布。Meta发布并开源了基于Llama 2的大模型Code Llama 70B&#xff0c;在Hu…

产品说明书怎么做?有模板吗?

产品说明书是一种重要的工具&#xff0c;它向消费者提供有关产品的详细信息和使用指南。一个好的产品说明书不仅可以帮助消费者正确地使用产品&#xff0c;还可以增加产品的销售量和用户满意度。那么&#xff0c;如何制作一份优秀的产品说明书呢&#xff1f;是否有现成的模板可…

ubantu操作hbase

到firefox中按照网站找以下文件进行下载 新建一个窗口启动节点 下载完成则回到下载目录 如果下载慢也可以将文件放在share中&#xff0c;然后拷贝到当前目录 进入到root 然后回到hadoop 解压到/usr/local 进入到local&#xff0c;将hbase改名 修改权限 配置环境变量 执行 回到h…

【小白学unity】上下左右移动+跳跃

1. 找到一个棒棒糖图片&#xff0c;拖入到unity中。 2. 将棒棒糖拖入到场景中&#xff0c;重命名为lolipop。 3. 给lolipop添加一个Rigidbody2D组件。 4. 创建一个C#脚本LolipopController.cs&#xff0c;并将其添加到lolipop游戏对象上。 5. 运行游戏, 棒棒糖由于Rigidbod…

专业120+总分400+宁波大学912信号与系统考研经验电子信息通信集成电路光电

今年考研顺利上岸&#xff0c;专业课912信号与系统120&#xff0c;总分400&#xff0c;被宁波大学录取&#xff0c;回望这一年的复习有过迷茫和犹豫&#xff0c;也有过坚持和坚强&#xff0c;总结一下自己的复习得失&#xff0c;希望对大家复习有所帮助。专业课&#xff1a; 前…

何为蓝海项目?抖音老隋分享的temu项目算吗?

在当今快速发展的商业环境中&#xff0c;蓝海项目成为了人们关注的焦点。那么&#xff0c;究竟什么是蓝海项目?抖音老隋分享的temu项目又是否算得上一个蓝海项目呢?本文将就此进行探讨。 首先&#xff0c;让我们明确什么是蓝海项目 蓝海项目通常指的是那些市场潜力巨大、竞争…

转盘寿司 - 华为OD统一考试

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 寿司店周年庆&#xff0c;正在举办优惠活动回馈新老用户。 寿司转盘上总共有 n 盘寿司&#xff0c; prices[i] 是第 i 盘寿司的价格。 如果客户选择了第 i 盘寿…

pytorch 优化训练显存方式

转载自&#xff08;侵删&#xff09;&#xff1a; https://www.cnblogs.com/chentiao/p/17901639.html 1. 显存都用在哪儿了&#xff1f; 一般在训练神经网络时&#xff0c;显存主要被网络模型和中间变量占用。 网络模型中的卷积层&#xff0c;全连接层和标准化层等的参数占…

R语言【taxlist】——subset():取taxlist对象的子集

Package taxlist version 0.2.4 Description taxlist对象的子集将通过逻辑操作或模式匹配来完成。子集可以引用包含在插槽taxonNames、taxonRelations或taxonTraits中的信息。 Usage ## S4 method for signature taxlist subset(x,subset,slot "names",keep_child…

【游戏服务器部署】幻兽帕鲁服务器一键部署保姆级教程,游戏私服还是自己搭建的香

在帕鲁的世界&#xff0c;你可以选择与神奇的生物「帕鲁」一同享受悠闲的生活&#xff0c;也可以投身于与偷猎者进行生死搏斗的冒险。帕鲁可以进行战斗、繁殖、协助你做农活&#xff0c;也可以为你在工厂工作。你也可以将它们进行售卖&#xff0c;或肢解后食用。—幻兽帕鲁 想要…

ThinkPHP5.0.0~5.0.23反序列化利用链分析

本次测试环境仍然是ThinkPHP v5.0.22版本&#xff0c;我们将分析其中存在的一条序列化链。 一道CTF题 这次以一道CTF题作为此次漏洞研究的开头。题中涉及PHP的死亡绕过技巧&#xff0c;是真实环境中存在的情况。 $payload; $filename$payload.468bc8d30505000a2d7d24702b2cda…

春季选品策略:如何在Shopee平台上脱颖而出

在Shopee平台上进行春季选品时&#xff0c;卖家需要制定有效的策略来吸引消费者的注意并提高销售业绩。本文将介绍一些关键的选品策略&#xff0c;帮助卖家在春季市场中脱颖而出。 先给大家推荐一款shopee知虾数据运营工具知虾免费体验地址&#xff08;复制浏览器打开&#xf…

MyBatis 源码系列:MyBatis 解析配置文件、二级缓存、SQL

文章目录 解析全局配置文件二级缓存解析解析二级缓存缓存中的调用过程缓存中使用的设计模式 解析SQL 解析全局配置文件 启动流程分析 String resource "mybatis-config.xml"; //将XML配置文件构建为Configuration配置类 reader Resources.getResourceAsReader(re…

探索ESP32 C++ OOP开发:与传统面向过程编程的比较

探索ESP32 OOP开发&#xff1a;与传统面向过程编程的比较 在嵌入式系统开发中&#xff0c;ESP32是一个强大的平台&#xff0c;可以应用于各种项目和应用场景。在编写ESP32代码时&#xff0c;我们可以选择使用面向对象编程&#xff08;OOP&#xff09;的方法&#xff0c;将代码…

数据结构—栈实现前缀表达式的计算

前缀表达式计算 过程分析 中缀表达式&#xff1a;&#xff08;1 5&#xff09;*3 > 前缀表达式&#xff1a;*153 &#xff08;可参考这篇文章&#xff1a;中缀转前缀&#xff09; 第一步&#xff1a;从右至左扫描前缀表达式&#xff08;已存放在字符数组中&#xff09;&a…

termux 玩法(一)

termux基础 termux基础玩法推荐国光写的手册&#xff1a;Termux 高级终端安装使用配置教程 | 国光 (sqlsec.com) termux安装 个人使用F-Droid安装的termux&#xff1a;Termux | F-Droid - Free and Open Source Android App Repository 基础知识 这些基础知识简单了解一下…

自定义模块加载(Python)

加载自定义模块&#xff0c;系统抛出“找不到文件”异常提示信息。 (笔记模板由python脚本于2024年01月28日 12:50:00创建&#xff0c;本篇笔记适合初通Python的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免…

LeetCode316. Remove Duplicate Letters——单调栈

文章目录 一、题目二、题解 一、题目 Given a string s, remove duplicate letters so that every letter appears once and only once. You must make sure your result is the smallest in lexicographical order among all possible results. Example 1: Input: s “bca…

盲人程序员是怎么编程的?闭眼编程

解决 读代码&#xff0c;读键盘变成听。 盲人程序员可以借助屏幕阅读器来使用计算机&#xff0c;绝大多数编程工具也可以正常访问&#xff0c;所以&#xff0c;盲人掌握编程语言是没有问题的。 具体的工作流程如下&#xff1a; 使用屏幕阅读器来“阅读”屏幕上的文本和代码。…

链表——超详细

一、无头单向非循环链表 1.结构&#xff08;两个部分&#xff09;&#xff1a; typedef int SLTDataType; typedef struct SListNode {SLTDataType data;//数据域struct SListNode* next;//指针域 }SLNode; 它只有一个数字域和一个指针域&#xff0c;里面数据域就是所存放的…