24-uurs terugtelklok

Status
Niet open voor verdere reacties.
C

Captain Havock

Gebruiker
Lid geworden
31 aug 2008
Berichten
8
Ik ben op zoek naar een scriptje dat een terugtelklok kan tonen met een 24-uurs cyclus. Let wel: geen terugtelklok tot een bepaalde datum, want die zijn er te kust en te keur.

Het klokje zou bijvoorbeeld instelbaar moeten zijn op 15:45:00 uur en vanaf dat moment gaan terug tellen (23:59:59, 23:59:58, etc.)

Is er een slimme manier om een ingestelde tijd met de actuele tijd te vergelijken en het verschil tussen die waarden te tonen? Hoe pak ik dat het handigst aan?
 
Ik heb dit snel inelkaar gezet dus er kunnen misschien foutjes inzitten. En het is gebaseerd op lokale tijd op het moment, dat is misschien niet wat je wilt. Dan moet je het even zeggen.

counter.js
Code: 
function counter(hour, minute, second, spanID)
{
  var countToHour = hour;
  var countToMinute = minute;
  var countToSecond = second;
  var span = document.getElementById(spanID);
  var target;

  this.initiateTarget = function()
  {
    target = new Date();
    now = new Date();
    target.setHours(countToHour);
    target.setMinutes(countToMinute);
    target.setSeconds(countToSecond);
    if (now.getTime() > target.getTime())
      target.setDate(target.getDate() + 1);
    target.timeStamp = target.getTime();
  }

  this.getOffset = function()
  {
    var now = new Date();
    var offset = target.timeStamp - now.getTime();
    if (offset < 0)
    {
      this.initiateTarget();
      offset = target.timeStamp - now.getTime();
    }
    return offset;
  }

  this.interval = function()
  {
    var offset = this.getOffset() / 1000.0;
    var hours = Math.floor(offset / 3600.0);
    offset -= hours * 3600.0;
    var minutes = Math.floor(offset / 60.0);
    if (minutes < 10) minutes = "0"+minutes;
    offset -= minutes * 60.0;
    var seconds = Math.floor(offset);
    if (seconds < 10) seconds = "0"+seconds;
    span.innerHTML = hours+":"+minutes+":"+seconds;
  }
  this.initiateTarget();
  this.interval();
}

HTML:
HTML: 
<html>
<head>
<script type="text/javascript" src="counter.js">
</script>
</head>
<body>
<span id="timer"></span>
<script type="text/javascript">
var counter = new counter(12, 0, 0, "timer");
window.setInterval("counter.interval()", 500);
</script>
</body>
</html>
 
Laatst bewerkt:
met dit js bestand is het niet meer afhankelijk van de locale tijd. Houd er dan rekening mee dat we nu in UTC+2 zitten, en in de winter in UTC+1. Daarom, om naar 12 uur af te tellen moet je "new counter(10, 0, 0 , 'span-id')" roepen (met uur 10 ipv 12).

counter.js:
Code: 
function counter(hour, minute, second, spanID)
{
  var countToHour = hour;
  var countToMinute = minute;
  var countToSecond = second;
  var span = document.getElementById(spanID);
  var target;

  this.initiateTarget = function()
  {
    target = new Date();
    now = new Date();
    target.setUTCHours(countToHour);
    target.setUTCMinutes(countToMinute);
    target.setUTCSeconds(countToSecond);
    if (now.getTime() > target.getTime())
      target.setUTCDate(target.getUTCDate() + 1);
    target.timeStamp = target.getTime();
  }

  this.getOffset = function()
  {
    var now = new Date();
    var offset = target.timeStamp - now.getTime();
    if (offset < 0)
    {
      this.initiateTarget();
      offset = target.timeStamp - now.getTime();
    }
    return offset;
  }

  this.interval = function()
  {
    var offset = this.getOffset() / 1000.0;
    var hours = Math.floor(offset / 3600.0);
    offset -= hours * 3600.0;
    var minutes = Math.floor(offset / 60.0);
    if (minutes < 10) minutes = "0"+minutes;
    offset -= minutes * 60.0;
    var seconds = Math.floor(offset);
    if (seconds < 10) seconds = "0"+seconds;
    span.innerHTML = hours+":"+minutes+":"+seconds;
  }
  this.initiateTarget();
  this.interval();

}

HTML:
HTML: 
<html>
<head>
<script type="text/javascript" src="counter.js">
</script>
</head>
<body>
<span id="timer"></span>
<script type="text/javascript">
var counter = new counter(10, 0, 0, "timer");
window.setInterval("counter.interval()", 1000);
</script>
</body>
</html>
 
Laatst bewerkt:
Kijk-es-an, Glest... Dat is nu precies wat ik zocht. Een eerste blik op de code vertelde me meteen al dat je een veel efficientere aanpak hebt gekozen dan mij voor ogen stond. Daar kan ik dus nog wat van opstekend! Zeer bedankt voor je inspanningen om me zo snel van dienst te zijn!
:thumb:
 
Graag gedaan :)

Nog een opmerking achteraf, bij deze lijn is de interval een beetje hoog. Daardoor wordt afentoe een seconde overgeslagen en is de overgang zoiezo niet heel regelmatig.
Code: 
window.setInterval("counter.interval()", 1000);

Beter is dit. Met 200 milliseconde zag ik nog steeds afwijkingen, vandaar dat 100 milliseconde me het beste lijkt.
Code: 
window.setInterval("counter.interval()", 100);
 
Glest zei:
afentoe een seconde overgeslagen en is de overgang zoiezo niet heel regelmatig.
---==[knip]==---
Code: 
window.setInterval("counter.interval()", 100);
Klik om te vergroten...

Ik had het gezien en al een beetje zitten 'spelen' met die interval-waarde.
Wat me trouwens ook opviel is dat de klok na 00:00:00 in eerste instantie 24:00:59 aangeeft, en zich pas enkele seconden later herstelt: 23:59:55. Klein schoonheidsfoutje?
 
hmm, vreemd, kan me niet voorstellen hoe dat kwam, maar mooi dat het niet meer gebeurt :p
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan