เอาใหม่ ใช้ได้

from below code please do
1.generate a random time between 25-35 seconds for the countdown
2.add a countdown timer to the delay time :
<div id="animation-container">
        <!-- Put your animation HTML/CSS code here -->
        <p>Loading animation...</p>
    </div>
<form>
...
</form>
    <div id="timer-container">
        <!-- Display the random delay time here -->
    </div>
<script>
// Select the animation, form, and timer containers
const animationContainer = document.getElementById('animation-container');
const formContainer = document.getElementById('form-container');
const timerContainer = document.getElementById('timer-container');

// Generate a random delay time between 20 and 40 seconds
const delayTime = Math.floor(Math.random() * (40000 - 20000 + 1)) + 20000;

// Display the random delay time to the user
timerContainer.innerText = `The form will appear in ${delayTime/1000} seconds.`;

// Wait for the random delay time before showing the form
setTimeout(() => {
    // Hide the animation container
    animationContainer.style.display = 'none';
    // Show the form container
    formContainer.style.display = 'block';
}, delayTime);
</script>

Here’s the modified code that includes a random countdown timer between 25-35 seconds:

<div id="animation-container">
  <!-- Put your animation HTML/CSS code here -->
  <p>Loading animation...</p>
</div>

<form id="form-container" style="display: none;">
  <!-- Your form HTML code here -->
</form>

<div id="timer-container">
  <!-- Display the random delay time and countdown timer here -->
</div>

<script>
  // Select the animation, form, and timer containers
  const animationContainer = document.getElementById('animation-container');
  const formContainer = document.getElementById('form-container');
  const timerContainer = document.getElementById('timer-container');

  // Generate a random delay time between 25 and 35 seconds
  const delayTime = Math.floor(Math.random() * (35000 - 25000 + 1)) + 25000;

  // Display the random delay time and countdown timer to the user
  let countdown = delayTime / 1000;
  timerContainer.innerText = `The form will appear in ${countdown} seconds.`;
  const intervalId = setInterval(() => {
    countdown--;
    if (countdown <= 0) {
      clearInterval(intervalId);
      timerContainer.innerText = '';
      return;
    }
    timerContainer.innerText = `The form will appear in ${countdown} seconds.`;
  }, 1000);

  // Wait for the random delay time before showing the form
  setTimeout(() => {
    // Hide the animation container
    animationContainer.style.display = 'none';
    // Show the form container
    formContainer.style.display = 'block';
  }, delayTime);
</script>

In the modified code, the delay time is generated between 25-35 seconds by adjusting the minimum and maximum values in the Math.floor(Math.random() * (35000 - 25000 + 1)) + 25000 expression.

Then, a countdown variable is initialized to the delay time divided by 1000 (to get the number of seconds), and an interval is set up to decrement this variable by 1 every second. The countdown timer is displayed to the user along with the random delay time.

Once the delay time has elapsed, the interval is cleared, the countdown timer is removed from the display, the animation container is hidden, and the form container is shown.