Ir al contenido principal

JavaScript para crear un contador descendente

 Hola en la publicación de hoy les comparó como podemos hacer un cont down o contador descendente para algún evento importante, por ejemplo yo lo voy a poner para la llegada del segundo aniversario de este blog 😋 que es el 27 de abril.

Entonces para hacer un contador necesitamos una variable para la fecha objetivo, otro el dato de fecha actual, utilizar la función Math para hacer la resta y preparar nuestra página vamos a utilizar JavaScript para hacer la función 


    <script>

    var varobjetivo = new Date("April 27, 2021 00:00:002").getTime();

    var contdown = setInterval(function() {

    var now = new Date().getTime();

    var timeleft = varobjetivo - now;

    var days = Math.floor(timeleft / (1000 * 60 * 60 * 24));

    var hours = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

    var minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));

    var seconds = Math.floor((timeleft % (1000 * 60)) / 1000);

        

    document.getElementById("dias").innerHTML = days + "d "

    document.getElementById("houras").innerHTML = hours + "h " 

    document.getElementById("mins").innerHTML = minutes + "m " 

    document.getElementById("secs").innerHTML = seconds + "s " 

        

    if (timeleft < 0) {

        clearInterval(myfunc);

        document.getElementById("dias").innerHTML = ""

        document.getElementById("houras").innerHTML = "" 

        document.getElementById("mins").innerHTML = ""

        document.getElementById("secs").innerHTML = ""

 document.getElementById("end").innerHTML = "¡¡Feliz Aniversario ProgramacionParatodos.com!!";

    }

    }, 1000);

    </script>

En este ejemplo utilice un poco de CSS para agregar formato a las letras y agregamos una imagen de fondo, CSS es para poder generar estilos de formatos en nuestras páginas WEB y hacerlas más bonitas. 



<style>
body {
   background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6MJHt5NjpmpsuNaEU68hg2Oei58tfiuXPMWzpV5RhbuZsRxCjkyr45p_lsvtMhMWn5fj17yhVjq7UffEDLTCJueJTwQKG6H7swKE1SSbCpdxKPDGvpNCsuP-rfx6XyISbeSdg2zwi1dQ/s320/Second.png");
   background-repeat: no-repeat;
   background-position: 25% 100%;
}
center {
   text-align: center;
  font-size: 40px;
  color: #FE7F88;
}
</style>

Código de la página

<!DOCTYPE HTML>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {

   background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6MJHt5NjpmpsuNaEU68hg2Oei58tfiuXPMWzpV5RhbuZsRxCjkyr45p_lsvtMhMWn5fj17yhVjq7UffEDLTCJueJTwQKG6H7swKE1SSbCpdxKPDGvpNCsuP-rfx6XyISbeSdg2zwi1dQ/s320/Second.png");

   background-repeat: no-repeat;

   background-position: 25% 100%;

}

center {

   text-align: center;

  font-size: 40px;

  color: #FE7F88;

}

</style>

</head>

<body>

    <center> Faltan solo  </center>

    <center id="dias"></center>

    <center id="houras"></center>

    <center id="mins"></center>

    <center id="secs"></center>

    <h2 id="end"></h2>

    <script>

    

    var varobjetivo = new Date("April 27, 2021 00:00:002").getTime();


    

    var contdown = setInterval(function() {


    var now = new Date().getTime();

    var timeleft = varobjetivo - now;

        

    // Calculating the days, hours, minutes and seconds left

    var days = Math.floor(timeleft / (1000 * 60 * 60 * 24));

    var hours = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

    var minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));

    var seconds = Math.floor((timeleft % (1000 * 60)) / 1000);

        

    // Result is output to the specific element

    document.getElementById("days").innerHTML = days + "d "

    document.getElementById("hours").innerHTML = hours + "h " 

    document.getElementById("mins").innerHTML = minutes + "m " 

    document.getElementById("secs").innerHTML = seconds + "s " 

        

    // Display the message when countdown is over

    if (timeleft < 0) {

        clearInterval(myfunc);

        document.getElementById("days").innerHTML = ""

        document.getElementById("hours").innerHTML = "" 

        document.getElementById("mins").innerHTML = ""

        document.getElementById("secs").innerHTML = ""

 document.getElementById("end").innerHTML = "¡¡Feliz Aniversario ProgramacionParatodos.com!!";

    }

    </script>

