11 februari 2019

Een countdown timer op je website

Je kunt heel simpel een countdown timer maken met behulp van een paar formules in Google Sheets.
Deze is vervolgens via een iFrame te embedden in een website of op Google Sites.

Om zo'n counter te maken ga je als volgt te werk:
  • Begin met een aanpassing in de spreadsheetinstellingen. Zie de alinea helemaal onderaan dit bericht.
  • Plaats in cel A1 de datum en het tijdstip waar naartoe je wilt aftellen in de notatie, bijvoorbeeld:
    15-3-2019 0:00:00 (Noot*)
  • Voeg de cellen B1 - D1 samen en zet daarin een titel
  • Zet in cel B2: =INTEGER(A1-NU())
  • Zet in cel C2: =UUR(A1-NU())
  • Zet in cel D2: =MINUUT(A1-NU())
  • Zet in cel B3: =ALS(B2>1;"Dagen";"Dag")
  • Zet in cel D3: =ALS(C2>1;"Uren";"Uur")
  • Zet in cel C3: =ALS(D2>1;"Minuten";"Minuut")
  • Als je alles achter elkaar wilt hebben, voeg dan de cellen B4 - D4 samen en zet daarin de volgende formule:
    =INTEGER(A1-NU())&" "&ALS(days(A1;NU())>1;"Dagen";"Dag")&" : "&UUR(A1-NU())&" "&ALS(UUR(A1-NU())>1;"Uren";"Uur")&" : "&MINUUT(A1-NU())&" "&ALS(MINUUT(A1-NU())>1;"Minuten";"Minuut")
  • Maak de cellen naar believen op met achtergrondkleur en fontgrootte
Klaar is Kees!
Het resultaat kan er dan uitzien zoals hieronder. Dit is geen plaatje maar embedcode:



*) Wil je aftellen naar een jaarlijks terugkerende gebeurtenis zoals bijvoorbeeld mijn verjaardag, gebruik dan als formule in cel A1: =DATUM(JAAR(VANDAAG());4;5)
Daarbij staat de 4 voor de maand en de vijf voor de dag.

Embedden
Als je de timer wilt embedden op een website moet je de spreadsheet eerst publiceren.
  • Ga naar Bestand en klik op: Publiceren op internet
  • Kies dan voor Invoegen, Blad 1
Je krijgt dan code aangeboden die er ongeveer zo uitziet:

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQW-ue5Jxve1kGB7YBW2plDqedVxWNZv5YX0WEalGjpEXyfgd3gjDNtPct-e2xvhh3QdH8RQGFsIHRe/pubhtml?gid=0&single=true&widget=true&headers=false"></iframe>

Omdat je slechts een gedeelte van het blad wilt laten zien, namelijk de cellen B1 t/m D 4 moet je de embedcode nog een beetje aanpassen:

<iframe frameborder="0" width="300" height="140" src="https://docs.google.com/spreadsheets/u/1/d/e/2PACX-1vQW-ue5Jxve1kGB7YBW2plDqedVxWNZv5YX0WEalGjpEXyfgd3gjDNtPct-e2xvhh3QdH8RQGFsIHRe/pubhtml?gid=0&single=true&range=B1:G4&chrome=false"></iframe>

Je ziet dat ik de hoogte en de breedte van het iFrame definieer en dat ik de range toevoeg: B1:G4.
Ook de toevoeging chrome=false is belangrijk. Hoogte en breedte moet je een beetje uitvogelen en is afhankelijk van de breedte en hoogte van de cellen in je spreadsheet.

Natuurlijk heb ik dit niet allemaal zelf verzonnen, maar dankbaar gebruik gemaakt van de uitleg die ik vond op InfoInspired.

Te moeilijk:
Vind je dit allemaal veel teveel gedoe, dan kan je natuurlijk gebruikmaken van een site zoals https://www.tickcounter.com/ Hou er dan wel rekening mee dat je geen invloed hebt op de vormgeving en ik denk dat Google Sites deze code van derden ook niet zal accepteren...

Update 11-2-2019
Naar aanleiding van een reactie realiseer ik me dat ik iets belangrijks ben vergeten!
Ga in de spreadsheet naar: Bestand, Spreadsheetinstellingen.
Klik op Berekening en kies bij Herbereking voor: Bij wijziging en elke minuut. Dit zorgt ervoor dat de counter keurig iedere minuut aftelt, ook als je het bestand gesloten hebt!

4 opmerkingen:

  1. Leuk. Werkt ook in Excel, al is embedden dan iets lastiger. Ook herberekenen gaat in Excel niet continue (wél als je het bestand opent of als je ververst met F9).

    Kleine correctie op een formule in je bericht:
    =INTEGER(A1-NU())&" "&ALS(days(A1;NU())>1;"Dagen";"Dag")&" : "&UUR(A1-NU())&" "&ALS(UUR(A1-NU())>1;"Uren";"Uur")&" : "&MINUUT(A1-NU())&" "&ALS(MINUUT(A1-NU())>1;"Minuten";"Minuut")

    Vervang 'days' door 'dagen' om alles (weer) kloppend te maken.

    vr. gr.

    Albert Lubberink



    BeantwoordenVerwijderen
    Reacties
    1. Bedankt voor je reactie Albert.
      Naar aanleiding daarvan heb ik nog een alinea aan het bericht toegevoegd.
      Dit zorgt ervoor dat de counter keurig iedere minuut zijn werk doet!
      De door jou voorgestelde correctie is niet juist. Probeer het zelf maar in Sheets en je zult zien dat het dan juist fout gaat. Het kan zijn dat dit geldt voor Excel, dat weet ik niet...

      Verwijderen
  2. Ik heb 'm in Excel gemaakt en dan is het wel nodig.
    Voor embedden moet je eerst uploaden naar Excel Online (het kleine broertje van de echte Excel ;~)).

    BeantwoordenVerwijderen
    Reacties
    1. Ik vind het grappig dat je het beschrijft als "uploaden naar Excel Online"
      Het is toch gewoon een kwestie van je lokaal gemaakte bestand opslaan in je OneDrive? In principe heb je dan niets met Excel Online te maken. Het insluiten moet je toch vanuit de OneDrive map doen en niet vanuit Excel Online. Althans, dat is de weg die ik bewandel...

      Verwijderen