如何使用JavaScript实现多层boxShadow？——阴影生成器开发疑难求助

Hey there! Let's fix that multi-layer shadow functionality you're working on. Your current single-shadow setup is solid—we just need to adjust how we collect and combine shadow parameters across all layers. Here's a step-by-step breakdown:

1. Adjust Parameter Collection to Support Multiple Layers #

Instead of updating just one shadow parameter at a time, we'll collect all shadow layer parameters and combine them into a single box-shadow string (separated by commas).

Modify your getRangeValue function like this:

function getRangeValue() {
  const shadowBox = document.getElementById('shadowBox');
  const shadowParams = []; // Store all shadow layer strings here

  // Loop through every shadow instance in your container
  shadowObjContainer.forEach(shadow => {
    // Fetch values for the current shadow layer
    const xValue = document.getElementById(shadow.horizontalValue).value;
    const yValue = document.getElementById(shadow.verticalValue).value;
    const blurValue = document.getElementById(shadow.blurValue).value;
    const spreadValue = document.getElementById(shadow.spreadValue).value;
    const colorValue = document.getElementById(shadow.colorValue).value;

    // Build the single shadow string
    const singleShadow = `${xValue}px ${yValue}px ${blurValue}px ${spreadValue}px ${colorValue}`;
    shadowParams.push(singleShadow);
  });

  // Combine all layers with commas and apply to the box
  shadowBox.style.boxShadow = shadowParams.join(', ');
}

2. Add Functionality to Create New Shadow Layers #

You'll need a way to add new shadow instances (and their corresponding UI controls). Here's how to implement an "Add Shadow" button:

First, add a button to your HTML:

<button id="addShadowBtn">Add New Shadow Layer</button>
<div id="shadowControls">
  <!-- Your initial shadow controls go here -->
</div>

Then add this JavaScript to handle the button click:

document.getElementById('addShadowBtn').addEventListener('click', () => {
  // Create a new shadow instance with a unique ID
  const newShadowId = shadowObjContainer.length + 1;
  const newShadow = new Shadow(newShadowId);
  shadowObjContainer.push(newShadow);

  // Create UI controls for the new shadow layer
  const controlGroup = document.createElement('div');
  controlGroup.className = 'shadow-control-group';
  controlGroup.innerHTML = `
    <h4>Shadow Layer ${newShadowId}</h4>
    <div>
      <label>Horizontal Offset:</label>
      <input type="range" id="horizontalRange${newShadowId}" min="-100" max="100" value="0">
    </div>
    <div>
      <label>Vertical Offset:</label>
      <input type="range" id="verticalRange${newShadowId}" min="-100" max="100" value="0">
    </div>
    <div>
      <label>Blur:</label>
      <input type="range" id="blurRange${newShadowId}" min="0" max="100" value="0">
    </div>
    <div>
      <label>Spread:</label>
      <input type="range" id="spreadRange${newShadowId}" min="-50" max="50" value="0">
    </div>
    <div>
      <label>Color:</label>
      <input type="color" id="colorInput${newShadowId}" value="#000000">
    </div>
  `;

  // Add the new controls to your UI container
  document.getElementById('shadowControls').appendChild(controlGroup);

  // Bind event listeners to the new controls
  [newShadow.horizontalValue, newShadow.verticalValue, newShadow.blurValue, newShadow.spreadValue, newShadow.colorValue].forEach(id => {
    document.getElementById(id).addEventListener('input', getRangeValue);
  });

  // Update the shadow effect immediately
  getRangeValue();
});

3. Initialize Your First Shadow Layer #

Don't forget to bind event listeners to your initial shadow controls so they work on load:

// Initialize first shadow
shadowObjContainer.push(new Shadow(1));
const firstShadow = shadowObjContainer[0];

// Bind events to initial controls
[firstShadow.horizontalValue, firstShadow.verticalValue, firstShadow.blurValue, firstShadow.spreadValue, firstShadow.colorValue].forEach(id => {
  document.getElementById(id).addEventListener('input', getRangeValue);
});

How It Works #

• Every time any shadow control (slider or color picker) is adjusted, getRangeValue runs, collects parameters from all shadow layers, combines them with commas, and applies the full string to box-shadow.
• When you click "Add New Shadow Layer", a new Shadow instance is created, UI controls are generated, and events are bound—so the new layer is automatically included in the combined shadow effect.

This setup will let you replicate that multi-layer shadow example you shared:

box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

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