HTML Farbe ändern im Sekunden-Takt

Hallo, ich möchte im Sekunden-Takt die Farbe eines Textes in HTML ändern, wie geht das nun?

bsp.:

test

Soll seine Farbe von Rot auf Weiß ändern

Answer 1

[Dory1]

html

<p>Ein Text</p>

js

setInterval(function() {
    document.querySelector("p").style.color = '#'+Math.floor(Math.random()*16777215).toString(16)
}, 1000)

Comments

[Dory1]

Das wäre jetzt mit einer Zufallsfarbe. Wenn du immer zwischen rot und weiß wechseln möchtest, könnte man es vielleicht so lösen:

html

<p>Ein Text</p>

js

<script>
var i = false;
var e = document.querySelector("p");
setInterval(function() {
    if (i) {
        e.style.color = "red";
    } else {
        e.style.color = "white";        
    }
    i = !i;
}, 1000);
</script>

Answer 2

[Alextoexplain]

Hello there,

mal ganz abgesehen davon, dass dich jeder Webseitenbesucher für deine Idee hassen wird. Mit PHP wird das nichts, das ist dafür überhaupt nicht geeignet. Am schönsten löst du das Ganze mit einer Kombination aus JavaScript, dem JavaScript Framework jQuery und natürlich CSS.

Da ich jetzt zu faul bin, dir das fertig zu skripten, beschreib ich dir einfach was du machen musst:

Zunächst definierst du zwei CSS-Klassen, zum Beispiel .textwhite und .textred, in denen du beschreibst, dass die Textfarbe einemal weiß und einmal rot ist.

Anschließend musst du jQuery in dein Skript einbinden, dazu googlest du einfach mal nach Google Host Libraries, da wird dir gezeigt wie das mit Copy und Paste geht. Anschließend schreibst du eine Funktion, die bereits beim Laden ausgeführt wird.

$(document).ready(function(){
    
    function aenderefarbe()
    {};
    
});

In dieser Funktion musst du deinen Text anwählen via jQuery. Dazu musst du darauf achten, dass du den Text überhaupt anwählen kannst, falls du das nicht kannst, setze in deinem HTML-Dokument den betreffenden Text in

<span id="multicolortext" class ="textwhite">meintollertext</span>

Weiterhin stellt dann jQuery eine Methode namens ToggleClass zur Verfügung, die es ermöglicht, zwischen zwei verschiedenen CSS-Definitionen hin- und her zu wechseln, in dem Fall deinen beiden Farben. Dieses musst du dann mit einer der beiden JavaScript-Funktionen "Set Interval" oder "Set Timeout" kombinieren, diese sagen aus, dass eine Funktion immer wieder ausgeführt wird, wenn eine bestimmte Zeit abgelaufen ist.

Wenn du gar keine Ahnung von JavaScript und CSS hast, wirst du dir zwar schwer tun, aber prinzipiell kannst du all diese Sachen googlen und wirst im Internet die nötigen Schnipsel finden, aus denen du dir die Lösung basteln kannst^^ auch wenn ich es immer bisschen doof finde, wenn man Code zusammen kopiert ohne zu wissen, was man eigenlich skriptet :(

Hoffe es hilft trotzdem weiter.

MfG

Alex

Comments

[rmnstr]

Die Antwort liefert alles was du brauchst.

Answer 3

[sterneelfe]

ich gluabe du musst, in der Zeile wo die Farbe eingetragen wird, rot einschreiben. Zeile kopieren unter der Zeile einfügen, rot raus und weiß reinschreiben.

denk ich, wir haben das in Info zwar nicht durchgenommen versuchs aber einfach mal so.

Comments

[0rang3nS4ft]

So geht das leider nicht ganz, trotzdem danke.

[sterneelfe]

@0rang3nS4ft

ich hatte html zwar in info, aber ist auch nicht mehr auf dem neuesten stand mein wissen

[0rang3nS4ft]

@sterneelfe

Ich glaube es lässt sich auch nicht ohne andere Zusätze wie Javascript, CSS oder PHP lösen.

Answer 4

[Maldas]

Um dynamische Websiten wie diese zu erstellen brauchst du PHP. Das ist eine Programmiersprache für dynamische Inhalte. Mach dich mal bei Google schlau.

Comments

[thecakewasalie]

Bist du besoffen? Mit PHP kannst du noch nichtmal einen div auswählen, wie soll man damit Farben ändern?

Außerdem ist das Serverseitig - muss sich also immer neu einladen.

[Alextoexplain]

@thecakewasalie

naja auswählen nicht. Er könnte natürlich hergehen und via Ajax ein Skript nachladen, dass dann jedes mal mit echo das div in der neuen Farbe ausgibt. und zurück schickt. Hätte doch mal Stil :DDDDD. Was aber nichts daran ändert, dass er dann trotzdem noch mit JavaScript das alte Div wieder entfernen müsste. ^^

[pixelfriend]

Mit ner while Schleife wirds nicht hinhauen. Du bräuchtest wenn du PHP unbedingt nutzen willst, schon nen Thread damit sich das ganze nicht aufhängt. In den Thread könntest du eben ne random auswahl reinpacken die eben nen bestimmten HTML code dann ausführt. Aber mir ist bis jezt noch kein timer in PHP vorgekommen. (Zumindest habe ich nie damit gearbeitet.)

[Maldas]

Sorry, ihr habt Recht. Natürlich braucht man dafür JavaScript! Ich hab die Frage wohl falsch verstanden :P

Answer 5

[threadi]

Das kann man auch mit reinem CSS lösen. Schau dir mal keyframes und animation an. Ähnlich wie hier: http://iamchenghan.host22.com/css3_color_animation_demo.html nur eben auf color statt background-color bezogen.

Woher ich das weiß: Berufserfahrung – mit dem Internet verbunden seit 1993

Comments

[Alextoexplain]

Die reine CSS-Lösung ist zwar recht gut, aber meiner Meinung nach für nen Anfänger noch etwas undurchsichtiger. Ich hab die beim Recherchieren auch gesehen und sie deswegen nicht vorgeschlagen. Außerdem wird der neue CSS3-Standard, der hier verwendet wird, leider noch nicht überall voll unterstützt :/