如何用JS或jQuery生成带百分比的圆形进度条并动态设置数值？

Hey Benjamin, great question! Here's a solid implementation for a circular progress bar that fits your needs—fixed HTML structure, dynamic value updates via JavaScript, and a clean, modern style. Let's break it down:

Fixed HTML Structure #

We'll use a minimal, fixed structure with a container, two half-circles (to handle progress over 50%), and a center text element for the score:

<div class="circular-progress">
  <div class="progress-background"></div>
  <div class="progress-half left"></div>
  <div class="progress-half right"></div>
  <div class="score-text">0%</div>
</div>

CSS Styling #

This style creates a clean circular bar with smooth transitions. You can tweak colors, size, and thickness to match your design:

.circular-progress {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f0f0f0;
}

.progress-background {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: white;
  z-index: 1;
}

.progress-half {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  overflow: hidden;
}

.progress-half.left {
  left: 0;
}

.progress-half.right {
  right: 0;
}

.progress-half::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 10px solid #4CAF50;
  transition: transform 0.5s ease;
}

.progress-half.left::before {
  right: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform-origin: right center;
}

.progress-half.right::before {
  left: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transform-origin: left center;
  transform: rotate(180deg);
}

.score-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  z-index: 2;
}

Dynamic Value Updates (Vanilla JavaScript) #

This function takes a percentage (0-100) and updates the progress bar and text dynamically:

function updateProgress(percent) {
  const leftHalf = document.querySelector('.progress-half.left::before');
  const rightHalf = document.querySelector('.progress-half.right::before');
  const scoreText = document.querySelector('.score-text');
  
  // Update the score text
  scoreText.textContent = `${percent}%`;
  
  if (percent <= 50) {
    // Only rotate the right half for 0-50%
    rightHalf.style.transform = `rotate(${percent * 3.6}deg)`;
    leftHalf.style.transform = 'rotate(0deg)';
  } else {
    // Rotate right half fully, then rotate left half for 51-100%
    rightHalf.style.transform = 'rotate(180deg)';
    leftHalf.style.transform = `rotate(${(percent - 50) * 3.6}deg)`;
  }
}

// Example usage: Update to 75% score
updateProgress(75);

jQuery Version (If You Prefer) #

If you're using jQuery in your project, here's the equivalent function:

function updateProgress(percent) {
  const $rightHalf = $('.progress-half.right::before');
  const $leftHalf = $('.progress-half.left::before');
  const $scoreText = $('.score-text');
  
  $scoreText.text(`${percent}%`);
  
  if (percent <= 50) {
    $rightHalf.css('transform', `rotate(${percent * 3.6}deg)`);
    $leftHalf.css('transform', 'rotate(0deg)');
  } else {
    $rightHalf.css('transform', 'rotate(180deg)');
    $leftHalf.css('transform', `rotate(${(percent - 50) * 3.6}deg)`);
  }
}

// Example usage
updateProgress(85);

Key Notes #

• The 3.6 multiplier comes from 360 degrees (full circle) divided by 100 percent.
• The transition in CSS ensures smooth animation when the percentage changes.
• You can customize the bar color by changing the border-color in .progress-half::before, or adjust the size by modifying the width/height values in .circular-progress.

内容的提问来源于stack exchange，提问作者Benjamin Sommer