页面主体无法调用main.js中JavaScript函数问题咨询

Hey there, let’s troubleshoot why your clockDown and timer functions aren’t being called properly from your page body. I’ll walk through the most common issues and fixes based on the code you shared:

1. Fix Function Scope Issues #

If your functions are wrapped inside a closure (like jQuery’s $(function(){...}) ready callback or an IIFE), they’ll only be accessible inside that closure—not globally from your page body. That’s a super common gotcha!

Problem example:

// Functions are trapped in the jQuery ready closure
$(function() {
  function clockDown(scs,ids){ /* ... */ }
  function timer(seconds){ /* ... */ }
});

Fix: Expose the functions to the global window object so your page can access them:

$(function() {
  window.clockDown = function(scs,ids){ 
      var countdownTimer = setInterval(function(){ 
          $(".trf_"+ids).html(timer(scs)); 
          scs--;
          // Optional: Stop the timer when it hits 0
          if (scs < 0) clearInterval(countdownTimer);
      }, 1000); 
  };

  window.timer = function(seconds){ 
      var days = Math.floor(seconds/24/60/60); 
      var hoursLeft = Math.floor(seconds - (days*86400)); 
      var hours = Math.floor(hoursLeft/3600); 
      var minutesLeft = Math.floor(hoursLeft - (hours*3600)); 
      var minutes = Math.floor(minutesLeft/60); 
      var remainingSeconds = seconds % 60; 

      // Complete the function (yours cuts off mid-code!)
      // Add leading zeros for clean formatting
      days = days.toString().padStart(2, '0');
      hours = hours.toString().padStart(2, '0');
      minutes = minutes.toString().padStart(2, '0');
      remainingSeconds = remainingSeconds.toString().padStart(2, '0');

      return `${days}d ${hours}h ${minutes}m ${remainingSeconds}s`;
  };
});

2. Load Scripts in the Right Order #

If your main.js loads after the code that tries to call clockDown, the functions won’t exist yet when the call happens.

Correct setup:

<!-- Load jQuery first (since your code uses $) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Load main.js next -->
<script src="main.js"></script>
<!-- Now call the function -->
<script>
  // Example: Start a 1-hour countdown for element with class trf_countdown1
  clockDown(3600, "countdown1");
</script>

If you put scripts in the <head>, use the defer attribute to ensure they load after the page content:

<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" defer></script>
  <script src="main.js" defer></script>
</head>
<body>
  <div class="trf_countdown1"></div>
  <script>
    clockDown(3600, "countdown1");
  </script>
</body>

3. Fix the Incomplete timer Function #

Your timer code cuts off at if (remainin...—this will throw a syntax error that breaks the entire script. You need to finish this section to format the timer output correctly (I included a basic formatted return in the fix above, but adjust it to match your needs).

4. Verify jQuery is Loaded #

Since your code uses $ (jQuery’s shorthand), if jQuery isn’t loaded before main.js, you’ll get a $ is not defined error. Double-check that your jQuery script tag comes first, as shown in the order example above.

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