• March 12, 2023

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

    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.



เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories