1

NOTA: Esta pregunta está inspirada en la conversación que derivó en esta pregunta Cuenta atrás para respuesta de formulario en Google App Script. Pretendo publicar una respuesta más tarde pero son más que bienvenidas las respuestas de otros pues no me considero experto en este tema y seguramente puedo aprender mucho de los aportes de otros.

Encontré un código que hace un cuenta atrás con JavaScript. Quiero insertar ese código o uno similar en el cuerpo del mensaje de un correo electrónico que estoy generando usando Google Apps Script. Los destinatarios del mensaje en su mayoría son usuarios de Gmail por lo que en primera instancia me interesa que al menos funciones para ellos, pero lo ideal sería que funcionara en el cliente de correo de cualquier destinatario.

A continuación incluyo el código referido arriba el cual ha sido tomado de la respuesta a Cuenta atrás en página

//Asignas la fecha a una variable
var countDownDate = new Date("Sep 22, 2018 00:00:00").getTime();

// Intervalo de 1 segundo
var x = setInterval(function() {

  // Obtenemos la fecha actual
  var now = new Date().getTime();

  // Chequeamos la distancia entre la fecha que pretendemos y la de hoy
  var distance = countDownDate - now;

  // Calculamos días, horas, minutosy 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);

  // Mostramos el resultado en el <p> con id 'demo'
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // Si terminó el tiempo, cambiamos el texto
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Llego la boda!!!";
  }
}, 1000);
p{
font-size: 30px;
}
<p id="demo"></p>

A continuación un ejemplo abreviado del código para enviar un correo con Google Apps Script donde el cuenta atrás debería mostrarse en #demo (la etiqueta p con demo como id)

function enviarCorreo(){
  var destinatario = '[email protected]';
  var asunto = 'Cuenta atrás';
  var textoPlano= 'Se requiere un cliente que soporte HTML';
  var contenidoHTML= '<h1>Cuenta atrás</h1>' +
             '<p id="demo"></p>'
  MailApp.sendEmail({
     to:destinatario, 
     body:textoPlano,
     subject:asunto, 
     htmlBody:contenidoHTML
  });  
}

He intentado poner el código JavaScript entre etiquetas script pero el mensaje recibido por los usuarios de Gmail no lo incluye dentro de la variable contenidoHTML, además la etiqueta p se muestra de la forma siguiente

<p id="m_-6032521278457146316demo"></p>

A continuación el código completo de mi intento

function enviarCorreo(){
  var destinatario = '[email protected]'; // reemplazar por una dirección de correo real
  var asunto = 'Cuenta atrás';
  var textoPlano= 'Se requiere un cliente que soporte HTML';
  var contenidoHTML= '<h1>Cuenta atrás</h1>' +
             '<p id="demo"></p>' +
             '<script>' +
                //Asignas la fecha a una variable' +
                'var countDownDate = new Date("Sep 22, 2018 00:00:00").getTime();' +

                '// Intervalo de 1 segundo' +
                'var x = setInterval(function() {' +

                  '// Obtenemos la fecha actual' +
                  'var now = new Date().getTime();' +

                  '// Chequeamos la distancia entre la fecha que pretendemos y la de hoy' +
                  'var distance = countDownDate - now;' +

                  '// Calculamos días, horas, minutosy 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);' +

                  '// Mostramos el resultado en el <p> con id \'demo\'' +
                  'document.getElementById("demo").innerHTML = days + "d " + hours + "h "' +
                      '+ minutes + "m " + seconds + "s ";' +

                  '// Si terminó el tiempo, cambiamos el texto' +
                  'if (distance < 0) {' +
                  '  clearInterval(x);' +
                  '  document.getElementById("demo").innerHTML = "Llego la boda!!!";' +
                  '}' +
                '}, 1000);' +
              '</script>'
  MailApp.sendEmail({
     to:destinatario, 
     body:textoPlano,
     subject:asunto, 
     htmlBody:contenidoHTML
  });  
}

Relacionado

1 respuesta 1

2

Gmail no admite JavaScript en los correos entrantes por motivos de seguridad, lo mismo ocurre en otros clientes de correo electrónico modernos. Una alternativas es usar un cuenta atrás hecho con CSS.

Como evidencia de que es posible hacer un cuenta atrás con CSS abajo incluyo un código tomado de la respuesta aceptada a How to create a countdown clock with CSS. Habla de minutos en lugar de fechas pero como prueba de concepto me parece que basta.

ol.tens, .digits, .first {
  list-style-type: none;
  margin:0;
  padding:3px;
  position: relative;
  display: inline-block;
}
ol.first {
  margin-right: 12px;
}
.tens li, .digits li, .first li {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
}
.first li:nth-of-type(2) {
  animation: minutecount 60s ease-in-out 0s 1;
}

.tens li:nth-of-type(1) {
  animation: tenscount 60s ease-in-out 51s 1;
}
.tens li:nth-of-type(2) {
  animation: tenscount 60s ease-in-out 41s 1;
}
.tens li:nth-of-type(3) {
  animation: tenscount 60s ease-in-out 31s 1;
}
.tens li:nth-of-type(4) {
  animation: tenscount 60s ease-in-out 21s 1;
}
.tens li:nth-of-type(5) {
  animation: tenscount 60s ease-in-out 11s 1;
}
.tens li:nth-of-type(6) {
  animation: tenscount 60s ease-in-out 1s 1;
}
.tens li:nth-of-type(7) {
  animation: tenscount 60s ease-in-out 0s 1;
}


.digits li:nth-of-type(1) {
  animation: digitcount 10s ease-in-out 10s 6;
}

.digits li:nth-of-type(2) {
  animation: digitcount 10s ease-in-out 9s 6;
}

.digits li:nth-of-type(3) {
  animation: digitcount 10s ease-in-out 8s 6;
}

.digits li:nth-of-type(4) {
  animation: digitcount 10s ease-in-out 7s 6;
}

.digits li:nth-of-type(5) {
  animation: digitcount 10s ease-in-out 6s 6;
}

.digits li:nth-of-type(6) {
  animation: digitcount 10s ease-in-out 5s 6;
}

.digits li:nth-of-type(7) {
  animation: digitcount 10s ease-in-out 4s 6;
}

.digits li:nth-of-type(8) {
  animation: digitcount 10s ease-in-out 3s 6;
}

.digits li:nth-of-type(9) {
  animation: digitcount 10s ease-in-out 2s 6;
}

.digits li:nth-of-type(10) {
  animation: digitcount 10s ease-in-out 0.7s 6;
}

@keyframes digitcount {
  0% {
    opacity: 1
  }
  9.9% {
    opacity: 1
  }
  10% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

@keyframes tenscount {
  0% {
    opacity: 1
  }
  0.9% {
    opacity: 1
  }
  2% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
@keyframes minutecount {
  0% { opacity: 1; }
  2.8% { opacity: 1; }
  2.9% { opacity: 0; }
  100% { opacity: 0; }
}
<div class="clock">
  <ol class="first">
    <li>00:</li>
    <li>01:</li>
  </ol>
  <ol class="tens">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>0</li>
 </ol>
 <ol class="digits">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>0</li>
 </ol>
</div>

Referencias

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.