原生JS实现拾色器功能

没事儿干,写一个拾色器,原生 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,兼容性不行,线上项目就别用了,不断的学习才是真

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【TI毫米波雷达笔记】CCS雷达工程调试(以IWR6843AOP为例)

【TI毫米波雷达笔记】CCS雷达工程调试&#xff08;以IWR6843AOP为例&#xff09; 先前我们讨论了如何建立工程并编译 包括DSS和MSS部分 也就是DSP部分和cortex-r4f部分 通过编译 可以生成一个.out文件 如图 同样的 也有xer4f格、xe674格式等等 这取决于编译的工程配置 但这…

JUC学习笔记(一)

1. JUC概述及回顾 1.1. JUC是什么&#xff1f; 在 Java 5.0 提供了 java.util.concurrent(简称JUC)包&#xff0c;在此包中增加了在并发编程中很常用的工具类。此包包括了几个小的、已标准化的可扩展框架&#xff0c;并提供一些功能实用的类&#xff0c;没有这些类&#xff0…

C#|如何调试进依赖动态库中

第一步&#xff1a;打开项目属性 第二步 打开debug的本地调试可用 第三步 把要调试的代码拖进主界面打断点就可以进断点了

用友T3 T6 服务无法启动 windows10 11等操作系统 T3服务没有开启

windows 10 11 等高版本操作系统故障。 于2023-08-23日大量爆发。。 导致原因&#xff0c;windows操作系统根证书颁发机构吊销或已到期。 正版软件请打11.2最新补丁即可解决。 如果是老版本需要修复证书才可以。

Spring复习:(55)ApplicationContext中BeanFactoryPostProcessor是怎么添加到容器的?

容器创建时会调用AbstractApplicationContext的refresh方法&#xff0c;其中会调用invokeBeanFactoryPostProcessor方法&#xff0c;如下图 invokeBeanFactoryPostProcessors代码如下&#xff1a; 其中调用的PostProcessorRegistrationDelegate的invokeBeanFactoryPostProcess…

STM32F4X USART串口使用

STM32F4X USART串口使用 串口概念起始位波特率数据位停止位校验位串口间接线 STM32F4串口使用步骤GPIO引脚复用函数串口初始化函数串口例程 串口概念 串口是MCU与外部通信的重要通信接口&#xff0c;也是MCU在开发过程中的调试利器。串口通信有几个重要的参数&#xff0c;分别…

11、vue3

一、为什么要学 Vue3 1.1 为什么要学 Vue3 1.2 Vue3的优势 1.3 Vue2 选项式 API vs Vue3 组合式API Vue3 组合式API vs Vue2 选项式 API 二、create-vue搭建Vue3项目 2.1 认识 create-vue 2.2 使用create-vue创建项目 前提环境条件 已安装 16.0 或更高版本的 Node.js node -…

【论文阅读】自动驾驶安全的研究现状与挑战

文章目录 摘要1.引言1.1.自动驾驶安全1.2.攻击面1.3.内容和路线图 2.自动驾驶技术2.1.组成2.2.技术 3.传感器安全3.1.照相机3.2.GNSS&#xff08;全球导航系统&#xff09;/IMU&#xff08;惯性测量单元&#xff09;3.3.超声波传感器3.4.毫米波雷达3.5.激光雷达3.6.多传感器交叉…

容器化微服务:用Kubernetes实现弹性部署

随着云计算的迅猛发展&#xff0c;容器化和微服务架构成为了构建现代应用的重要方式。而在这个过程中&#xff0c;Kubernetes&#xff08;常简称为K8s&#xff09;作为一个开源的容器编排平台&#xff0c;正在引领着容器化微服务的部署和管理革命。本文将深入探讨容器化微服务的…

32、启用 HTTP 响应压缩和编程式配置Web应用

★ 启用HTTP压缩 就是前端页面如果改动的比较多&#xff0c;那么响应就会比较慢&#xff0c;可以通过设置HTTP响应压缩来提高响应&#xff0c;如果前端改动少&#xff0c;那么就不需要启动这个响应压缩。 目的&#xff1a;为了提高HTTP响应数据在网络上的传输效率。▲ 设置如…

