abo12: Countdown

<script LANGUAGE="JavaScript">  
<!--  
var eventdate = new Date("November 28, 2009 19:30:00");  
  
function toSt(n) {  
  s=""  
  if(n<10) s+="0"  
  return s+n.toString();  
}  
  
function countdown() {  
  cl=document.clock;  
  d=new Date();  
  count=Math.floor((eventdate.getTime()-d.getTime())/1000);  
  if(count<=0)  
    {cl.days.value ="00";  
     cl.hours.value="00";  
     cl.mins.value="00";  
     cl.secs.value="00";  
     return;  
   }  
  cl.secs.value=toSt(count%60);  
  count=Math.floor(count/60);  
  cl.mins.value=toSt(count%60);  
  count=Math.floor(count/60);  
  cl.hours.value=toSt(count%24);  
  count=Math.floor(count/24);  
  cl.days.value=count;  
  
  setTimeout("countdown()",1000);  
}  
// Ende verstecken -->  
  
</script>  
  
<body onload="countdown()">  
  
<form name="clock">  
<table border=0 cellspacing="10">  
  
<tr span style="font-size:1.2em">  
    <td><center><input name="days" size="2" ></center></td>  
    <td><center><input name="hours" size="2" ></center></td>  
    <td><center><input name="mins" size="2" ></center></td>  
    <td><center><input name="secs" size="2" ></center></td>  
    <td>bis zum nächsten NG</td>  
</tr>  
<tr span style="font-size:0.75em">  
    <td>Tage</td>  
    <td>STD.</td>  
    <td>MIN.</td>  
    <td>SEK.</td>  
</tr>  
</table></form>

<script LANGUAGE="JavaScript">
<!--
var eventdate = new Date("November 28, 2009 19:30:00");

function toSt(n) {
  s=""
  if(n<10) s+="0"
  return s+n.toString();
}

function countdown() {
  cl=document.clock;
  d=new Date();
  count=Math.floor((eventdate.getTime()-d.getTime())/1000);
  if(count<=0)
    {cl.days.value ="00";
     cl.hours.value="00";
     cl.mins.value="00";
     cl.secs.value="00";
     return;
   }
  cl.secs.value=toSt(count%60);
  count=Math.floor(count/60);
  cl.mins.value=toSt(count%60);
  count=Math.floor(count/60);
  cl.hours.value=toSt(count%24);
  count=Math.floor(count/24);
  cl.days.value=count;

setTimeout("countdown()",1000);
}
// Ende verstecken -->

</script>

<body onload="countdown()">

<form name="clock">
<table border=0 cellspacing="10">

<tr span style="font-size:1.2em">
    <td><center><input name="days" size="2" ></center></td>
    <td><center><input name="hours" size="2" ></center></td>
    <td><center><input name="mins" size="2" ></center></td>
    <td><center><input name="secs" size="2" ></center></td>
    <td>bis zum nächsten NG</td>
</tr>
<tr span style="font-size:0.75em">
    <td>Tage</td>
    <td>STD.</td>
    <td>MIN.</td>
    <td>SEK.</td>
</tr>
</table></form>

das hab ich jetzt mal gebastelt.

Das problem ist nur, Das ich nur die Zahlen vom Countdown etwas größer haben möchte und in einer anderen Schriftgröße. Sobald ich das aber eingebe passiert nichts oder es wird für alles übernommen.

