如何用JavaScript在进度条值≤15时显示指定图标？

Got it, let's break this down into simple, actionable steps. I'll cover both a direct style manipulation approach and a cleaner CSS-class method (the latter is better for maintainability, so I'll lead with that).

Step 1: Grab the Required Elements #

First, we need references to both the fire icon and your progress bar (or the source of your progress value):

// Get the fire icon element
const fireIcon = document.querySelector('.flash-sale-progress-bar__fire');
// Get your progress bar (adjust the selector to match your actual progress bar class/id)
const progressBar = document.querySelector('.your-progress-bar-selector');

Step 2: Create a Toggle Function #

This function will check the progress value and show/hide the icon based on your condition. Let's start with the recommended CSS-class approach:

First, add this utility class to your stylesheet to handle hiding elements cleanly:

/* Utility class to hide elements */
.hidden {
  display: none !important;
}

Then the JavaScript function to toggle the icon:

function toggleFireIcon(progressValue) {
  // Check if value falls between 0 and 15 (inclusive)
  const shouldShowFire = progressValue >= 0 && progressValue <= 15;
  
  // Add or remove the hidden class based on our condition
  if (shouldShowFire) {
    fireIcon.classList.remove('hidden');
  } else {
    fireIcon.classList.add('hidden');
  }
}

If you prefer to skip the extra CSS and manipulate styles directly, use this version instead:

function toggleFireIcon(progressValue) {
  if (progressValue >= 0 && progressValue <= 15) {
    // Show the icon (use 'inline-block' if it's an inline element)
    fireIcon.style.display = 'block';
  } else {
    // Hide the icon
    fireIcon.style.display = 'none';
  }
}

Step 3: Trigger the Toggle on Progress Changes #

Now we need to call this function whenever the progress value updates. Here are common use cases:

Scenario 1: Progress Bar is an Input Range #

If you're using an <input type="range"> as your progress bar, add an event listener to react to user input:

progressBar.addEventListener('input', function() {
  // Convert the string value to a number
  const currentProgress = parseInt(this.value);
  toggleFireIcon(currentProgress);
});

Scenario 2: Dynamic Progress (Timer/Backend Update) #

If your progress updates automatically (like a countdown or server-driven update), call the function whenever you refresh the progress value:

// Example: Simulating a progress counter that increments every second
let currentProgress = 0;
const progressInterval = setInterval(() => {
  currentProgress++;
  // Update your progress bar UI here (if needed)
  // Then toggle the fire icon
  toggleFireIcon(currentProgress);
  
  // Stop the interval once progress exceeds 100
  if (currentProgress > 100) {
    clearInterval(progressInterval);
  }
}, 1000);

Step 4: Set Initial State #

Don't forget to check the initial progress value when the page loads, so the icon starts in the correct state:

// Get the initial progress value (adjust based on your progress bar setup)
const initialProgress = parseInt(progressBar.value);
toggleFireIcon(initialProgress);

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