[GS] - Compte a Rebours dans une Boite de dialogue

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('** Compte à Rebours **')
    .addItem('Compte à Rebours', 'car')
    .addToUi();
}

La fonction onOpen crée un menu qui contient la fonction car qui déclenche l'ouverture de la boite de dialogue.

  const html = HtmlService
    .createTemplateFromFile('cr')
    .evaluate()
    .setWidth(500)
    .setHeight(785);
  SpreadsheetApp.getUi().showModelessDialog(html, 'Compte à Rebours');

Dans cette portion de code, la constante html contient le lien vers le fichier html, la commande qui fait que l'on ne peut pas modifier la feuille pendant que la boite de dialogue est ouverte. Width et Height définit la largeur et la hauteur de la boite de dialogue, quand à SpreadsheetApp.getUi().showModelessDialog(html, 'Compte à Rebours'); ouvre la boite de dialogue dans le classeur est donne le titre en haut.

La structure du fichier html est très importante.

Le css:

<style>
        body{ margin:0;overflow: hidden;font-family:Arial}
        .box-rebours{ height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; }
        .box_jour, .box_heure, .box_minute, .box_seconde { padding: 10px; }
        #jour, #heure, #minute, #seconde { background:black; padding: 10px 20px; color: white; font-size: 3rem; font-weight: bold; }
        #jour_label, #heure_label, #minute_label, #seconde_label { font-size: 1.5rem; }
</style>

Les . sont des sélecteurs css pour les attributs class , quand au # sont pour les id .

Les attributs padding définit la marge en px (pixels), color la couleur du texte, font-size la taille et background et un raccourci de background-color qui définit la couleur d'arrière plan.

Le squelette html:

<div class="box-rebours">       
        <div class="box_jour">
            <div id="jour">00</div>
            <span id="jour_label">Jours</span>
        </div>
        <div class="box_heure">
            <div id="heure">00</div>
            <span id="heure_label">Heures</span>
        </div>
        <div class="box_minute">
            <div id="minute">00</div>
            <span id="minute_label">Minutes</span>
        </div>
        <div class="box_seconde">
            <div id="seconde">00</div>
            <span id="seconde_label">Secondes</span>
        </div>
</div>

box_rebours contient les différents div et span selon la données qu'il affiche. C'est à l'intérieur que le javascript insère les éléments du compte à rebours.

Le javascript est la clef du bon fonctionnement du code du compte à rebours.

<script>
function reboursF(){
                let rebours = document.getElementById("rebours"),
                jour = document.getElementById("jour"),
                jour_label = document.getElementById("jour_label"),
                heure = document.getElementById("heure"),
                heure_label = document.getElementById("heure_label"),
                minute = document.getElementById("minute"),
                minute_label = document.getElementById("minute_label"),
                seconde = document.getElementById("seconde"),
                seconde_label = document.getElementById("seconde_label"),
                maintenant = new Date(),
                finannee = new Date('August 31, '+maintenant.getFullYear()+' 00:00:00');

                let total_secondes = (finannee - maintenant) / 1000;

            if (total_secondes > 0){
                let nb_jours = Math.floor(total_secondes / (60 * 60 * 24));
                let nb_heures = Math.floor((total_secondes - (nb_jours * 60 * 60 * 24)) / (60 * 60));
                let nb_minutes = Math.floor((total_secondes - ((nb_jours * 60 * 60 * 24 + nb_heures * 60 * 60))) / 60);
                let nb_secondes = Math.floor(total_secondes - ((nb_jours * 60 * 60 * 24 + nb_heures * 60 * 60 + nb_minutes * 60)));

                jour.textContent = caractere(nb_jours);
                heure.textContent = caractere(nb_heures);
                minute.textContent = caractere(nb_minutes);
                seconde.textContent = caractere(nb_secondes);

                jour_label.textContent = genre(nb_jours, 'jour');
                heure_label.textContent = genre(nb_heures, 'heure');
                minute_label.textContent = genre(nb_minutes, 'minute');
                seconde_label.textContent = genre(nb_secondes, 'seconde');        
            }

            setTimeout("reboursF();", 1000);
        }

        function genre(nb, libelle)
        {
            return (nb > 1) ? libelle+'s' : libelle;
        }

        function caractere(nb)
        {
            return (nb < 10) ? '0'+nb : nb;
        }

        reboursF();
