Javascript(?) klok geeft standaard geen 2 digits

Status
Niet open voor verdere reacties.

jegero13

Gebruiker
Lid geworden
24 dec 2008
Berichten
270
Beste mensen,
Ik ben bezig met een soort narrowcast scherm welke draait op een website.
Via een Raspberry laat ik deze automatisch in fullscreen opstarten.
Nu heb ik via wat zoek/kopieer/plak werk een mooie look gevonden met wat handige functies (tijd/buienradar) maar ik loop tegen een probleem aan.
Er zat een tijdfunctie bij, maar deze klopt niet helemaal. Als je bijvoorbeeld uren hebt met 1 digit, (0,1,2,3,4,5,6,7,8,9) of minuten met hetzelfde, dan geeft hij dit meer weer als 1 digit, dus zoals tussen haakjes.
Dat lijkt een beetje raar als het bij wijze van 1 minuut of 4 is. Dat geeft hij weer als: 16:1.
Hoe kan ik, met bijgevoegde script, eisen dat het script altijd 2 digits gebruikt, dus ook om 12 uur snachts 00:00 weergeeft ipv 0:0? Ik ben al een tijd aan het googelen geweest maar kan t niet vinden.
Het script:
Code:
      function clock () {
        var date = new Date()

        var tijd = `${date.getHours()}:${date.getMinutes()}`
        var datum = `${['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'][date.getDay()]} ${date.getDate()} ${['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'][date.getMonth()]} ${date.getFullYear()}`

        var DOMtijd = document.getElementById('tijd')
        var DOMdatum = document.getElementById('datum')

        DOMtijd.textContent = tijd
        DOMdatum.textContent = datum
      }
Ik heb hem al wel aangepast met het weergeven van de dagen, die waren ook 1 dag verschoven. Maar hier kom ik niet uit.
Is er dus iemand die hier verstand van heeft en mij op weg kan helpen? Dat zou super zijn! :)
Voorbeeld van het script: https://jelle.stegewans.nl/test.html (De opmaak is multiscreen opgebouwd, maar ontwikkeld voor 1920x1080 fullscreen, dus klopt dat het er wat raar uitziet.)
Voorbeeldfoto van de fout weergegeven tijd: https://jelle.stegewans.nl/foutetijd.jpg
Edit: Even er vanuit gaande dat het JavaScript is. Ik heb al wel wat gevonden toch nog weer, dat is het volgende script:
Code:
function addZero(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function myFunction() {
  var d = new Date();
  var x = document.getElementById("demo");
  var h = addZero(d.getHours());
  var m = addZero(d.getMinutes());
  var s = addZero(d.getSeconds());
  x.innerHTML = h + ":" + m + ":" + s;
}
Ik heb de functie addZero er bij gevoegd, maar mijn variabelen zien er anders uit dan in het voorbeeld script... Hoe kan ik de addZero toevoegen aan mijn eigen script? Dan ben ik in principe al klaar lijkt me, als de variabelen verder hetzelfde blijven.
Alvast bedankt!
Met vriendelijke groet,
Jelle Stegewans
 
Laatst bewerkt:
Uiteindelijke na heel wat proberen de oplossing zelf gevonden!
Misschien voor een volgende hier is de goede code:
Code:
      function clock () {
        var date = new Date()

        var tijd = `${date.getHours()}:${addZero(date.getMinutes())}:${addZero(date.getSeconds())}`
        //var hour = addZero(date.gethours());
        //var minute = addZero(date.getSeconds());
        var datum = `${['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'][date.getDay()]} ${date.getDate()} ${['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'][date.getMonth()]} ${date.getFullYear()}`

        var DOMtijd = document.getElementById('tijd')
        //var DOMhour = document.getElementById('hour')
        //var DOMminute = document.getElementById('minute')
        var DOMdatum = document.getElementById('datum')

        DOMtijd.textContent = tijd
        //DOMhour.textContent = hour
        //DOMminute.textContent = minute
        DOMdatum.textContent = datum
      }

      clock()
      setInterval(clock, 1000)

Verderop voeg je dus het "addZero" stukje code erbij:
Code:
      function addZero(i) {
        if (i < 10) {
          i = "0" + i;
        }
        return i;
      }
 
Je hebt het al opgelost maar dit vond ik op deze website.
Code:
var tijd  = ('0' + `${date.getHours()}`).slice(-2)
    + ':' + ('0' + `${date.getMinutes()}`).slice(-2)
    + ':' + ('0' + `${date.getSeconds()}`).slice(-2);
 
Hey Bron,
Thanks voor je antwoord!
Ik had hem inderdaad al gevonden! :)
Toch bedankt voor je antwoord! :thumb:
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan