✔ Nach jeder Sekunde...

123123123

123123123

Erfahrenes Mitglied
Hallo Leute,
ich habe schon mal mit diesem Code eine Frage gestellt, aber jetzt soll was interessantes dazu kommen :

Code: 
<html>
    <head>
        <title>JS</title>
    </head>
<body>
    <div id="time" style= "border: 2px solid blue; width:180px; height: 60px; font-family:Comic Sans MS;background-color:#FFA07A"> </div>
    <br><div id="milli" style="border: 2px solid blue; width:240px; height: 70px; font-family:Comic Sans MS;background-color:#FFA07A"></div></br>
    
    <script>

        function zeit()
        {
            var Datum = new Date();
            var Tag = Datum.getDate();
            var Monat = Datum.getMonth() + 1;
            var Jahr = Datum.getFullYear();
            var Stunden = Datum.getHours();
            var Minuten = Datum.getMinutes();
            var Sekunden = Datum.getSeconds();

            if (Minuten <10)
            {
                Minuten = "0" + Minuten;
            }
            if (Sekunden < 10)
            {
                Sekunden = "0" + Sekunden;
            }

            document.getElementById("time").innerHTML = "Heute ist der " + Tag + "." + Monat + "." + Jahr + "<br\> Es ist " + Stunden + ":" + Minuten + ":" + Sekunden + " Uhr.";
            "<br>"
            document.getElementById("milli").innerHTML = "Die Anzahl der Millisekunden: " + Date.parse(Datum) + ". <br\>(Seit 01.01.1970)" ;
        }

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

    </script>
    
</body>
</html>

So, wie kann ich es machen, dass das 1.Kästchen zum Beispiel nach jeder Sekunde um 1px sich vergrößert und das soll nach 59 Sekunden wieder auf die normale Größe rüberspringen und dann geht es wieder von vorne los. Hoffe habe es verständlich erklärt.
Danke!:)

PS: Hoffe ihr werdet mir helfen, trotz des freien Tages!:D
 
Eine Zeile, direkt hinter "var Sekunden = Datum.getSeconds()"

Javascript: 
document.getElementById('time').style.height = (Sekunden + 60) + 'px';
 
Hi,

@CPoly
- Ich denke es geht eher um die width als die heigth (so ist der obere Kasten am Ende so groß wie der untere)
-
nach 59
Zum Vergrößern anklicken....
=> es fängt minimal breit an und ist immer 60 sek. nach Laden der Seite maximal breit!?

Hier mal meine Lösung, die bei Zeile 34 eingefügt werden sollte:
Javascript: 
var width = parseInt(document.getElementById("time").style.width.substring(0, document.getElementById("time").style.width.length-2));
if(width < 240){
    width = width+1;
}
else{
    width = 180;
}
document.getElementById("time").style.width = width + "px";
(Funktioniert in allen Browsern, also auch IE6)

Gruß javaDeveloper2011
 
Zuletzt bearbeitet von einem Moderator:
Wenn es um die Breite geht, wäre mein Code leicht anzupassen

Javascript: 
document.getElementById('time').style.width = (Sekunden + 180) + 'px';

Die Frage ist, ob der Kasten nach 59 Sekunden seine größte Breite haben soll (deine Lösung) oder bei Sekunde 59 (meine Lösung).

Übrigens kümmert sich parseInt auch um die Einheiten (px, em, %). Du brauchst die nicht entfernen.
 
Dankeschön Leute es klappt! Hat mit dem Code von CPoly geklappt!!
Genau, der Kasten hat nach 59 seine größte Größe. Vielen vielen Dank!
Genießt noch den freien Tag!! :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück