es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo se muestra la salida de un script de temporizador de cuenta regresiva en código HTML?

¿Cómo se muestra la salida de un script de temporizador de cuenta regresiva en código HTML?

19 Jun, 2023 Programación

Estoy tratando de averiguar cómo mostrar la salida de este script de temporizador que encontré en línea dentro de otro script. Aquí está el script del temporizador que encontré:

// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

Quiero poder mostrar el temporizador donde puse “Quiero mostrar el temporizador aquí”.

<div class="flash-infos">   
    <div class="flash-info">
      <font color="white" ;="" font="" size="2;"><b>Quiero mostrar el temporizador aquí</b></font> <center>
    </center></div>    
  </div>
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar el script del temporizador en la ubicación especificada, simplemente puede copiar y pegar todo el script dentro de la etiqueta

    <

    div class=”flash-info”>, así:

    <div class="flash-infos">   
  <div class="flash-info">
    <font color="white" ;="" font="" size="2;"><b>"Quiero mostrar el temporizador aquí"</b></font> 
    <center>
      <!-- Mostrar el temporizador de cuenta regresiva en un elemento -->
      <p id="demo"></p>
      <script>
        // Establecer la fecha a la que estamos haciendo la cuenta regresiva
        var countDownDate = new Date("5 de enero de 2022 15:37:25").getTime();

        // Actualizar la cuenta regresiva cada 1 segundo
        var x = setInterval(function() {

          // Obtener la fecha y hora actual
          var now = new Date().getTime();

          // Encontrar la distancia entre la fecha y hora actual y la fecha de cuenta regresiva
          var distance = countDownDate - now;

          // Cálculos de tiempo para días, horas, minutos y segundos
          var days = Math.floor(distance / (1000 * 60 * 60 * 24));
          var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
          var seconds = Math.floor((distance % (1000 * 60)) / 1000);

          // Mostrar el resultado en el elemento con id="demo"
          document.getElementById("demo").innerHTML = days + "d " + hours + "h "
          + minutes + "m " + seconds + "s ";

          // Si la cuenta regresiva ha terminado, escribir algún texto
          if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRADO";
          }
        }, 1000);
      </script>
    </center>
  </div>    
</div>

    Esto mostrará el temporizador de cuenta regresiva en la ubicación especificada dentro del código HTML.

Comments are closed.