cuenta regresiva en ventana web de google sheets

como crear una ventana web para mostrar una cuenta regresiva en Google sheets

Este aporte usara:

HTML
CSS
Javascript y
HTML Service de Google apps script

por lo que si no estas familiarizado, te recomiendo que visites mi lista de reproducción:

donde podrás encontrar más ejercicios para revisar y adentrarte en este fascinante mundo 😊

Mi consejo

si bien es cierto que copia r y pegar código es mas fácil y rápido, no es algo que yo podría aconsejar para aquellas personas que están empezando a programar en Google apps script, sino todo lo contrario, recomiendo encarecidamente que tecles cada línea de código para que vayas familiarizándote con los términos, las clases y métodos que se usan y la forma correcta de hacer referencia a ellos.

otro extra.- también te sugiero que el ejemplo lo desarrolles tal cual, para evitar el problema de las adaptaciones, una vez que hayas reproducido con éxito el ejemplo, puedes iniciar la segunda fase, que es realizar tus modificaciones y adaptaciones pertinentes.

No es que este garantizado el éxito con este método que te propongo, pero sin duda te dará una mejor plataforma para saber las posibles causas o el por que no funciona el código en tu adaptación

lo que vamos a necesitar será:

un archivo gs o Google script donde escribiremos nuestras 2 funciones que se ocuparan a saber
una función onOpen.- para mostrar un menu personalizado desde el cual ejecutar el código
una función para mostrar la ventana web con la cuenta regresiva
un archivo HTML con el contenido en estilos CSS, HTML y Javascript que hagan funcionar el reloj de cuenta regresiva

En la imagen de arriba 👆 podemos ver la función onOpen y el script para mostrar la ventana web en la interfaz de Google Sheets

en la imagen , podemos ver los estilos CSS que fueron aplicados al archivo HTML

si requieres hacer un copiado y pegado, puedes ir a la sección final de este articulo, donde encontraras un texto con el encabezado que puedes expandir para ver su contenido😊

en esta sección tienes una vista parcial del html y javascript que componen el archivo "añonuevo.html"

nota.-recomiendo cambiar la función añonuevo que esta junto a la función onOpen por anionuevo, esto fue una prueba que hice en el antiguo editor de código para ver como se comportaba el nombre de la función y ver si me daba problemas, como no obtuve problemas así la deje , pero ahora con el nuevo editor veo que me marca la letra "ñ" en rojo, así que recomiendo ese cambio

ver Vídeo

si el tema fue de utilidad comparte este articulo con otras personas, nos ayudarías mucho haciendo difusión de estas propuestas 😉

y suscríbete a mi canal de YouTube

👉 más temas de HCG

codigo GS para crear la cuenta regresiva

function onOpen() {

SpreadsheetApp.getUi()

.createMenu('⏲ Cuenta Regresiva')

.addItem('🎉 año nuevo', 'añoNuevo')

.addToUi();

}

function añoNuevo(){

var html = HtmlService.createHtmlOutputFromFile('añonuevo')

.setHeight(140)

.setWidth(590);

SpreadsheetApp.getUi().showModelessDialog(html, '⏳ Tiempo Restante para el 2021:') //.showSidebar(html);

}

codigo html, css y javascript

<!DOCTYPE html>

<html>

<head>

<style>

#contador,#msg{

font-family: Verdana;

margin-top:10px;

font-size: 22px;

color: #ffffff;/*blancas*/

border-width: 0;

background-color: #000077;/*azul*/

text-align: center;/*right;*/

padding:15px;

width:95%;

border-radius:16px 16px 0 0;/*4px;*/

}

#msg{

color:blue;

background-color: yellow;

//display:none;

visibility:hidden;

border-radius:0 0 16px 16px;

margin-top:0px;

}

</style>

</head>

<body>

var fin = new Date('12/31/2020 12:00 AM');

//var fin = new Date('12/27/2020 8:35 PM');

var segundo = 1000;

var minuto = segundo * 60;

var hora = minuto * 60;

var dia = hora * 24;

var timer;

function verRestante() {

var now = new Date();

var diferencia = fin - now;

if (diferencia < 0) {

clearInterval(timer);

document.getElementById('contador').innerHTML = 'FELIZ AÑO NUEVO! 🎉🎇🎆';

document.getElementById('msg').style.visibility = "visible";

//document.getElementById('msg').style.display = "inline-block";

document.getElementById('msg').innerHTML = '📆 Les desea Ofimática para Emprendedores!!😎';

document.getElementById('contador').style.backgroundColor = "yellow";

document.getElementById('contador').style.color= "blue";

return;

}

var days = Math.floor(diferencia / dia);

var hours = Math.floor((diferencia % dia) / hora);

var minutes = Math.floor((diferencia % hora) / minuto);

var seconds = Math.floor((diferencia % minuto) / segundo);

document.getElementById('contador').innerHTML = days + ' dias, ' + hours + ' horas, ' +

minutes + ' minutos y ' + seconds + ' segundos';

}

timer = setInterval(verRestante, 1000);

</script>

</body>

</html>

Síguenos y suscríbete en:

Page updated

Google Sites

Report abuse