• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Countdown jeden Tag

P

palo

Neues Mitglied
Hi,

ich will eine Adventsaktion in meine Homepage einbinden, die jeden tag wechselt. und dass der besucher genau weiß, wie lang die aktion noch gültig ist, hätte ich gern einen balken eingebunden, der visuell anzeigt, wie lange noch und einen countdown.

vergleichbar wie hier: http://www.betten.de , nur halt nicht "Nur solange der Vorrat reicht" sondern ein Countdown mit stunden, minuten und sekunden im balken drin.

hat jemand sowas schonmal gemacht und kann mir da helfen?

wär wirklich cool! :) danke schonmal für jede hilfe
 
Hallo vielleicht Klappt es so:

Code: 
<html>
<head>
<title></title>

<script type="text/javascript">
// countdown II - Thomas Salvador, 2010, http://brauchbar.de 
// free to use, if this notice is kept intact
var countdown_data = new Array();

function countdown_define(name,y,m,d,h,i,s) {
  if (!h) { h = 0; }
  if (!i) { i = 0; }
  if (!s) { s = 0; } 
  countdown_data[name] = new Array(name,y,m,d,h,i,s);
}

function countdown_update() {
  now = new Date();
  for (var name in countdown_data) {
    container = document.getElementById(countdown_data[name][0]);
    y = countdown_data[name][1];
    m = countdown_data[name][2];
    d = countdown_data[name][3];
    h = countdown_data[name][4];
    i = countdown_data[name][5];
    s = countdown_data[name][6];

    if (m == 0) {
      if ( d>= now.getDate()) {
        m = now.getMonth()+2;
      } else {
        m = now.getMonth()+1;
      }
     
      m = m % 12; 
    } else {
      m--;
    }
   
    if (y == 0) {
      y = now.getFullYear();
      if ((m < now.getMonth()+1)
        || ((m == now.getMonth()+1) && (d >= now.getDate()))) {
        y++;
      }
    }
       
    date = new Date(y,m,d,h,i,s);
   
    diff_abs = date.getTime()-now.getTime();
    diff_sec = Math.floor(diff_abs / 1000);
    diff_min = Math.floor(diff_sec / 60);
    diff_sec =  diff_sec % 60;
    diff_hour = Math.floor(diff_min / 60);
    diff_min = diff_min % 60;
    diff_day = Math.floor(diff_hour / 24);
    diff_hour = diff_hour % 24;

    output = "";
    output = output+(diff_day != 0 ?  diff_day+"d " : "");
    output = output+(diff_hour != 0 ?  diff_hour+"h " : "");
    output = output+(diff_min != 0 ?  diff_min+"m " : "");
    output = output+(diff_sec != 0 ?  diff_sec+"s " : "");

    container.innerHTML = output.substring(0,output.length-1);
   
  }

  setTimeout('countdown_update()',1000);
}

  function countdown() {
    countdown_define("heut-abend", 2010, 11, 9);
    countdown_update();
  }

</script>
</head>
<body onload="countdown();">
Es sind noch <span id="heut-abend"></span> bis heute Abend.

</body>
</html>

Ist sicherlich nicht die optimale lösung wie ich denke.
Das Datum müsstest du unten in der Funktion jeden Tag ändern bzw. ändern lassen.
Allerdings habe ich damit gerechnet, dass Du den Countdown bis zum Abend laufen lassen willst, deswegen läuft der auch nur bis zum Abend.
 
Zuletzt bearbeitet von einem Moderator:
Schönes JavaScript, wie ich finde, wäre dieses:
Countdown mit JavaScript | Webmasterparadies.de

Für deine Skala habe ich kurz diesen PHP-Code geschustert. Dürfte dir weiterhelfen.
PHP: 
<?php
/* Dieser Code funktioniert erst ab erstem Dezember! */
$day = date("d");
$width = floor(200/24*$day);
?>
<div style="height: 16px; width: 200px; border: 1px solid #333333;">
	<div style="height: 16px; width: <?php echo $width; ?>px; background-color: #77FF6B;">
	</div>
</div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben