php生成PK拾技巧_JavaScript 网页拾色器

文章目录 [+]

下载地址:http://jscolor.com/download.php

安装方法:

php生成PK拾技巧_JavaScript 网页拾色器

1 加载jsColor插件

（图片来自网络侵删）

<script type="text/javascript" src="jscolor/jscolor.js"></script>

2 增加文本表单

<input class="color">

实例1:

<script type="text/javascript" src="jscolor/jscolor.js"></script>Click here: <input class="color" value="66ff00">

实例2:

<script type="text/javascript" src="jscolor/jscolor.js"></script><p> This field can be left empty: <input class="color {required:false}"><p> This field accepts any value: <input class="color {adjust:false}"><p> Hash symbol: <input class="color {hash:true}"><p> Hash symbol, lowercase: <input class="color {hash:true,caps:false}">

实例3:

<script type="text/javascript" src="jscolor/jscolor.js"></script>HSV mode: <input class="color {pickerMode:'HSV'}">HVS mode: <input class="color {pickerMode:'HVS'}">

以上实例均来自:http://jscolor.com/

web端颜色选择器

零依赖、多主题、扁平化的开源Web端颜色选择器。
没有依赖关系，没有jQuery。
与所有CSS框架兼容，例如Bootstrap。
支持alpha channel，rgba，hsla，hsva等等！

https://github.com/Simonwep/pickr

<link rel="stylesheet" href="/pickr/dist/themes/classic.min.css"/><link rel="stylesheet" href="/pickr/dist/themes/monolith.min.css"/><link rel="stylesheet" href="/pickr/dist/themes/nano.min.css"/><script src="/pickr/dist/pickr.min.js"></script><script src="/pickr/dist/pickr.es5.min.js"></script>const pickr = Pickr.create({el: '.color-picker',theme: 'classic',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)',],components: {// 紧张组件preview: true,opacity: true,hue: true,// 输入输出配置interaction: {hex: true,rgba: true,hsla: true,hsva: true,cmyk: true,input: true,clear: true,save: true}}});//保存当前颜色并在回车时关闭弹出窗口pickr.on('init', instance => {// 获取实际输入元素const {result} = instance.getRoot().interaction;// 监听所有键盘事宜result.addEventListener('keydown', e => {// 检测用户在键盘上按了“回车”键if (e.key === 'Enter') {instance.applyColor(); // 保存当前选定的颜色instance.hide(); // 隐蔽}}, {capture: true});});