Countdown für Onlineshop

[ReneS35]

Hallo zusammen,

ich benötige ein kleines Countdown-Script wie auf der nachfolgenden Homepage eingebunden.

Könnte mir hier jemand behilflich sein. Leider habe ich hier null Ahnung wie man solch einen Countdown umsetzt.

Beispiel: http://www.kontaktlinsen-tagesdeal.de

Countdown läuft mittig der Seite (in rot)

Würde mich sehr über Hilfe freuen.

Beste Grüße

Valeska

 

[bdt600]

Der Counter von der Seite kommt von http://www.pion.at/service/countdown/

 

[ReneS35]

Ja richtig ,- und genau das möchte ich nicht haben.

Hätte gerne solch einen eigenen,- leider weiß ich nicht wie ich das anstelle.

LG Valeska

 

[bdt600]

https://www.google.de/#q=javascript+countdown

 

[ReneS35]

Ich weiss,- Google suche :-) Hab auch 1000 Skripte gefunden,- bekomme das ganze aber nicht in solch eine rote Box wie auf der Homepage.

Probier jetzt schon echt paar Stunden rum. :-( Naja, dann muss ich wohl mal weiter suchen wie es funktioniert. Sobald ich den Quellcode in ne Tabelle eintrage ist alles hin.

LG Valeska

 

[bdt600]

Die rote Box ist ja das kleinere Problem, ein div mit einem Rahmen und Hintergrund.

 

[ReneS35]

Jetzt habe ich es geschafft,- Neues Problem ... wenn ich diesen Counter mehrfach auf der Seite verwende bekomme ich diesen immer nur 1 mal angezeigt. Zumindest die Zeit.

Hast Du eine Idee ?

 

[bdt600]

Ohne deinen Quellcode zu sehen wird dir niemand helfen können.

 

[ReneS35]

Hier dann mal der Quellcode. In dem zweiten Angebot sollte halt auch der Countdown rein.

Wenn ich den ersten dort einfüge läuft leider nur einer von beiden. Insgesamt sollten hier 7 Angebote rein.

<style type="text/css">
td {
    text-align: center;
}
p {
    color: #FFF;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
}
</style>
<table width="950" border="0">
    <tbody>
        <tr>
            <td width="706"><br />
            <br />
            <br />
            <img src="images/deals/biofinity.jpg" width="769" height="204" alt="" /><br />
            <br />
            <br type="_moz" />
            &nbsp;</td>
            <td width="234">&nbsp;<table width="244" height="184" border="0">
  <tr>
    <td bgcolor="#FF0000"><p>TAGESDEAL LÄUFT NOCH</p>
      <div style="color:#ffffff;font-size:18px;font-family:Verdana;font-weight:bold;font-style:normal;text-decoration:none" id="countdown"></div>
      <p>&nbsp; </p>
<p>&nbsp;</p>
<script type="text/javascript">

var strTargetDate = "02/11/2014 12:00 AM";
var strFormat = "$HOURS$:$MINUTES$:$SECONDS$";
var strExpired = "TAGESDEAL IST ABGELAUFEN !";

function doCountDown(seconds)
{
   if (seconds < 0)
   {
      document.getElementById("countdown").innerHTML = strExpired;
      return;
   }
   var strMsg = strFormat;
   strMsg = strMsg.replace("$DAYS$",    ((Math.floor(seconds/86400))%100000).toString());
   strMsg = strMsg.replace("$HOURS$",   ((Math.floor(seconds/3600))%24).toString());
   strMsg = strMsg.replace("$MINUTES$", ((Math.floor(seconds/60))%60).toString());
   strMsg = strMsg.replace("$SECONDS$",  ((Math.floor(seconds))%60).toString());

   document.getElementById("countdown").innerHTML = strMsg;

   setTimeout("doCountDown(" + (seconds-1).toString() + ")", 1000);
}

function initCountDown()
{
   var dtTarget = new Date(strTargetDate);
   var dtNow = new Date();
   var dtDiff = new Date(dtTarget-dtNow);
   var totalSeconds = Math.floor(dtDiff.valueOf()/1000);

   doCountDown(totalSeconds);
}

initCountDown();

  </script></td>
  </tr>
</table></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;<img src="images/deals/biofinity.jpg" width="769" height="204" alt="" /></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

 

[bdt600]

Damit

document.getElementById("countdown")

bist du auf einen Counter festgenagelt. Eine ID darf es auch nur einmal geben. Du könntest jetzt unterschiedliche ID's vergeben und der Funktion als Parameter übergeben

 

[Sempervivum]

Dies hier:

document.getElementById("countdown").innerHTML = strMsg;

bezieht sich ja immer auf dasselbe HTML-Element. Wenn du mehrere Counter haben willst, könntest Du diese ID als Parameter an die Funktionen initCountDown() und doCountDown() übergeben. Ebenso die Endezeit (strTargetDate).

 

[ReneS35]

Vielen Dank für Deine Hilfe- da ich wirklich Anfänger bin ist mein Latein hier spätestens am Ende :-(

Dann werde ich wohl erstmal für diesen blöden Countdown etwas mehr lesen müssen. Ich dachte es sei einfacher,- demnach vielen Dank für Deine / Eure ,- das werde ich so alleine mal nicht umsetzen können.

LG Valeska

 

[bdt600]

Der große JavaScript-Fachmann bin ich nicht, aber so könnte es gehen

<div style="......" id="countdown1">
<div style="......" id="countdown2">
<div style="......" id="countdown3">

function doCountDown(id, seconds)
{
   if (seconds < 0)
  {
     document.getElementById(id).innerHTML = strExpired;
     return;
  }
  var strMsg = strFormat;
  strMsg = strMsg.replace("$DAYS$",    ((Math.floor(seconds/86400))%100000).toString());
  strMsg = strMsg.replace("$HOURS$",   ((Math.floor(seconds/3600))%24).toString());
  strMsg = strMsg.replace("$MINUTES$", ((Math.floor(seconds/60))%60).toString());
  strMsg = strMsg.replace("$SECONDS$",  ((Math.floor(seconds))%60).toString());
  document.getElementById(id).innerHTML = strMsg;
  setTimeout("doCountDown(" + (seconds-1).toString() + ")", 1000);
}
function initCountDown(id)
{
  var dtTarget = new Date(strTargetDate);
  var dtNow = new Date();
  var dtDiff = new Date(dtTarget-dtNow);
  var totalSeconds = Math.floor(dtDiff.valueOf()/1000);
  doCountDown(id, totalSeconds);
}

initCountDown('countdown1');
initCountDown('countdown2');
initCountDown('countdown3);