【C++练习】普通方法+利用this 设置一个矩形类(Rectangle), 包含私有成员长(length)、 宽(width), 定义一下成员函数

题目 设置一个矩形类(Rectangle), 包含私有成员长(length)、 宽(width), 定义成员函数: void set_ len(int l); //设置长度 设置宽度void set_ wid(int w); 获取长度: int get len(); 获取宽度: int get _wid); 显示周长和面积: v…

oracle警告日志\跟踪日志磁盘空间清理

oracle警告日志\跟踪日志磁盘空间清理 问题现象&#xff1a; 通过查看排查到alert和tarce占用大量磁盘空间 警告日志 /u01/app/oracle/diag/rdbms/orcl/orcl/alert 跟踪日志 /u01/app/oracle/diag/rdbms/orcl/orcl/trace 解决方案&#xff1a; 用adrci清除日志 确定目…

系统架构设计师-计算机系统基础知识(1)

目录 一、计算机系统概述 1、冯诺依曼计算结构​编辑 二、存储系统 三、操作系统概述 1、特殊的操作系统 四、进程管理 1、进程与线程的概念 2、进程的同步与互斥 3、PV操作 4、死锁与银行家算法 一、计算机系统概述 1、冯诺依曼计算结构 二、存储系统 从上到下依次&#…

solidity0.8.0的应用案例9:代理合约

代码由OpenZeppelin的Proxy合约简化而来。 代理模式 Solidity合约部署在链上之后,代码是不可变的(immutable)。这样既有优点,也有缺点: 优点:安全,用户知道会发生什么(大部分时候)。坏处:就算合约中存在bug,也不能修改或升级,只能部署新合约。但是新合约的地址与…

【2023中国算力大会】发布算领未来“8大成果”

2023年8月18日-19日&#xff0c;2023中国算力大会在宁夏银川举行&#xff0c;本届大会以“算领新产业潮流 力赋高质量发展”为主题&#xff0c;打造“主题论坛、成果展示、产业推介、先锋引领”四大核心内容&#xff0c;全面展示算力产业发展最新成果&#xff0c;为产业各方搭建…

3、Spring之底层架构核心概念解析

BeanDefinition BeanDefinition表示Bean定义,BeanDefinition中存在很多属性用来描述一个Bean的特点。比如: class,表示Bean类型scope,表示Bean作用域,单例或原型等lazyInit:表示Bean是否是懒加载initMethodName:表示Bean初始化时要执行的方法destroyMethodName:表示Be…

[JavaWeb]【十一】web后端开发-SpringBootWeb案例(登录)

目录 一、登录功能 1.1 思路 1.2 LoginController 1.3 EmpService 1.4 EmpServiceImpl 1.5 EmpMapper 1.6 启动服务-测试 1.7 前后端联调 二、登录校验&#xff08;重点&#xff09; 2.1 问题 2.2 问题分析 2.3 登录校验​编辑 2.4 会话技术 2.4.1 会话技术 2.4.2 …

查询数据库字段信息 mysql

属性&#xff1a; SELECT TABLE_SCHEMA AS 库名, TABLE_NAME AS 表名, COLUMN_NAME AS 字段名, ORDINAL_POSITION AS 字段顺序, COLUMN_DEFAULT AS 默认值, IS_NULLABLE AS 是否为空, DATA_TYPE …

多功能租车平台微信小程序源码 汽车租赁平台源码 摩托车租车平台源码 汽车租赁小程序源码

多功能租车平台微信小程序源码是一款用于汽车租赁的平台程序源码。它提供了丰富的功能&#xff0c;可以用于租赁各种类型的车辆&#xff0c;包括汽车和摩托车。 这个小程序源码可以帮助用户方便地租赁车辆。用户可以通过小程序浏览车辆列表&#xff0c;查看车辆的详细信息&…

C语言:选择+编程(每日一练Day7)

目录 选择题&#xff1a; 题一&#xff1a; 题二&#xff1a; 题三&#xff1a; 题四&#xff1a; 题五&#xff1a; 编程题&#xff1a; 题一&#xff1a;图片整理 思路一&#xff1a; 思路二&#xff1a; 题二&#xff1a;寻找数组的中心下标 思路一&#xff1…