文件结构展示

文件结构目录

  • color-index.js
  • config.js
  • color - picker-index.js

上传太多代码不是很好看，,我上传的都不收费， 完整代码包点击下载如不能下载请联系
使用案例展示,组件是原生js构成，支持vue，react等等使用场景，案例为react使用

import React, { useEffect } from 'react';
import '@/compontent/comm/color/index.css';
import { init } from '@/compontent/comm/color/index.js';const colorOption = {change: function (item, type, param) {//颜色选择器选项值发生变更触发-存在多个地方引用，通过id判断引用目标console.log(item, param);}
};
function Home() {useEffect(() => {// 支持多个位置使用组件，需要传入目标id，const param1 = {id: 'color-picker-open',mode: 'click',position: 'right'};const param2 = {id: 'color-picker-open1',position: 'right'};init(param1, colorOption);init(param2);}, []);return (<div className="home"><div className="ui-color-cancel" id="color-picker-2"><span className="ui-color-cancel">点击2</span><span className="ui-color-cancel">颜色</span></div>第二个使用位置<div className="ui-color-cancel" id="color-picker-open"><span className="ui-color-cancel">点击</span><span className="ui-color-cancel">颜色</span></div></div>);
}
export default Home;

color-index.js

import { init as pickerInit, $ } from './picker/index';
import { panelColor, standardColor, commColor } from './config.js';
let outside = false; //点击范围判断
let hoverSide = false; // 移入范围判断
let targetParam; // 目标id
const colorId = 'ui-color'; //组件id
const pickercOpenId = 'ui-color-more-open'; // 开启取色器的目标
let initDB = false; // 是否初始化
let cancelClassName = 'luckysheet-mousedown-cancel';
let colorOption; // 外部监听对象
let pickercOption = {}; // 取色器监听对象
const htmlText = `<div class="ui-color-contents ${cancelClassName}"><div class="ui-color-none ${cancelClassName}">无填充</div><div class="ui-color-panel ${cancelClassName}"></div><p class="ui-color-tip ${cancelClassName}">标准色</p><div class="ui-color-standard ${cancelClassName}"></div><p class="ui-color-tip ${cancelClassName}">常用</p><div class="ui-color-common ${cancelClassName}"></div></div><div id="ui-color-more-open" class="ui-color-more ${cancelClassName}"><div class="ui-color-more-left ${cancelClassName}"><i class="${cancelClassName}"></i><span class="${cancelClassName}">更多颜色</span></div><i class="iconfont icon-caret-right ${cancelClassName}"></i></div>`;
// 常用颜色获取
function commColorCheck() {let list = localStorage.getItem('commColor');if (list) list = JSON.parse(list);if (list && list.length > 0) {setCommColorFn(list);} else {localStorage.setItem('commColor', JSON.stringify(commColor));}
}
export function init(value, param) {targetParam = value;let dom;let target = $(`#${targetParam.id}`);if (initDB) {commColorCheck();dom = $(`#${colorId}`);} else {colorOption = param;initDB = true;dom = document.createElement('div');dom.id = colorId;dom.className = `ui-color ${cancelClassName}`;dom.setAttribute('seleced', '');dom.innerHTML = htmlText;window.addEventListener('mouseup', onSpaceFn);document.body.appendChild(dom);dom.onmousedown = () => {outside = true;};// 无色选项绑定事件dom.children[0].children[0].onclick = () => {change('transparent', 1, param);};updatePanel();updateStandard();updateCommon();pickercOption = {confirm: function (item, type) {colorOption.colorChange(item, type, targetParam);const uiColor = $(`#${colorId}`);uiColor.seleced = item;uiColor.style.display = 'none';},hoverHide: function () {hoverHide();}};pickerInit({ id: pickercOpenId, mode: 'hover' }, pickercOption);}if (!target) return;dom.style.cssText = `display: none;left: ${target.offsetLeft}px;top: ${target.offsetTop + target.clientHeight}px`;if (targetParam.mode === 'hover') {target.onmouseenter = () => {hoverVisible(value);};target.onmouseleave = e => {setTimeout(() => {hoverHide(value, e);});};dom.onmouseenter = () => {hoverSide = true;};dom.onmouseleave = () => {hoverSide = false;hoverHide();};} else {target.addEventListener('click', () => {changeHide(value);});}
}/******** @Author: 刘强* @description: 颜色选择* @param {*} item:选中的色值* @param {*} type:选择的类型 0常用，1无填充，2取色器，3标准，4面板**/
function change(item, type) {const uiColor = $('#ui-color');uiColor.seleced = item;uiColor.style.display = 'none';if (type > 2) commCheck(item);colorOption.colorChange(item, type, targetParam);
}
// 目标点击显示/隐藏
function changeHide(value = targetParam) {if (value.mode === 'hover') return;targetParam = value;let dom = $(`#${colorId}`);let visible = dom.style.display;dom.style.display = visible === 'none' ? 'block' : 'none';if (visible === 'none') opsitionFn();
}
// hover模式显示
function hoverVisible(value = targetParam) {if (value.mode === 'click') return;targetParam = value;let dom = $(`#${colorId}`);dom.style.display = 'block';opsitionFn();
}
//hover模式隐藏
function hoverHide(value = targetParam) {if (value.mode === 'click') return;if (!hoverSide) {let dom = $(`#${colorId}`);dom.style.display = 'none';}
}
// 点击空白判断
function onSpaceFn(e) {if (e.target.classList.contains(cancelClassName)) return;if (outside) {outside = false;} else {let dom = $('#ui-color');if (dom.style.display === 'block') changeHide();}
}
// 常用颜色变化
function commCheck(item) {let target = -1;for (let i = 0; i < commColor.length; i++) {if (commColor[i] === item) {target = i;break;}}if (target === -1) {commColor.unshift(item);commColor.pop();} else {commColor.splice(target, 1, commColor[0]);commColor.splice(0, 1, item);}updateCommon();
}
// render列
function renderTd(arr, type) {return arr.map(item => {let dom = document.createElement('span');dom.onclick = () => {change(item, type);};dom.className = 'ui-color-td';dom.style.cssText = `background:${item}`;return dom;});
}
// 更新panel
export function updatePanel() {let dom = $('#ui-color').children[0].children[1];dom.innerHTML = '';for (let i = 0; i < panelColor.length; i++) {let domtr = document.createElement('div');domtr.className = 'ui-color-tr';const domtd = renderTd(panelColor[i], 3);for (let j = 0; j < domtd.length; j++) {domtr.appendChild(domtd[j]);}dom.appendChild(domtr);}
}
// 更新标准色
export function updateStandard(index = -1, value = '') {if (index !== -1) {standardColor[index] = value;}let dom = $('#ui-color').children[0].children[3];dom.innerHTML = '';const listDom = renderTd(standardColor, 2);for (let i = 0; i < listDom.length; i++) {dom.appendChild(listDom[i]);}
}
// 更新常用
export function updateCommon(index = -1, value = '') {if (index !== -1) {commColor[index] = value;}let dom = $('#ui-color').children[0].children[5];dom.innerHTML = '';const listDom = renderTd(commColor, 0);for (let i = 0; i < listDom.length; i++) {dom.appendChild(listDom[i]);}//if (localStorage) localStorage.setItem('commColor', JSON.stringify(commColor));
}
// 打开时自动调整位置
function opsitionFn() {const dom = $(`#${colorId}`);const target = $(`#${targetParam.id}`);const targetClient = target.getBoundingClientRect();const leftNum = 2,topNum = 2; // 间隙let left = 0,top = 0;// right模式switch (targetParam.position) {case undefined:case 'rightBottom':left = targetClient.left + leftNum;top = targetClient.top + target.clientHeight;// 判断右边是否被遮挡-是否需要改为左边模式if (left + dom.clientWidth > window.innerWidth) {left = targetClient.right - dom.clientWidth;}// 判断底部是否被遮挡if (top + dom.clientHeight > window.innerHeight) {let newTop = targetClient.top - dom.clientHeight - topNum;top = newTop > 0 ? newTop : top;}break;case 'right':left = targetClient.left + target.clientWidth + leftNum;top = targetClient.top;// 判断右边是否被遮挡-是否需要改为左边模式if (left + dom.clientWidth > window.innerWidth) {console.log(1);left = targetClient.right - dom.clientWidth - target.clientWidth;}// 判断底部是否被遮挡if (top + dom.clientHeight > window.innerHeight) {let newTop = targetClient.top - dom.clientHeight + target.clientHeight;top = newTop > 0 ? newTop : top;}break;}dom.style.cssText = `${dom.style.cssText};left: ${left}px;top: ${top}px;`;
}
// 常用色值队列设置默认值
export function setCommColorFn(value) {commColor.splice(0, commColor.length);for (let i = 0; i < value.length; i++) {commColor.push(value[i]);}
}

config.js

export const panelColor = [['#ffffff', '#f2f2f2', '#d8d8d8', '#bfbfbf', '#a5a5a5', '#939393'],['#000000', '#7f7f7f', '#595959', '#3f3f3f', '#262626', '#0d0d0d'],['#485368', '#f3f5f7', '#c5cad3', '#808b9e', '#353b45', '#24272e'],['#2972f4', '#e5efff', '#c7dcff', '#99beff', '#1450b8', '#0c306e'],['#00a3f5', '#e5f6ff', '#c7ecff', '#99ddff', '#1274a5', '#0a415c'],['#319b62', '#eafaf1', '#c3ead5', '#98d7b6', '#277c4f', '#184e32'],['#de3c36', '#ffe9e8', '#ffc9c7', '#ff9c99', '#9e1e1a', '#58110e'],['#f88825', '#fff3eb', '#ffdcc4', '#ffba84', '#b86014', '#5c300a'],['#f5c400', '#fff9e3', '#ffeead', '#ffe270', '#a38200', '#665200'],['#9a38d7', '#fdebff', '#f2c7ff', '#d58eff', '#5e2281', '#3b1551']
];
// 标准色值
export const standardColor = ['#ae2e19', '#e74025', '#f4c243', '#fefb54', '#a1ce63', '#53ad5b', '#53aeea', '#326fba', '#0a205c', '#67359a'];
// 常用色值
export const commColor = ['#e74025', '#fefb54', '#f2f2f2', '#485368', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'];
// rgb转16进制
export function rgbToHex(color) {try {const start = color.indexOf('(');const end = color.indexOf(')');const list = color.substring(start + 1, end).split(',');const r = Number(list[0]),g = Number(list[1]),b = Number(list[2]);//十六进制颜色值的正则表达式return '#' + fAddZero(r.toString(16)) + fAddZero(g.toString(16)) + fAddZero(b.toString(16));} catch (error) {console.log(error);return color;}
}
function fAddZero(v) {const newv = '00' + v;return newv.substring(newv.length - 2, newv.length);
}
// rgba 透明度更改
export function rgbOpacity(rgbaText, opacity = 1) {opacity = Number(opacity.toFixed(2));const start = rgbaText.indexOf('(');const end = rgbaText.indexOf(')');const list = rgbaText.substring(start + 1, end).split(',');list[list.length - 1] = `${opacity}`;return `rgba(${list.join(',')})`;
}/*** @Author: 刘强* @description: 渐变色* @param {string} startColor* @param {string} endColor* @param {number} num* @return {*}*/
function fColorGradualChange(startColor, endColor, num) {const rgb = /^rgb|RGB\((([0-9]|[1-9]\d|1\d\d|2([0-4]\d|5[0-5])),){2}([0-9]|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\)$/; //rgbconst hex = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i; //16进制//颜色预处理let startRGB, endRGB;if (hex.test(startColor)) {startRGB = fAnalysisRGB(startColor);} else if (rgb.test(startColor)) {startRGB = startColor.substring(3, 15).split(',');}if (hex.test(endColor)) {endRGB = fAnalysisRGB(endColor);} else if (rgb.test(startColor)) {endRGB = endColor.substring(3, 15).split(',');}const startR = startRGB[0],startG = startRGB[1],startB = startRGB[2];const endR = endRGB[0],endG = endRGB[1],endB = endRGB[2];const sR = (endR - startR) / num;const sG = (endG - startG) / num;const sB = (endB - startB) / num;const colors = [];for (let i = 0; i < num; i++) {const param = `rgba(${parseInt(sR * i + startR, 10)},${parseInt(sG * i + startG, 10)},${parseInt(sB * i + startB, 10)},1)`;colors.push(param);}return colors;
}
/*** @Author: 刘强* @description: 16进制转化rgb* @param {string} temp* @return {*}*/
function fAnalysisRGB(temp) {temp = temp.toLowerCase().substring(1, temp.length);const colors = [];colors.push(parseInt(temp.substring(0, 2), 16));colors.push(parseInt(temp.substring(2, 4), 16));colors.push(parseInt(temp.substring(4, 6), 16));return colors;
}
export function getColor(value) {value = value * 10;const step = 10;const colorZone = parseInt(`${value / step}`, 10);const index = parseInt(`${value % step}`, 10);let s = [];switch (colorZone) {case 0:s = fColorGradualChange('#FF0000', '#FF9A00', step);return s[index];case 1:s = fColorGradualChange('#FF9A00', '#CCFF00', step);return s[index];case 2:s = fColorGradualChange('#CCFF00', '#33FF00', step);return s[index];case 3:s = fColorGradualChange('#33FF00', '#00FF67', step);return s[index];case 4:s = fColorGradualChange('#00FF67', '#00FFFF', step);return s[index];case 5:s = fColorGradualChange('#00FFFF', '#0066FF', step);return s[index];case 6:s = fColorGradualChange('#0066FF', '#3300FF', step);return s[index];case 7:s = fColorGradualChange('#3300FF', '#CC00FF', step);return s[index];case 8:s = fColorGradualChange('#CC00FF', '#FF0099', step);return s[index];case 9:s = fColorGradualChange('#FF0099', '#FF0000', step);return s[index];case 10:return 'rgba(255,0,0,1)';default:return 'rgba(255,0,0,1)';}
}
//
// #ffffff - #ff0000
// #ffffff - #000000
// #ff0000 - #000000
// 色域规则模板
export function colorCursor(color, x, y) {color = rgbToHex(color);x = Number(x.toFixed(0));y = Number(y.toFixed(0));const step = 100;let result1 = '';let result2 = '';// x白色无法取极致if (x === 100) {result1 = 'rgba(255,255,255,1)';} else {result1 = fColorGradualChange(color, '#ffffff', step)[x];}// y黑色无法取极致 y=100时为黑色直接返回if (y === 100) {return 'rgba(0,0,0,1)';} else {result2 = fColorGradualChange(color, '#000000', step)[y];}// 综合结果return fColorGradualChange(rgbToHex(result1), rgbToHex(result2), step)[y];
}

color - picker-index.js

import { getColor, rgbOpacity, colorCursor } from '../config.js';
let targetParam;
// 取色器
let cursorDarg = false; //是否可以拖拽
let cursor = {top: 0,right: 0
};
let color = 'rgba(255,0,0,1)'; // 当前颜色值
let colorText = ''; // 输入显示值
// 取色滑块
let thumbDarg = false; //是否可以拖拽
let thumbTop = 0; // 取色滑块位置
let thumbColor = color; // 取色值
// 透明滑块
let pellucidityDarg = false; //是否可以拖拽
let pellucidityRight = 0; // 透明滑块位置
export let outside = false;
const pickercId = 'ui-pickerc'; // 组件id
const cancelClassName = 'luckysheet-mousedown-cancel'; // 隐藏屏蔽
let mode = 'right'; // 布局模式
let pickercOption; // 外抛监听对象
const htmlText = `<div class="ui-pickerc-content ${cancelClassName}"><div class="ui-pickerc-panel ${cancelClassName}"><div style="background:${color}" class="ui-pickerc-panel-left ${cancelClassName}"><span id="ui-pickerc-panel-left-cursor" style="top:${cursor.top}px;right:${cursor.right}px;" class="ui-pickerc-panel-left-cursor ${cancelClassName}"></span></div><div class="ui-pickerc-panel-right ${cancelClassName}"><div class="ui-pickerc-silder ${cancelClassName}"><span id="ui-pickerc-silder-thumb" class="${cancelClassName} ui-pickerc-silder-thumb"></span></div></div></div><div class="ui-pickerc-pellucidity ${cancelClassName}"><div style="background:linear-gradient(to right, rgba(12, 244, 115, 0) 0%,${thumbColor} 100%)" id="ui-pickerc-pellucidity-bg" class="ui-pickerc-pellucidity-bg ${cancelClassName}"></div><span id="ui-pickerc-pellucidity-thumb" class="ui-pickerc-pellucidity-thumb ${cancelClassName}"></span></div><div class="ui-pickerc-footer ${cancelClassName}"><input class="${cancelClassName}" value="${color}" readOnly type="text" placeholder="选取颜色" /><div class="ui-pickerc-footer-right ${cancelClassName}"><span class="ui-pickerc-footer-board ${cancelClassName}"><span id="ui-pickerc-footer-board-bg" class="ui-pickerc-footer-board-bg ${cancelClassName}" style="background:${color}"></span></span><span id="ui-pickerc-footer-reset" class="ui-pickerc-footer-reset ${cancelClassName}">重置</span><span id="ui-pickerc-footer-confirm" class="ui-pickerc-footer-confirm ${cancelClassName}">确认</span></div></div></div>`;
// 元素选择器
export const $ = function $(className) {if (!className) {return null;}const name = className.substring(1);switch (className[0]) {case '.':return document.getElementsByClassName(name);case '#':return document.getElementById(name);default:return document.getElementsByTagName(name);}
};
export function init(value, option) {pickercOption = option;targetParam = value;const target = $(`#${targetParam.id}`);const dom = document.createElement('div');dom.id = pickercId;dom.className = `ui-pickerc ${cancelClassName}`;dom.style.cssText = `left: ${target.offsetLeft}px;top: ${target.offsetTop + target.clientHeight}px`;dom.innerHTML = htmlText;target.appendChild(dom);target.onmouseenter = () => {opsitionFn(value);};// 绑定事件const contents = dom.children[0];// 绑定点击判空window.addEventListener('mouseup', onSpaceFn);// 绑定事件-确认$('#ui-pickerc-footer-confirm').onclick = () => {confirmFn();};// 绑定事件-重置$('#ui-pickerc-footer-reset').onclick = () => {resetFn();};// 绑定事件-拖拽window.addEventListener('mousemove', dargFn);// 绑定事件-取消拖拽window.addEventListener('mouseup', cancelDargFn);// 绑定事件-点击定位色块contents.children[0].children[0].onmousedown = e => {inderCursurFn(e);};// 绑定事件-点击定位取色滑块contents.children[0].children[1].onmousedown = e => {inderThumbFn(e);};// 绑定事件-点击定位透明滑块contents.children[1].onmousedown = e => {inderPellucidityFn(e);};
}
// 目标点击显示/隐藏
function changeHide() {let dom = document.getElementById('ui-pickerc');let visible = dom.style.display;dom.style.display = visible === 'none' ? 'block' : 'none';if (visible === 'none') {opsitionFn();}
}
// 点击空白判断
function onSpaceFn(e) {if (e.target.classList.contains('ui-color-cancel')) return;if (outside) {outside = false;} else {let dom = document.getElementById('ui-pickerc');if (dom.style.display === 'block') changeHide();}
}
// 重置
function resetFn() {color = 'rgba(255,0,0,1)';thumbColor = color;thumbTop = 0;cursor = {top: 0,right: 0};pellucidityRight = 0;updateFn();
}
// 确认事件
function confirmFn() {changeHide();pickercOption.confirm(color, 2);
}
// fn 拖拽
function dargFn(e) {//   console.log(thumbDarg, pellucidityDarg, cursorDarg);if (thumbDarg) dargThumbFn(e);if (pellucidityDarg) dargPellucidityFn(e);if (cursorDarg) dargCursorFn(e);
}
// fn 取消拖拽
function cancelDargFn() {cursorDarg = false;thumbDarg = false;pellucidityDarg = false;
}
// fn 点击定位取色器
function inderCursurFn(e) {cursorDarg = true;if (!e.target.className.includes('ui-pickerc-panel-left-cursor')) {const right = 280 - e.layerX;const top = e.layerY;cursor = {right: right,top: top};color = colorCursor(thumbColor, right / 2.8, top / 1.8);updateFn();}
}
// fn 拖拽取色器
function dargCursorFn(e) {let right = cursor.right - e.movementX;let top = cursor.top + e.movementY;right = right < 0 ? 0 : right;right = right > 280 ? 280 : right;top = top < 0 ? 0 : top;top = top > 180 ? 180 : top;cursor = {right: right,top: top};color = colorCursor(thumbColor, right / 2.8, top / 1.8);updateFn();
}
// fn 点击定位取色滑块
function inderThumbFn(e) {thumbDarg = true;if (!e.target.className.includes('ui-pickerc-silder-thumb')) {thumbTop = e.layerY;thumbColor = getColor(e.layerY / 18);const result = colorCursor(thumbColor, cursor.right / 2.8, cursor.top / 1.8);color = rgbOpacity(result, 1 - pellucidityRight / 280);updateFn();}
}
// fn 拖拽取色滑块
function dargThumbFn(e) {let top = thumbTop + e.movementY;top = top < 0 ? 0 : top;top = top > 180 ? 180 : top;thumbTop = top;thumbColor = getColor(top / 18);const result = colorCursor(thumbColor, cursor.right / 2.8, cursor.top / 1.8);color = rgbOpacity(result, 1 - pellucidityRight / 280);updateFn();
}
// fn 点击定位透明滑块
function inderPellucidityFn(e) {pellucidityDarg = true;if (!e.target.className.includes('ui-pickerc-pellucidity-thumb')) {const right = 280 - e.layerX;pellucidityRight = right;color = rgbOpacity(color, 1 - right / 280);updateFn();}
}
// fn 拖拽透明滑块
function dargPellucidityFn(e) {let right = pellucidityRight - e.movementX;right = right < 0 ? 0 : right;right = right > 280 ? 280 : right;pellucidityRight = right;color = rgbOpacity(color, 1 - right / 280);updateFn();
}
// update
function updateFn() {colorText = color;const contents = $('#ui-pickerc').children[0];// 更新输入框let inputDom = contents.children[2].children[0];inputDom.value = colorText;// 更新色块const cursorDom = $('#ui-pickerc-panel-left-cursor');cursorDom.style.cssText = `top:${cursor.top}px;right:${cursor.right}px`;contents.children[0].children[0].style.cssText = `background:${thumbColor}`;// 更新取色器滑块const thumbDom = $('#ui-pickerc-silder-thumb');thumbDom.style.cssText = `top:${thumbTop}px`;// 更新透明背景色const pellucidityBgDom = $('#ui-pickerc-pellucidity-bg');pellucidityBgDom.style.cssText = `background:linear-gradient(to right, rgba(12, 244, 115, 0) 0%,${thumbColor} 100%)`;// 更新透明滑块const pellucidityDom = $('#ui-pickerc-pellucidity-thumb');pellucidityDom.style.cssText = `right:${pellucidityRight}px`;// 更新结果展示const boardDom = $('#ui-pickerc-footer-board-bg');boardDom.style.cssText = `background:${color}`;
}
// 打开时自动调整位置
function opsitionFn(value = targetParam) {targetParam = value;const dom = $(`#${pickercId}`);const target = $(`#${targetParam.id}`);const targetClient = target.getBoundingClientRect();const leftNum = 0; // 间隙let left = 0,top = 0;// right模式switch (mode) {case 'right':left = targetClient.left + target.clientWidth + leftNum;top = targetClient.top + target.clientHeight - dom.clientHeight;// 判断右边是否被遮挡-是否需要改为左边模式if (left + dom.clientWidth > window.innerWidth) {left = left - dom.clientWidth - target.clientWidth - leftNum * 2;}break;}dom.style.cssText = `${dom.style.cssText};left: ${left}px;top: ${top}px;`;
}

原生js颜色选择器取色器组件相关推荐

  1. 【Android】自定义控件－颜色选择器/取色器

    第二篇博客,继续加油.有好东西我会陆续分享出来的! ColorPickerView 是之前一个智能家居项目实战中所写的自定义控件,主要用于取得RGB 0~255范围的值,然后转换成十六进制0~FF的值 ...

  2. 使用原生js将轮播图组件化

    代码地址如下: http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...

  3. 如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...

    js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...

  4. 原生js日历选择器插件开发实例教程

    在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...

  5. 黄聪：原生js的音频播放器，兼容pc端和移动端（原创）

    更新时间:2018/9/3 下午1:32:54 更新说明:添加音乐的loop设置和ended事件监听 loop为ture的时候不执行ended事件 1 2 3 4 5 6 7 8 9 10 11 12 ...

  6. React取色器组件

    react-color组件 ant-design上居然没有取色器相关的组件.从github上找到一个 下载安装:npm install react-color --save 页面引入:import { ...

  7. 电脑端音乐播放器html5,原生js的音频播放器，兼容pc端和移动端（原创）

    插件描述:基于原生的音频播放器效果,小巧易用 更新时间:2018/12/10 下午3:08:16 更新说明: 1. 更新demo的音频地址 2. 组件的图片地址使用本地base64的图片格式 更新时间 ...

  8. js颜色选择器 制作分析

    给html元素设置事件监听, 触发事件 弹出颜色选择器 颜色选择器绘制 获取上次选择的颜色(当前颜色) 绘制渐变色板(canvas) (方法: 横轴渐变ff0000, ffff00, 00ff00, ...

  9. vue版本的仿京东放大镜代码还有原生js版本的。（组件封装）

    vue版本的仿京东放大镜 <template><div class="maxBox"><divref="left"class=&q ...

最新文章

  1. 一文看懂docker容器技术架构及其中的各个模块
  2. excel中最常用的30个函数_最常用日期函数汇总excel函数大全收藏篇
  3. 今天开始学习shell编程！！！
  4. 【Android 安全】DEX 加密 ( Application 替换 | 分析 ContentProvider 组件中调用 getApplication() 获取的 Application 二 )
  5. 在Python 中 a=a+b 与 a+=b 区别，你真的知道嘛？
  6. 我和我的广告前端代码（六）：webpack工程合并、也许我不需要gulp
  7. leetcode-sort-colors
  8. 七度空间338多少钱一包_2020黄果树香烟一包多少钱 黄果树香烟价格表图排行榜...
  9. rabbitmq 学习-2-安装
  10. 广域网访问局域网路由器设置_交换机路由器如何连接 交换机路由器连接方法【详解】...
  11. hadoop之 Zookeeper 分布式应用程序协调服务
  12. 10个 截屏工具 FastStone Capture9.3注册码
  13. 破解 京东登录滑块验证
  14. prosody IM cert证书安装
  15. 国内人工智能行业发展现状
  16. Android: Android Studio 的模拟器一些使用问题
  17. 循环冗余校验（CRC）之verilog实现
  18. csv是什么文件(ofd是什么文件)
  19. mac m1 外接 4k 显示器 字体发虚 发灰怎么办
  20. 无线传感器网络的时钟同步估计问题（Matlab代码实现）

热门文章

  1. 35 岁以上还在通过招聘平台投简历找工作就很丢人吗？
  2. 如何解决微信小程序用户高频率触发点击事件？
  3. python panda用法_Python3 pandas用法大全
  4. STM32CubeMX驱动OLED屏模块_IIC
  5. 第8期：云原生—— 大学生职场小白该如何学
  6. CTFHub Misc 之 鸡你太美
  7. 【Unity插件】最多的插件合集
  8. ADM的兴衰起落,浮沉之道！道翰天琼认知智能未来机器人接口API
  9. 32寸曲面屏撸代码也太爽了！送一个！
  10. 为炒股而努力自学Python -＞基础知识： 开卷有益