原生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，兼容性不行，线上项目就别用了，不断的学习才是真