</body>

</html>


La página se ve de la siguiente forma

La liga es https://ejemploprogramacionparatodos.000webhostapp.com/contadordescente.html

Otra versión pude ser para el cumpleaños de algún familiar, amig@, persona especial, etc..



https://ejemploprogramacionparatodos.000webhostapp.com/cuantosdiasfaltanparamicumpleanosd.html

Si quisieran pueden adaptar la pagina para que lea un dato de entrada para la fecha y sobre ese haga el contador, modificar el formato. Para hacer la pagina solo utilice un editor de Texto e ingresar el código. 


No olvides compartirnos y seguirnos en este blog o en Facebook.

Comentarios

Entradas más populares de este blog

Graficar funciones en Python con dataframes

Bienvenidos a un nuevo post, en esta semana, en esta ocasión les quiero platicar acerca de una librería en Python que se llama  matplotlib  que nos sirve para gráfica funciones de  matemáticas. Habitualmente en Python existen muchas librerías, lo que hay que hacer es primero investigar si ya existe alguna que nos ayude y entenderla antes de inventar el hilo negro, en mi caso encontré la librería  Matplotlib Para instalar deben utilizar el comando PIP en 2.7 Instalando en Python 3.7 Si tienen Python 2.7 deben realizar la ejecución de estos 2 comandos desde consola python -m pip install -U pip python -m pip install -U matplotlib Aunque lo más recomendable es utilizar la versión 3.7 o superior de Python. Programa para graficar en Python import matplotlib.pyplot as plt import numpy as np import math as mt def move_spines():     """Esta funcion divide pone al eje y en el valor      0 de x para dividir claramente los valores positivos y     negativos.&quo

Ejemplo Macro en Word

Hola: ¿Sabían que no solo en Excel pueden hacer Macros?  ¡¡¡También en Outlook, Word, Power Point,Access  es posible hacer Macros!!!  ☺️ Ya que Word, Excel, Power Point,Access son de familia Microsoft y Visual Basic también es que podemos programar nuestras macros en esta paquetería. Como hemos visto antes, para poder programar nuestras macros, necesitamos primero configurar la Barra de tareas de Developer o Desarrollador Seleccionan el Menu File>Options>Customize Ribbon o en Español Archivo>Opciones>barra de tareas Despues la parte de seguridad de las macros Menu File>Options>Trus Center o Archivo>Opciones>Centro de Seguridad y marcamos como se ve en la imagen, la cuarta opción y el combo Ejemplo Vamos hacer un ejemplo donde, tengamos que generar varios diplomas de fin de curso, pero con una lista de Nombres , entonces vamos a crear un nuevo archivo en Word y le vamos a guardar como tipo Macro  Tenemos una plantill

Ejemplo Python para leer imagen y transformarla en una matriz

Como hemos visto en otros post, Python nos permite hacer programas de manera más rápida, en esta ocasión quiero compartirles un ejemplo para leer un archivo de imagen y como convertirlo en una matriz o un arreglo. Aplicaciones Poder hacer ingeniería de datos, es decir poder convertir una misma imagen en diferentes todos y utilizarlos para machine learning para reconocimiento de gatos, para ello hay que mostrar muchas imágenes a nuestro modelo es decir entrenarlo, para ello hay que colocarle imágenes claras y imagenes que no sean tan claras por ejemplo, se pone la imagen original y se agrega "ruido" para que se vea en rojos, grises, verdes. Se pudo utilizar para un mapa , para poder ver datos a detalle Se puede aplicar para manipular imágenes, por ejemplo agregar efectos  Seguramente a ustedes se les pueden ocurrir más aplicaciones Les comparto el ejemplo de como hacerlo en Jupiter y para hacer el ejemplo voy a utilizar el logo del blog es una imagen de 500x500 pixeles Los Pas