Zweitens ich möchte ein Bild nur hinter den Zahlen (Countdown) machen, damit es nicht so weiß aussieht. Aber das geht irgendwie auch nicht. :(

Hat jemand eine Idee?

  1. Hallo,

    mir persönlich zuviel code, zuwenig reduziert auf das problem. aber es findet sich sicher jemand anderes.

    Gruß

    jobo

    1. Hab das script zweimal reingestellt.

      <script LANGUAGE="JavaScript">  
      <!--  
      var eventdate = new Date("November 28, 2009 19:30:00");  
        
      function toSt(n) {  
        s=""  
        if(n<10) s+="0"  
        return s+n.toString();  
      }  
        
      function countdown() {  
        cl=document.clock;  
        d=new Date();  
        count=Math.floor((eventdate.getTime()-d.getTime())/1000);  
        if(count<=0)  
          {cl.days.value ="00";  
           cl.hours.value="00";  
           cl.mins.value="00";  
           cl.secs.value="00";  
           return;  
         }  
        cl.secs.value=toSt(count%60);  
        count=Math.floor(count/60);  
        cl.mins.value=toSt(count%60);  
        count=Math.floor(count/60);  
        cl.hours.value=toSt(count%24);  
        count=Math.floor(count/24);  
        cl.days.value=count;  
        
        setTimeout("countdown()",1000);  
      }  
      // Ende verstecken -->  
        
      </script>  
        
      <body onload="countdown()">  
        
      <form name="clock">  
      <table border=0 cellspacing="10">  
        
      <tr span style="font-size:1.2em">  
          <td><center><input name="days" size="2" ></center></td>  
          <td><center><input name="hours" size="2" ></center></td>  
          <td><center><input name="mins" size="2" ></center></td>  
          <td><center><input name="secs" size="2" ></center></td>  
          <td>bis zum nächsten NG</td>  
      </tr>  
      <tr span style="font-size:0.75em">  
          <td>Tage</td>  
          <td>STD.</td>  
          <td>MIN.</td>  
          <td>SEK.</td>  
      </tr>  
      </table></form>
      

      so sieht EINS aus.

      1. Hallo,

        naja, jetzt kapier ich nicht genau, was du willst. ist es die angezeigte größe, spielt das ganze script doch keine rolle. ist es was anderes, dann mach es doch mal ohne die ganzen konvertierungen. aus meiner erfahrung geht es bei der problemlösung in schritt eins um die isolierung des problems. was heißt, dass das problem sich in den meisten fällen auf ein paar zeilen code reduziert. _ein_ countdown, _ein_ inputfeld, _ohne_ tabellen drumrum oder ähnliches.

        Gruß

        jobo

        1. <form name="clock">
          <table border=0 cellspacing="10">

          <tr span style="font-size:1.2em">
              <td><center><input name="days" size="2" ></center></td>
              <td><center><input name="hours" size="2" ></center></td>
              <td><center><input name="mins" size="2" ></center></td>
              <td><center><input name="secs" size="2" ></center></td>
              <td>bis zum nächsten NG</td>
          </tr>

          also hier genau steckt das Problem. Die Zahl der days,hours, mins und secs will ich größer haben. Aber nicht "bis zum nächsten NG"
          Ich muss ja in die Zeile <font size="2"> </font> einfügen? aber das klappt nicht.

          1. Hallo,

            <table border=0 cellspacing="10">
            <tr span style="font-size:1.2em">
            <td><center><input name="secs" size="2" ></center></td>
            <td>bis zum nächsten NG</td>
            </tr>

            so wäre es eingekürzt. eigentlich würdest du die inline-styles herausnehmen und die elemente über klassen ansprechen.

            <table>
            <tr>
            <td class="uhrzeit"><input name="secs" size="2">/td>
            <td>was anders</td>
            </table>

            mit
            td.uhrzeit {
             text-align:center;
             font-size:20px;
            }
            td.uhrzeit input {
             color: red;
             font-size:22px;
            }

            Gruß

            jobo

  2. Hallo

    Das problem ist nur, Das ich nur die Zahlen vom Countdown etwas größer haben möchte und in einer anderen Schriftgröße. Sobald ich das aber eingebe passiert nichts oder es wird für alles übernommen.

    Wenn ich deinen Code und deinen Wunsch richtig verstehe müsstes du nur die Font-Size der Input-Felder ändern.-->http://de.selfhtml.org/html/formulare/formatieren.htm

    HTH, MfG UrsB

    --
    Selfcode:
    ie:% fl:| br:> va:| ls:& fo:| rl:( n4:~ ss:| de:] js:| ch:? mo:} zu:)