JavaScript JS Timer für HTML5 Tag progress

_CH_K_1991_

Lieutenant
Registriert
Nov. 2008
Beiträge
772
Guten Abend allerseits

Ich bin momentan daran eine Art Slideshow mit Websiten zu erstellen, diese sollen alle 20s wechseln, was bisher auch ohne Probleme mit folgendem JS Code klappt:
Code:
var homepage = 'page1.html';
var sekunden = 20;

document.write('<div ><span id="counter_span">' + sekunden + '</span><a href="' + homepage + '">' + homepage + '</a></div>');
function cWL()
  {
   sekunden--;
   document.getElementById('counter_span').innerHTML = sekunden;
   if ( !sekunden ) {
    document.location.href = homepage;
   }
  }

  window.setInterval('cWL()',1000);

jetzt möchte ich gerne analog zu diesem Zähler welcher 20s runter zählt einen der von null auf 20 zählt und diese Werte als Variable in den neuen HTML5 Tag progress legt... sollte dann irgendwie so aus sehen, wobei count die aufwärtszählende Variable sein sollte:

Code:
document.write('<progress id="count" max="20" value="'+count+'"></progress>');

Kann mir hier jemand weiterhelfen?
Wäre sehr schön :)

Danke und Gruss
 
Hi,

ich bin mir nicht sicher ob ich dein Problem richtig verstanden habe, aber die Fkt. cWL um die Zeile
Code:
document.getElementById('count').value = 20-sekunden;
zu ergänzen könnte dir helfen.

VG
sianon
 
Ehhhm ja super :) Besten Dank!
Hat geholfen, das war das Problem.
Noch für andere welche unterumständen das gleiche haben werden oder haben mein vollständiger Javascript Code:
Code:
<!--CODE für Wechsel der html Seite-->
  <script type='text/javascript'>
  <!--
  var homepage = 'page1.html';
  var sekunden = 20;
  var count = 0;
  document.write('<div ><span id="counter_span">' + sekunden + '</span><a href="' + homepage + '">' + homepage + '</a></div>');
    //-->
  </script>

Code:
<script type='text/javascript'>
  <!--
  document.write('<progress id="count" max="20" value="'+count+'"></progress>');
  //-->
  
  function cWL()
  {
   sekunden--;
   count++;
   document.getElementById('counter_span').innerHTML = sekunden;
   document.getElementById('count').value = 20-sekunden;
   if ( !sekunden ) {
    document.location.href = homepage;
   }
  }
  window.setInterval('cWL()',1000);
  </script>

Es sind zwei Teile weil der Zähler (erster Teil) bei mir im Header ist und der zweite Teil (also die Progress Bar) im Footer.

Danke nochmals
Gruss
 
Hi,

deine Variable count scheint mir redundant zu sein, zumindest falls du deinen vollständigen Code hier gepostet hast.
Es bietet sich an die Progressbar entweder so
Code:
document.write('<progress id="count" max="20" value="0"></progress>');

oder ohne JavaScript an gewünschter Stelle zu erstellen.

Die Zeilen
Code:
var count = 0;
und
Code:
count++;
könntest du dann entfernen.

VG
sianon
 
Zuletzt bearbeitet:
Hey

Danke für die Nachricht...
Ehm das mit dem count++ verstehe ich, das benötigt es ja nicht.
Ach ja und beim anderen gehen wir über die id="count" und geben nachher den Wert value mit...

Danke für den Hinweis.
 
Zurück
Oben