使用setInterval实现的JavaScript彗星下落动画无法正常运行

Let's break down why your comet animation isn't working and fix it step by step:

Key Issues in Your Current Code #

• You never call the initialization function: The cometScene() function creates the comet element, but you haven't executed it anywhere. That means document.getElementById('cometio') in cometMove() will return null—there's no element to animate at all.
• Incomplete scene function: Your code cuts off at function sc...—the interval tries to run a scene function that's either missing or has no logic to update the comet's position.
• Missing positioning styles: The comet element (#cometio) doesn't have CSS positioning set (like position: absolute). Without this, changing position values won't affect its on-screen location.
• No position update logic: Even if the scene function existed, there's no code to increment the position value and apply it to the comet element to make it move.

Fixed & Complete Code Example #

First, add CSS to style the comet for proper positioning:

#cometio {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* Center the comet horizontally */
}

Then update your JavaScript with all necessary logic:

// Initialize comet element
var cometScene = function(){ 
  var b = document.createElement('div'); 
  b.id = 'cometio'; 
  var cometImage = document.createElement('img'); 
  cometImage.setAttribute('src', 'images/comet1.png'); 
  b.appendChild(cometImage); 
  document.getElementById('wrap').appendChild(b); 
};

// Run initialization first to create the comet element!
cometScene();

// Animation function
function cometMove(){ 
  var comet = document.getElementById('cometio'); 
  if (!comet) return; // Guard against missing element to avoid errors
  
  var pos = 0; 
  var interval = setInterval(scene, 3); 

  function scene(){
    // Increment position to make the comet fall downward
    pos += 1;
    // Apply the updated position to the comet
    comet.style.top = pos + 'px';
    
    // Optional: Stop animation when comet leaves the screen
    if (pos > window.innerHeight) {
      clearInterval(interval);
    }
  }
}

// Start the animation
cometMove();

Explanation of Fixes #

1. Called initialization: We run cometScene() before cometMove() to ensure the comet element exists when we try to animate it.
2. Completed scene function: Added logic to increment the pos variable and apply it to the comet's top style, creating the falling motion.
3. Added CSS positioning: The position: absolute lets us control the comet's position with top/left styles, which is required for movement animations.
4. Added guard clause: The if (!comet) return prevents console errors if the element can't be found for any reason.
5. Optional stop condition: Clears the interval when the comet goes off-screen to avoid unnecessary background calculations.

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