En este tutorial, aprenderemos a usar y editar una plantilla de cuenta regresiva para mostrarla en nuestro player.
Nota: Recomendamos utilizar un editor de código como VS Code para realizar ajustes en el código sin afectar la plantilla.
- Descargar y descomprimir: Descargue el archivo .zip adjunto y descomprímalo en su equipo.
- Al descomprimir el archivo, encontrará un archivo llamado index y una carpeta llamada src.
- Abra el archivo index con su editor de texto. En este tutorial, estoy utilizando VS Code.
- En la línea 17 del código, donde dice titulo, puedes reemplazar "contagem regressiva" por el título principal que deseas que aparezca en la plantilla.
- Ahora, guarda los cambios. Puedes presionar Ctrl + S o hacer clic en la pestaña superior "File" y luego en "Save".
- Abre la carpeta src
- Verás una imagen llamada background con un tamaño de 1920x1080. Puedes reemplazarla por otra imagen simplemente colocando la nueva en su lugar y asegurándote de que tenga el mismo nombre background y esté en formato .jpg.
Para cambiar la animación que aparece al finalizar la cuenta regresiva, puedes hacer lo mismo con la imagen fogos.gif. Asegúrate de que la nueva imagen también esté en formato .gif y tenga el mismo nombre.
- Abre el archivo script.js con el editor de código.
- En la línea 9, reemplaza 2025 con el año en el que ocurrirá el final de la cuenta regresiva.
En la línea 10, cambia January por el mes en el que terminará la cuenta regresiva. Asegúrate de que el nombre del mes esté en inglés con la primera letra en mayúscula.
En el campo 00:00:00, ingresa la hora, minuto y segundo en los que finalizará la cuenta regresiva.
- En la línea 35, donde dice felicidades, puedes reemplazar la frase por el mensaje que deseas que aparezca al final de la cuenta regresiva. Es importante que no elimines las comillas '' alrededor del texto.
- Ahora, guarda los cambios. Puedes presionar Ctrl + S o hacer clic en la pestaña superior "File" y luego en "Save".
- Compacta la carpeta src y el archivo index.html.
- Sube el archivo .zip creado al 4yousee Manager como un contenido normal. Luego, colócalo dentro de la playlist del player donde deseas mostrar la cuenta regresiva.