Hallo JS Experte,
ich möchte zwei Wörter aus einen beliebigen Text in einer anderen Farbe machen. Diese zwei Wörter sollen sich Zeitlich ändern. Im Mustertext werden diese dann mit green dargestellt.
Hier wäre ein Mustertext:
In der ersten Sekunde:
Das ist der Mustertext mit vielen wörtern…
In der zweiten Sekunde:
Das ist der Mustertext mit vielen wörtern…
In der dritten Sekunde
Das ist der Mustertext mit vielen wörtern…
4,5,6… Sekunde
…
Wie kann man sowas mit JS machen?
Lg,
Chris
mein Tipp, der einfacheren selektion der textabschnitte wegen, verwende jquery, ein javascript framework, ist allgemein recht praktisch.
dann baust du den text so auf, dass alle farblich zusammen haengenden text teile jeweils zusammen in einem span tag liegen.
Am besten gibst du den tags jeweils aufsteigende numerische ids und dazu beim farblich hervorgehobenen eine class=„green“.
Dann kannst du per setIntervall() jeweils die class entfernen und dem nächsten abschnitt zuweisen.
Das ist
der farbige
Text
und im JS mit jquery
var i = 1;
setIntervall(function(){
$(‚span‘).removeClass(„green“);
$(‚span#‘+i).addClass(„green“);
i++;
},1000);
Hallo Philipp,
danke für die schnelle AW.
Eine Frage noch.
Wie kann ich einen Span aus meinen String machen?
Wörter spliten mit:
meinewoerter.split(’ ').length;
Eine for oder while loop dazu?
Lg,
Chris
so habe eben mal was zusammen geschustert nach deinen angaben.
ich würde es nicht mit JS machen sondern mit jquery.
so oder so ähnlich könnte es gehen. allerdings habe ich es nicht ausprobiert.
Hier wäre ein Mustertext:
In der ersten Sekunde:
Das ist der Mustertext mit vielen wörtern…
In der zweiten Sekunde:
Das ist der Mustertext mit vielen wörtern…
In der dritten Sekunde
Das ist der Mustertext mit vielen wörtern…
4,5,6… Sekunde
$(document).ready(function(){
$("#green1").css({„color“:„green“})
$("#green2").delay(1000).css({„color“:„green“})
$("#green3").delay(2000).css({„color“:„green“})
})
Aber sicher kann man das mit JS machen.
Am einfachsten geht es mit einem Framework wie z. B. jQuery
Beispiel mit Farben:
http://api.jquery.com/css/
Hoffe das hilft dir weiter =)
\<!--
var WechselZeit = 1000;
var xCounter = 0;
FarbArr = new Array()
// Farben hier eintragen
FarbArr[FarbArr.length] = "#FF00FF";
FarbArr[FarbArr.length] = "#00FFFF";
FarbArr[FarbArr.length] = "#FF0000";
FarbArr[FarbArr.length] = "#009F00";
FarbArr[FarbArr.length] = "#AF00FF";
FarbArr[FarbArr.length] = "#00AFFF";
FarbArr[FarbArr.length] = "#FF9F00";
function FarbWechsel() {
if (xCounter \< FarbArr.length) {
document.getElementById('FarbText').style.Color = FarbArr[xCounter];
setTimeout ("FarbWechsel()",WechselZeit);
xCounter = xCounter+1;
}
else {
xCounter = 0;
FarbWechsel();
}
}
// Startverzögerung
setTimeout('FarbWechsel()', 3000);
//--\>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam .
Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Hier ein Ansatz
Test
red = 255;
green = 0;
blue = 0;
redE = 102;
greenE = 0;
blueE = 255;
function wechsel() {
document.getElementById(‚wechsel‘).style.color = „rgb(“+red+", „+green+“, „+blue+“)";
if( red == redE ) { }
else {
red++; }
if( green == greenE ) { }
else {
green++; }
if( blue == blueE ) { }
else {
blue++; }
if( blue == blueE && red == redE && green == greenE ) {}
else {
setTimeout(„wechsel()“, 10); }
}
Hallo
Hallo,
kommt drauf an ob der Text dynamsich ist und sich ggfls. ändern kann, oder ob du den Text so Wort1 wort2Wort3 wort4 taggen kannst.
Im zweiten Fall einfach eine rekursive Funktion mit einer Schleife.
Beste Grüße, Frank
Vielen Dank für die AW.
Danke für die AW. 
Danke für die AW.
.
Ich kann Dir gerne auch einen Beispielcode posten. Nur dann müsste ich, wie bereits erwähnt, wissen ob der Text mit span versehen kann, oder ob man anhand der Leerzeicheichen die Wörter erkennen muss.
Beste Grüße, Frank
Danke für die AW.
…
Hallo ShiAinE,
dazu kann ich nur eines sagen.
Super, Großartig.
Englisch: awesome
Spanisch: gran
Französisch: magnifique
Jetzt muss ich mir nur noch überlegen wie ich den Text jeweils in 2 Wörter spliten kann und dann noch mit Pfeiltasten steuern kann (Pfeiltaste rauf mehr als 2 Wörter, runter weniger, Pfeiltaste rechts um eine zehntel Sekunde schneller springen lass, links langsamer).
Lg,
Chris
Hallo,
ja, das geht! Sicher auf verschiedene Weisen. Ein Beispiel (geht bestimmt auch noch einfacher):
var MT
var MTarr = new Array
var MTneu = new Array();
var MTneuarr = new Array();
var Farbende= „\</span\>“
var Farbanfang = „\<span style=‚color:red‘\>“
function Farbebestimmen(pos)
{
if (pos > MTarr.length -2) pos = 2
for (i=0;i<=pos;i++)
{ MTneuarr[i] = MTarr[i]
}
MTneuarr[pos] = Farbanfang
MTneuarr[pos + 1] = MTarr[pos]
MTneuarr[pos + 2] = MTarr[pos+1]
MTneuarr[pos + 3] = Farbende
for (i=pos+4;i<=MTarr.length;i++)
{
MTneuarr[i] = MTarr[i-2]
}
MTneu=""
for (i=0;i<MTarr.length + 1;i++)
{
MTneu = MTneu + " " + MTneuarr[i]
}
//alert (MTneu)
document.getElementById(„Mustertext“).innerHTML = MTneu
j = pos + 2
window.setTimeout(„Farbebestimmen(j)“,2000)
}
Das ist ein Mustertext, bei dem immer wieder Wörter in anderer Farbe dargestellt werden. Hoffentlich!
Gruß - und hoffe, es kommt nicht all zu spät!
Meinst du so?:
http://jsbin.com/oRUCACE/6
Grüsse
Demii
Hallo Hammurabi66,
dazu kann ich nur eines sagen.
Super, Großartig.
Englisch: awesome
Spanisch: gran
Französisch: magnifique
Habe versucht den Code zu extrahieren, er funktioniert aber noch nicht ganz. ( http://www.bestaltmed.at/SpeedreadingII/indexx.php ) Vll kannst du mir sagen wieso?
Anschließend muss ich mir nur noch überlegen wie ich den Text jeweils in 2 Wörter spliten kann und dann noch mit Pfeiltasten steuern kann (Pfeiltaste rauf mehr als 2 Wörter, runter weniger, Pfeiltaste rechts um eine zehntel Sekunde schneller springen lass, links langsamer).
Lg,
Chris
ok sagte ja nur was schnell zusammengeschustert^^
Update: http://jsfiddle.net/HbbsU/2/
Das Problem war einfach das wenn ein Wort mehrmals vorgekommen ist hat er das letze genommen habe ich jetzt aber gelöst. Bitte bedenke das nur zusammenhängender text da durch läuft keine Zeilenumbrüche oder doppelten Leerzeichen geschweige denn html tags .
wegen deinen Pfeiltasten werde ich mich melden wenn ich was finde … habe so etwas noch nicht gebraucht^^
was genau willst du damit machen … könnte mir keinen Einsatzzweck dafür vorstellen
Hallo Chris,
„ich haben fertig“ 
Sollte alles so machen wie du beschreiben hast.
MFG
Hammurabi