Mostrar un Mensaje en Una Determinada Fecha con Javascript (Con Imagen)

5 minuto(s)

Demo Github

JavaScript nos permite trabajar con diferentes elementos del cliente, también con el servidor, per ese es tema para otro Post. En cuanto al cliente podemos usar su fecha y manipularla para crear alguna funcionalidad o aplicación. En este tutorial te enseñaré a como mostrar un mensaje en una determinada fecha, es decir un día, mes y año con el genial Lenguaje de Programación JavaScript, vamos entonces con ello. 

Antes de continuar te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “En Cuanto Tiempo Puedo Ser Un Buen Programador ?” y “Ventajas y Desventajas de Usar 2 o Más Monitores Para un Desarrollador” (Anchor Podcast): 

Spotify SoundCloud Apple Podcasts Anchor Podcasts

Y también te recomiendo estudiar el Curso JavaScript desde 0 que es 100 % Gratuito, cuenta con mas de 70 videos a tu disposición:

En el curso de JavaScript conocerás todas las nociones técnicas de este Lenguaje el cual es uno de los más usados en el mundo. 

Bien ahora continuemos con el Post: Mostrar un Mensaje en Una Determinada Fecha con Javascript (Con Imagen). 

Mostrar un Mensaje en Una Determinada Fecha con Javascript (Con Imagen)

Creo una función en JavaScript llamada saludoFestividad(), tu le puedes colocar el nombre que desees a tu función:


Dentro de la función creo una variable llamada fechaHoy y dentro de ella agrego el objeto Date() que obtiene la fecha, hora, zona horaria, etc. Por ejemplo me devuelve: Wed Jun 29 2022 14:49:02 GMT-0500 (hora estándar de Perú). Pero como yo solo quiero la fecha entonces hago uso del método toISOString() y slice() y solo extraería la fecha en este formato por ejemplo: 2022-06-2022. La idea es tratar a la fecha como un string o texto y luego compararlo con una fecha festiva determinada también de tipo string o texto y mostrar un mensaje.


Ahora colocamos la fecha formateada en una nueva variable llamada soloFechaHoy, recuerda que tu les puedes poner el nombre de variable que desees. Debajo definimos las fechas festivas o las fechas en donde se debe mostrar el mensaje.


Paso seguido hacemos la verificación de las fechas y mostramos un determinado mensaje en el elemento con id “mensajesaludo” y una imagen en el elemento con name “imagensaludo”. Tu puedes definir las fechas que desees, incluso llamarlas desde una base de datos. Para este ejemplo yo he definido 2 fechas, estas son navidad y año nuevo. Asimismo para este tutorial estoy verificando si la fecha es igual a la misma fecha actual de Hoy para mostrar un mensaje rápidamente y no esperar a que llegue navidad o año nuevo.


Bien eso fue el código JavaScript, ahora en nuestro codigo HTML llamamos a la función saludoFestividad(); en el atributo de evento onload=” “ para mostrar el saludo, lo llamamos en la etiqueta <body> y también creamos el elemento con id “mensajesaludo” y el elemento <img> con name “imagensaludo”


Si voy al navegador, puedo ver sin problemas el saludo para el día de hoy, recuerda que este tutorial lo hice en el mes de junio y para navidad o año nuevo falta mucho, entonces el código JavaScript verificará la fecha de hoy y mostrará el mensaje “Hoy 2022-06-29 es un día Genial !” con su respectiva imagen. 

Nota: Recuerda que la idea es tratar las fechas como strings o texto, y compararlos, no importa el formato, pero si deseas puedes formatear la fecha como desees.

Bien hasta aquí este tutorial, al inicio he colocado una Demo y el código fuente del proyecto alojado en GitHub.

Conclusión

En este tutorial has aprendido a mostrar un mensaje en una determinada fecha, recuerda que puedes también añadirle la hora, minuto y segundo, solo tratalos como strings o texto.

Nota (s)

  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.