原生JS实现拾色器功能

news2025/1/11 6:06:08

没事儿干,写一个拾色器,原生 JS 实现,先看效果图:

在这里插入图片描述

一、写页面

<div class="circle"></div>

.circle {
    width: 200px;
    height: 200px;
    border: 1px #999 solid;
    margin: 200px 0 0 200px;
    border-radius: 50%;
    background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    position: relative;
    animation: rotate 2s 0s infinite linear;
    cursor: pointer;
    animation-play-state: paused;
}

在这里插入图片描述

二、写逻辑

document.querySelector('.circle').onclick = e => {
  let color = document.getElementById('color')

  // 创建取色器
  const drop = new EyeDropper()
  // 进行取色
  drop.open()
    .then(res => {
      // 获取取色结果
      let _c = res.sRGBHex
      color.innerText = _c // 结果
      color.style.setProperty('--c', _c) // 颜色
    })
}

三、总结

这是 ECMA 新出的 api,兼容性不行,线上项目就别用了,不断的学习才是真

在这里插入图片描述

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

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

相关文章

rust库学习-env_logger(actix-web添加彩色日志、rust添加彩色日志 )

文章目录 介绍actix-web启用彩色日志crate地址&json格式日志 我们在进行rust的web开发时&#xff0c;如果不指定日志&#xff0c;就不会有输出&#xff0c;非常不友好 这里我们使用env_logger进行日志打印 介绍 env_logger 需要配合 log 库使用, env_logger 是 Rust 社区…

23年5月软考电子版证书已上线!

首先恭喜一下&#xff0c;5月软考考试通过的小伙伴们&#xff0c;几个月的辛苦耕耘&#xff0c;终于得到了回报&#xff01;即日起&#xff0c;23年5月软考电子版证书已上线&#xff01;可以登录网址自行下载了&#xff01; 2023年5月软考电子版证书查询打印方法一&#xff1a…

USB Type-C端口集成式ESD静电保护方案 安全低成本

Type-C端口是根据USB3.x和USB4协议传输数据的&#xff0c;很容易受到电气过载&#xff08;EOS&#xff09;和静电放电&#xff08;ESD&#xff09;事件的影响。由于Type-C支持随意热插拔功能&#xff0c;其内部高集成度的芯片&#xff0c;更容易受到人体静电放电的伤害和损坏。…

【算法系列篇】二分查找——这还是你所知道的二分查找算法吗?

文章目录 前言什么是二分查找算法1.二分查找1.1 题目要求1.2 做题思路1.3 Java代码实现 2.在排序数组中查找元素的第一个和最后一个位置2.1 题目要求2.2 做题思路2.3 Java代码实现 3.搜索插入位置3.1 题目要求3.2 做题思路3.3 Java代码实现 4.x的平方根4.1 题目要求4.2 做题思路…

2023年中,量子计算产业现状——

2023年上半年&#xff0c;量子计算&#xff08;QC&#xff09;领域取得了一系列重要进展和突破&#xff0c;显示出量子计算技术的快速发展和商业应用的不断拓展。在iCV TAnk近期发表的一篇报告中&#xff0c;团队从制度进步、产业生态、投融资形势、总结与展望四个方面对量子计…

word文件怎么免费转换为pdf格式?

大家在编辑word文件的时候&#xff0c;可能需要进行格式的转换&#xff0c;比如将word转换为pdf格式这时候需要使用工具软件。接下来小编就给大家介绍word文件怎么免费转换为pdf格式&#xff0c;免费word转pdf格式的方法。 免费word转pdf格式的方法 我们需要在电脑中安装并打开…

PySide6学习笔记--gui小模版使用

一、界面绘制 1.desiner画图 2.画图代码 # -*- coding: utf-8 -*-################################################################################ ## Form generated from reading UI file t1gui.ui ## ## Created by: Qt User Interface Compiler version 6.5.2 ## ##…

Ajax+Vue+ElementUI

文章目录 1.Ajax1.1 介绍1.2 Ajax快速入门1.3 案例-用户注册时&#xff0c;检测用户名是否数据库已经存在1.4 Axios1.4.1 Axios快速入门1.4.2 请求别名 1.5 JSON1.5.1 Json的基础语法1.5.2 FastJson的使用5.3.2 Fastjson 使用 2. Vue2.1 介绍2.2 Vue快速入门2.3 Vue常用指令和生…

el-upload 图片上传

1、这三个是必须的 2、设置对应的参数 3、设置上传之前和成功之后的回调

动态数据源切换类AbstractRoutingDataSource