</script>

Le code est divisé en plusieurs parties:

1) Déclaration des variables

2) La création du compte à rebours

3) Les fonctions complémentaires de mises en formes du texte avant insertion

Les variables nécessaire au code sont déclarer au début de la fonction reboursF.

                let rebours = document.getElementById("rebours"),
                jour = document.getElementById("jour"),
                jour_label = document.getElementById("jour_label"),
                heure = document.getElementById("heure"),
                heure_label = document.getElementById("heure_label"),
                minute = document.getElementById("minute"),
                minute_label = document.getElementById("minute_label"),
                seconde = document.getElementById("seconde"),
                seconde_label = document.getElementById("seconde_label"),
                maintenant = new Date(),
                finannee = new Date('August 31, '+maintenant.getFullYear()+' 00:00:00');

                let total_secondes = (finannee - maintenant) / 1000;

Les variables rebours, jour, jour_label ... Contiennent le lien vers l'id de chaque div.

Quand à maintenant et finannee contiennent un objet new Date.

Et total_secondes contient le résultat de finannee - maintenant divisé par 1000.

Création du compte à rebours

            if (total_secondes > 0){
                let nb_jours = Math.floor(total_secondes / (60 * 60 * 24));
                let nb_heures = Math.floor((total_secondes - (nb_jours * 60 * 60 * 24)) / (60 * 60));
                let nb_minutes = Math.floor((total_secondes - ((nb_jours * 60 * 60 * 24 + nb_heures * 60 * 60))) / 60);
                let nb_secondes = Math.floor(total_secondes - ((nb_jours * 60 * 60 * 24 + nb_heures * 60 * 60 + nb_minutes * 60)));

                jour.textContent = caractere(nb_jours);
                heure.textContent = caractere(nb_heures);
                minute.textContent = caractere(nb_minutes);
                seconde.textContent = caractere(nb_secondes);

                jour_label.textContent = genre(nb_jours, 'jour');
                heure_label.textContent = genre(nb_heures, 'heure');
                minute_label.textContent = genre(nb_minutes, 'minute');
                seconde_label.textContent = genre(nb_secondes, 'seconde');        
            }

Les variables nb_jours, nb_heures... stocke le calcul de la différence entre les dates finannee et maintenant.

Les variables div recoivent les données d'avant suite un passage par la fonction caractere.

Puis les label sont mis au pluriels ou pas par la fonction genre.

setTimeout("reboursF();", 1000);

Cette ligne de code fais éxecuter la fonction toute les secondes.

Fonctions complémentaires

Les fonctions genre et caractere sont des fonctions contenu dans reboursF.

Ces fonctions utilise les opérateurs ternaires.

genre

        function genre(nb, libelle)
        {
            return (nb > 1) ? libelle+'s' : libelle;
        }

La fonction genre veut dire retourner label avec s si le nombre est superieur à 1 et sinon sans s.

caractere

        function caractere(nb)
        {
            return (nb < 10) ? '0'+nb : nb;
        }

La fonction caractere veut dire de retourner nb avec un 0 au début si il est inferieur à 10 sinon sans 0.

Petite précision:

A la fin, reboursF(); signifie l'excution de la fonction reboursF. Qui continue en continue grace à la boucle setTimeout() .

Faire un lien d'une cellule contenant la date finale pour l'intégrer à la variable finannee ?

Sur une demande de evolm, j'ai mis au point une troisième fonction app script.

