Javascript 如何在css中裁剪成一定Angular 的圆的一部分，而不需要复杂的多边形

.line {
  width: 380px;
  height: 380px;
  background-color: rgba(0, 119, 255, 0.575);
  position: relative;
  border-radius: 800px;
  left: 10px;
  top: 10px;
  clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 100% 50%, 100% 100%, 0% 100%);
}

<div style="width: 600px;">
  <p style="display: none;">TIMEAPI RESULTS || <button id="fetchapiBtn">Fetch</button></p>
  <div id="clock_visual">
    <div id="clock_indicators">
      <div style="transform: rotate(0deg);" class="line"></div>
    </div>
  </div>
  <div id="api_results"></div>
</div>

const div = document.querySelector('#clock');
const minutes = document.querySelector('span');

document.querySelector('#minutes').addEventListener('input', e => {
  const angle = e.target.value * (360 / 60);
  div.style.backgroundImage = `conic-gradient(transparent ${angle}deg, #C00 0deg)`;
  minutes.textContent = e.target.value;
});

div {
  width: 50vh;
  height: 50vh;
  border: 1px solid red;
  border-radius: 50%;
  background: conic-gradient(transparent 120deg, #C00 0deg);
}

<div id="clock"></div>

<input type="range" value="20" step="1" max="60" id="minutes" />
<p>
  Minutes:
  <span>0</span>
</p>

Javascript相关问答推荐

如何保持子画布元素的1：1宽高比？

使用typeof运算符获取对象值类型-接收字符串而不是数组

成帧器运动中的运动组件为何以收件箱开始？

仅针对RTK查询中的未经授权的错误取消maxRetries

引用在HTMLAttributes<；HTMLDivElement>；中不可用

如何添加绘图条形图图例单击角形事件

setcallback是什么时候放到macrotask队列上的？

无法使用单击按钮时的useState将数据从一个页面传递到另一个页面

Angular 订阅部分相互依赖并返回数组多个异步Http调用

如何在每次单击按钮时重新加载HighChart/设置HighChart动画？

使用VUE和SCSS的数字滚动动画(&；内容生成)

TinyMCE 6导致Data：Image对象通过提供的脚本过度上载

SPAN不会在点击时关闭模式，尽管它们可以发送日志(log)等

如何在加载页面时使锚定标记成为焦点

如何将对象推送到firestore数组？

Firefox的绝对定位没有达到预期效果

无法在Adyen自定义卡安全字段创建中使用自定义占位符

使用Java脚本在div中创建新的span标记

如何从图表中映射一组图表-js使用REACT

使用JavaScript或PHP从div ID值创建锚标记和链接