jquery 圆形可拖动进度条

基础概念

jQuery 圆形可拖动进度条 是一种基于 jQuery 库的用户界面组件，它允许用户通过拖动来调整一个圆形进度条的值。这种进度条通常用于显示任务的完成度或某个过程的进度，并且用户可以手动调整这个进度。

类型与应用场景

类型：
- 静态圆形进度条：仅显示预设的进度值。
- 动态圆形进度条：可以实时更新进度值，常用于监控实时数据。
- 可拖动圆形进度条：允许用户通过拖动滑块来改变进度值。
应用场景：
- 项目管理工具：显示任务的完成百分比。
- 媒体播放器：表示视频或音频的播放进度。
- 表单填写进度指示：在多步骤表单中指示用户当前的填写进度。

示例代码

以下是一个简单的 jQuery 圆形可拖动进度条的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 圆形可拖动进度条</title>
<style>
  #progress {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(#4caf50 25%, #e0e0e0 0);
    position: relative;
    cursor: pointer;
  }
  #progress::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #fff;
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="progress"></div>

<script>
$(document).ready(function() {
  var isDragging = false;
  var startX, startDeg;

  $('#progress').on('mousedown', function(event) {
    isDragging = true;
    startX = event.pageX;
    startDeg = getProgressDeg();
  });

  $(document).on('mousemove', function(event) {
    if (!isDragging) return;
    var offsetX = event.pageX - startX;
    var deg = startDeg + (offsetX / $('#progress').width()) * 360;
    setProgressDeg(deg);
  });

  $(document).on('mouseup', function() {
    isDragging = false;
  });

  function getProgressDeg() {
    var style = window.getComputedStyle($('#progress')[0]);
    var matrix = new WebKitCSSMatrix(style.backgroundImage.slice(5, -2).replace(/,/g, ' '));
    return Math.round(Math.atan2(matrix.m12, matrix.m11) * (180 / Math.PI));
  }

  function setProgressDeg(deg) {
    $('#progress').css('background', 'conic-gradient(#4caf50 ' + deg + 'deg, #e0e0e0 0)');
  }
});
</script>

</body>
</html>