function date_fin(){
  return SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Feuille").getRange("cellule").getValue();
}

Ou si la cellule est nommé date_fin

function date_fin(){
  return SpreadsheetApp.getActiveSpreadsheet().getRange("date_fin").getValue();
}

La fonction date_fin retourne la valeur de la date contenu dans la cellule.

Modification du code html plus prècisement du javascript.

finannee = new Date(<?= date_fin() ?>);

<?= date_fin() ?> intègre dans l'objet new Date la valeur de la cellule la contenant suite au retours de la fonction.

Et comment dois être écrite la date dans la feuille.

Mois jour, année heure:minute:seconde

Compte à Rebours avec année et mois

Sur une demande de Le Fast, une version avec mois et année.

<!DOCTYPE html>
<html>
<head>
<style>
        body{ margin:0;overflow: hidden;font-family:Arial}
        .box-rebours{ height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; }
        .box_annee, .box_mois, .box_jour, .box_heure, .box_minute, .box_seconde { padding: 10px; }
        #annee, #mois, #jour, #heure, #minute, #seconde { background:black; padding: 10px 20px; color: white; font-size: 3rem; font-weight: bold; }
        #annee_label, #mois_label, #jour_label, #heure_label, #minute_label, #seconde_label { font-size: 1.5rem; }
</style>
</head>
<body>
<h1>Compte à Rebours</h1>
<div class="box-rebours">
        <div class="box_annee">
            <div id="annee">0</div>
            <span id="annee_label">Annees</span>
        </div>
        <div class="box_mois">
            <div id="mois">00</div>
            <span id="mois_label">Mois</span>
        </div>
        <div class="box_jour">
            <div id="jour">00</div>
            <span id="jour_label">Jours</span>
        </div>
        <div class="box_heure">
            <div id="heure">00</div>
            <span id="heure_label">Heures</span>
        </div>
        <div class="box_minute">
            <div id="minute">00</div>
            <span id="minute_label">Minutes</span>
        </div>
        <div class="box_seconde">
            <div id="seconde">00</div>
            <span id="seconde_label">Secondes</span>
        </div>
</div>
<script>
function reboursF(){
                let rebours = document.getElementById("rebours"),
                annee = document.getElementById("annee"),
                annee_label = document.getElementById("annee_label"),
                mois = document.getElementById("mois"),
                mois_label = document.getElementById("mois_label"),
                jour = document.getElementById("jour"),
                jour_label = document.getElementById("jour_label"),
                heure = document.getElementById("heure"),
                heure_label = document.getElementById("heure_label"),
                minute = document.getElementById("minute"),
                minute_label = document.getElementById("minute_label"),
                seconde = document.getElementById("seconde"),
                seconde_label = document.getElementById("seconde_label"),
                maintenant = new Date(),
                finannee = new Date('August 31, 2022 00:00:00');
                let an = finannee.getUTCFullYear();
                let total_secondes = (finannee - maintenant) / 1000;

            if (total_secondes > 0){
                let total_jour = Math.floor(total_secondes / (60 * 60 * 24));
                let nb_annee = (((an % 4 == 0) && (an % 100 != 0)) || (an % 400 == 0)) ? Math.floor(total_jour/365) : Math.floor(total_jour/364);
                let nb_mois = (((an % 4 == 0) && (an % 100 != 0)) || (an % 400 == 0)) ? (Math.floor(total_jour/365)<=1,08241758) ? 0 : Math.floor((Math.floor(total_jour/365)-1)*30,4166) : (Math.floor(total_jour/364)<=1,08241758) ? 0 : Math.floor((Math.floor(total_jour/364)-1)*30,33333333);
                let nb_jours = (((an % 4 == 0) && (an % 100 != 0)) || (an % 400 == 0)) ? Math.floor(total_secondes / (60 * 60 * 24))-Math.floor(nb_mois*30,4166) : Math.floor(total_secondes / (60 * 60 * 24))-Math.floor(nb_mois*30,33333333) ;
                let nb_heures = Math.floor((total_secondes - (Math.floor(total_secondes / (60 * 60 * 24)) * 60 * 60 * 24)) / (60 * 60));
                let nb_minutes = Math.floor((total_secondes - ((Math.floor(total_secondes / (60 * 60 * 24)) * 60 * 60 * 24 + nb_heures * 60 * 60))) / 60);
                let nb_secondes = Math.floor(total_secondes - ((Math.floor(total_secondes / (60 * 60 * 24)) * 60 * 60 * 24 + nb_heures * 60 * 60 + nb_minutes * 60)));

                annee.textContent = caractere(nb_annee);
                mois.textContent = caractere(nb_mois);
                jour.textContent = caractere(nb_jours);
                heure.textContent = caractere(nb_heures);
                minute.textContent = caractere(nb_minutes);
                seconde.textContent = caractere(nb_secondes);

                annee_label.textContent = genre(nb_annee, 'annee');
                mois_label.textContent = 'mois';
                jour_label.textContent = genre(nb_jours, 'jour');
                heure_label.textContent = genre(nb_heures, 'heure');
                minute_label.textContent = genre(nb_minutes, 'minute');
                seconde_label.textContent = genre(nb_secondes, 'seconde');        
            }

            setTimeout("reboursF();", 1000);
}

        function genre(nb, libelle)
        {
            return (nb > 1) ? libelle+'s' : libelle;
        }

        function caractere(nb)
        {
            return (nb < 10) ? '0'+nb : nb;
        }