写在前面 在工作中为了能够提高数据库的读写能力&#xff0c;经常会用到分库分表等技术&#xff0c;此时不可避免的就要涉及到动态数据源切换的内容&#xff0c;针对这个问题&#xff0c;spring提供了AbstractRoutingDataSource类来满足我们的需求&#xff0c;本文就一起来看下…

AI智能问答在哪些领域可以应用呢

对于AI智能问答这个全新的领域很多人都是懵懵懂懂的&#xff0c;以为这就和一些科技大企业有关。但是其实不是的&#xff0c;这和我们每个人的日常生活都息息相关。这篇文章&#xff0c;looklook就来和大家讲讲AI智能问答可以有哪些应用的方向&#xff0c;有需要的朋友们就看下…

F#奇妙游(22):Monte Carlo方法的F#实现

一个小问题的求解 问题 一根 1m 长的玻璃棒&#xff0c;摔倒地上断成 3 段&#xff0c;最短一段的平均值是多少&#xff1f; 假设玻璃棒一定会摔成三段&#xff0c;且玻璃棒质地均匀&#xff0c;为理想状态。 物理的视角 玻璃棒摔成三段&#xff0c;其物理过程是什么样的&…

VUE调用高德地图之电子围栏

最近项目上电子围栏功能,就是地图上限定的区域内实现限行功能,用我们身边的事物来举例,共享单车的限行、限停区域就是电子围栏。由此可见,电子围栏最基础的做法就是在地图上实现多边形覆盖物。 效果图大概如下: 照例,第一步:加载JS AP。 1.在public/index.html中加入…

【LINUX协议栈】netfilter之连接跟踪机制

1、什么是链接跟踪 连接跟踪&#xff0c;顾名思义&#xff0c;就是跟踪&#xff08;并记录&#xff09;连接的状态。一般conntrack用来指代“Connection Tracking”&#xff0c;即连接跟踪&#xff0c;是建立在 Netfilter框架之上的重要功能之一。 2、为什么需要链路跟踪 因…

天润融通「微藤大语言模型平台2.0」以知识驱动企业高速增长

8月23日&#xff0c;天润融通&#xff08;又称“天润云”,2167.HK&#xff09;&#xff0c;正式发布「微藤大语言模型平台2.0」。 “大模型企业知识企业知识工程”。 “不能有效记录和管理知识的企业是不能持续进步的。在企业的生产流程中&#xff0c;相比于其他场景&#xff0…

Heikin Ashi最简单的一种烛台移动平均线

是不是每次进行交易的时候&#xff0c;市场上的各种新闻真真假假&#xff0c;搞的交易者每次都分不清楚&#xff0c;今天FPmarkets澳福给各位投资者推荐一种交易策略——“Heikin Ashi” “Heikin Ashi”只通过四个参数构建&#xff1a;开盘价、收盘价、最高价和最低价(最大和…

Vlan技术实操(第四课)

一 代码的常用命令一 vlan的增删改查 1&#xff09;创建vlan[SW1]vlan 2 [2-4094] 创建vlan[SW1]vlan batch 10 20 30 创建多个不连续的vlan[SW1]display vlan 查看vlan信息[SW1]vlan batch 50 to 60创建多个连续的vlan[SW1]vlan2[SW1-vlan2]description caiwu添加描述信息&am…

分布式锁 总结

分布式锁 在应用开发中&#xff0c;特别是web工程开发&#xff0c;通常都是并发编程&#xff0c;不是多进程就是多线程。这种场景下极易出现线程并发性安全问题&#xff0c;此时不得不使用锁来解决问题。在多线程高并发场景下&#xff0c;为了保证资源的线程安全问题&#xff0…

震惊!友达台中厂长传过劳逝世 | 百能云芯

8月23日消息&#xff0c;近日面板大厂友达风波不断&#xff0c;8月3日有消息称&#xff0c;生产笔电的5代厂与电视的6代厂已经半年没有订单了&#xff0c;面板产业很惨&#xff0c;预计裁员100至200人。今天接到消息称&#xff0c;任职才1年的台中友达6A厂厂长&#xff0c;传因…

8月第3周榜单丨哔哩哔哩飞瓜数据B站UP主排行榜发布!

飞瓜轻数发布2023年8月14日-8月20日飞瓜数据UP主排行榜&#xff08;B站平台&#xff09;&#xff0c;通过充电数、涨粉数、成长指数、带货数据等维度来体现UP主账号成长的情况&#xff0c;为用户提供B站号综合价值的数据参考&#xff0c;根据UP主成长情况用户能够快速找到运营能…