如何通过JS自定义计数器在网页中放置字符对应的SVG图标？

Got it, let's break this down step by step to get your custom SVG number counter working exactly how you want it.

1. Prep Your SVG Assets #

First, organize your SVG files so each digit (0-9) has its own corresponding file. Name them clearly for easy reference—like 0.svg, 1.svg, all the way to 9.svg. Store them in a dedicated folder (e.g., svg-digits/) relative to your HTML file.

2. Basic HTML Structure #

You'll need a container div where the SVG-based numbers will be rendered. Add this to your HTML:

<div id="number-container"></div>

3. JavaScript Implementation #

We'll build two core pieces: the counter that increments from 1 to 100, and a helper function that converts any number into its SVG digit components.

Here's the full code with explanations:

// Get the container where we'll render the SVG numbers
const numberContainer = document.getElementById('number-container');

// Helper function to convert a number into SVG digits
function renderNumber(num) {
  // Clear the container first to avoid stacking old digits
  numberContainer.innerHTML = '';
  
  // Convert the number to a string, then split into individual characters (digits)
  const digits = num.toString().split('');
  
  // Loop through each digit and create an SVG element for it
  digits.forEach(digit => {
    // Create an img tag to load the SVG (you could also embed the SVG directly if needed)
    const svgImg = document.createElement('img');
    // Set the source to your SVG file path
    svgImg.src = `svg-digits/${digit}.svg`;
    // Add a class for styling (optional but useful for sizing/spacing)
    svgImg.classList.add('digit-svg');
    // Append the SVG to the container
    numberContainer.appendChild(svgImg);
  });
}

// Counter function to count from 1 to 100
function startCounter() {
  let currentNumber = 1;
  
  // Render the initial number
  renderNumber(currentNumber);
  
  // Set up the interval to increment the number
  const interval = setInterval(() => {
    currentNumber++;
    renderNumber(currentNumber);
    
    // Stop the counter once we hit 100
    if (currentNumber === 100) {
      clearInterval(interval);
      console.log('Counter finished!');
    }
  }, 1000); // Adjust the interval time (ms) to make counting faster/slower
}

// Start the counter when the page loads
window.addEventListener('load', startCounter);

Optional Styling #

Add some CSS to make your SVG digits look clean—adjust size, spacing, etc.:

#number-container {
  display: flex;
  gap: 8px; /* Space between digits */
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.digit-svg {
  width: 60px; /* Adjust based on your SVG size */
  height: auto;
}

How It Works #

• The renderNumber function takes a number, splits it into individual digits, then creates an <img> tag for each digit pointing to your custom SVG file.
• The startCounter function initializes the count at 1, uses setInterval to increment the number every second (you can tweak the timing), and calls renderNumber to update the display each time.
• Once we reach 100, the interval is cleared to stop the counter.

Just double-check your SVG file paths are correct, and you'll have a fully custom SVG-based counter running from 1 to 100!

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