reboursF();
</script>
</body>
</html>

Le squelette html a vu l’ajout des compteur pour stocker les années et les mois.

<div class="box-rebours">
        <div class="box_annee">
            <div id="annee">0</div>
            <span id="annee_label">Annees</span>
        </div>
        <div class="box_mois">
            <div id="mois">00</div>
            <span id="mois_label">Mois</span>
        </div>
        <div class="box_jour">
            <div id="jour">00</div>
            <span id="jour_label">Jours</span>
        </div>
        <div class="box_heure">
            <div id="heure">00</div>
            <span id="heure_label">Heures</span>
        </div>
        <div class="box_minute">
            <div id="minute">00</div>
            <span id="minute_label">Minutes</span>
        </div>
        <div class="box_seconde">
            <div id="seconde">00</div>
            <span id="seconde_label">Secondes</span>
        </div>
</div>

Le css l’ajout des sélecteurs pour les balises html ajouté.

<style>
        body{ margin:0;overflow: hidden;font-family:Arial}
        .box-rebours{ height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; }
        .box_annee, .box_mois, .box_jour, .box_heure, .box_minute, .box_seconde { padding: 10px; }
        #annee, #mois, #jour, #heure, #minute, #seconde { background:black; padding: 10px 20px; color: white; font-size: 3rem; font-weight: bold; }
        #annee_label, #mois_label, #jour_label, #heure_label, #minute_label, #seconde_label { font-size: 1.5rem; }
</style>

Le javascript a un ajouts de variables.

                let rebours = document.getElementById("rebours"),
                annee = document.getElementById("annee"),
                annee_label = document.getElementById("annee_label"),
                mois = document.getElementById("mois"),
                mois_label = document.getElementById("mois_label"),
                jour = document.getElementById("jour"),
                jour_label = document.getElementById("jour_label"),
                heure = document.getElementById("heure"),
                heure_label = document.getElementById("heure_label"),
                minute = document.getElementById("minute"),
                minute_label = document.getElementById("minute_label"),
                seconde = document.getElementById("seconde"),
                seconde_label = document.getElementById("seconde_label"),
                maintenant = new Date(),
                finannee = new Date('August 31, 2022 00:00:00');
                let an = finannee.getUTCFullYear();
                let total_secondes = (finannee - maintenant) / 1000;

Une refonte complète du calcul pour le jour suite à l’ajout des calculs de l’année et des mois.

let total_jour = Math.floor(total_secondes / (60 * 60 * 24));
let nb_annee = (((an % 4 == 0) && (an % 100 != 0)) || (an % 400 == 0)) ? Math.floor(total_jour/365) : Math.floor(total_jour/364);
let nb_mois = (((an % 4 == 0) && (an % 100 != 0)) || (an % 400 == 0)) ? (Math.floor(total_jour/365)<=1,08241758) ? 0 : Math.floor((Math.floor(total_jour/365)-1)*30,4166) : (Math.floor(total_jour/364)<=1,08241758) ? 0 : Math.floor((Math.floor(total_jour/364)-1)*30,33333333);
let nb_jours = (((an % 4 == 0) && (an % 100 != 0)) || (an % 400 == 0)) ? Math.floor(total_secondes / (60 * 60 * 24))-Math.floor(nb_mois*30,4166) : Math.floor(total_secondes / (60 * 60 * 24))-Math.floor(nb_mois*30,33333333) ;
let nb_heures = Math.floor((total_secondes - (Math.floor(total_secondes / (60 * 60 * 24)) * 60 * 60 * 24)) / (60 * 60));
let nb_minutes = Math.floor((total_secondes - ((Math.floor(total_secondes / (60 * 60 * 24)) * 60 * 60 * 24 + nb_heures * 60 * 60))) / 60);
let nb_secondes = Math.floor(total_secondes - ((Math.floor(total_secondes / (60 * 60 * 24)) * 60 * 60 * 24 + nb_heures * 60 * 60 + nb_minutes * 60)));

La fonction genre n’est pas executer pour mois qui même seul a un s.

                annee_label.textContent = genre(nb_annee, 'annee');
                mois_label.textContent = 'mois';
                jour_label.textContent = genre(nb_jours, 'jour');

Documentations sur l'objet new Date():

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date

Le squelette html a vu l’ajout des compteur pour stocker les années et les mois. Le css l’ajout des sélecteurs pour les balises html ajouté.

Le javascript a une refonte du calcul pour le jour en plus de l’ajout des calculs de l’année et des mois et la fonction genre n’est pas executer pour mois qui même seule a un s.

let an = finannee.getUTCFullYear();
//————————
let total_jour = Math.floor(total_secondes / (60 * 60 * 24));
//————————
let nb_annee = (((an % 4 == 0) && (an % 100 != 0)) || (an % 400 == 0)) ? Math.floor(total_jour/365) : Math.floor(total_jour/364);
let nb_mois = (((an % 4 == 0) && (an % 100 != 0)) || (an % 400 == 0)) ? (Math.floor(total_jour/365)<=1,08241758) ? 0 : Math.floor((Math.floor(total_jour/365)-1)*30,4166) : (Math.floor(total_jour/364)<=1,08241758) ? 0 : Math.floor((Math.floor(total_jour/364)-1)*30,33333333);
let nb_jours = (((an % 4 == 0) && (an % 100 != 0)) || (an % 400 == 0)) ? Math.floor(total_secondes / (60 * 60 * 24))-Math.floor(nb_mois*30,4166) : Math.floor(total_secondes / (60 * 60 * 24))-Math.floor(nb_mois*30,33333333) ;
let nb_heures = Math.floor((total_secondes - (Math.floor(total_secondes / (60 * 60 * 24)) * 60 * 60 * 24)) / (60 * 60));
let nb_minutes = Math.floor((total_secondes - ((Math.floor(total_secondes / (60 * 60 * 24)) * 60 * 60 * 24 + nb_heures * 60 * 60))) / 60);
let nb_secondes = Math.floor(total_secondes - ((Math.floor(total_secondes / (60 * 60 * 24)) * 60 * 60 * 24 + nb_heures * 60 * 60 + nb_minutes * 60)));
//———————
mois_label.textContent = 'mois';