Text switch alle paar Sekunden

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

stefane9

Neues Mitglied
3 Oktober 2019
5
0
1
28
Liebe Gruppe, ich bin aktuell am grübeln wie ich folgendes auf meine Page einfüge:

Erklärung:
Und zwar gehts darum, dass sich ein eingegebener Text alle 3-5 sekunden ändert und ein anderer an selber Stelle auftritt.

- siehe Gif.

preview.gif

Habe versucht den HTML Code über Google Chrome > Untersuchen rauszukopieren. (auf Page wo das funktioniert)
Folgendes wurde aus der Stelle kopiert:


<div class="hurry">
<div class="display">
<div class="stock" style="display: none;"> Hurry, only <strong class="stock-level">10</strong> left at this price.</div>

<div class="sold" style="display: block;">
<strong class="number">54</strong> sold in the <span class="time-span">last <strong> 3 hours</strong></span>
</div>

</div>

</div>



Ist womöglich ganz banal und klar dass das so nicht funktioniert - bin leider nicht so fortgeschritten bezüglich HTML & CSS.
- würde mich dennoch sehr über Hilfe freuen.

LG und vielen Lieben Dank!


Ps. zusätzlich habe ich gerade gesehen dass sich die Zahlen auch kontinuierlich (willkürlich?) ändern. Wie ist das möglich?
- laut code oben sollte die Zahl "54" kommen - im Gif ist aber die Zahl "70" zu sehen.
Wie macht man sowas?
 
Zuletzt bearbeitet:

basti1012

Senior HTML'ler
26 November 2017
1.069
113
63
38
Minden
sebastian1012.bplaced.net

stefane9

Neues Mitglied
3 Oktober 2019
5
0
1
28
An besten wäre mal ein Link zur Seite dann kann man dir das genau sagen wie die das gemacht haben.
Ich denke aber mit Javascript.


Man kann es so machen

Mit Javascript brauch man Math.random , setInterval und in den Beispiel arrays mit den Texten und Farben

Oder nur mit html und css
Doch da geht es nur fester Farbe und fester reinfolge. Zufalls Texte gehen da meines wissen nicht
Vielen lieben Dank für die rasche Hilfe.
Der HTML/CSS Code ist aufjedenfall „verständlicher“ für mich. :)
 

basti1012

Senior HTML'ler
26 November 2017
1.069
113
63
38
Minden
sebastian1012.bplaced.net
Vielen lieben Dank für die rasche Hilfe.
Der HTML/CSS Code ist aufjedenfall „verständlicher“ für mich. :)
Ok , kann ich verstehen , da sind nur die möglichkeiten begrenzt.
In den JS Code könnte man ein Random auf alle 16 millionen Farben setzen da wird wohl nie der gleiche Text mit der gleichen Farbe kommen.
Das kannst du in der Css Variante natürlich nicht machen, außer du willst 16 millionen mal anzahl texte in der Css und html definieren.

Wenn dir die html Variante reicht ist ja gut. Die kann man so wie sie ist auch ohne probleme verlängern.
Man könnte bei jeden Text auch noch verschiedene Zahlen anzeigen lassen ( feste reinfolge ), doch das würde den Code auch noch einiges verlängern
 
Zuletzt bearbeitet:

stefane9

Neues Mitglied
3 Oktober 2019
5
0
1
28
Hab versucht den HTML/CSS code so umzuschreiben, dass es lediglich 2 verschiedene Texte hat und den die ganze zeit switcht. Leider hab ich es nicht hinbekommen. Habe irgendwie den Code verschlampt.

Wie würde das im Falle von lediglich 2 custom texten aussehen? Und so dass einer IMMER in der Farbe zb.: rot (bzw. allgemein gleicher "style" ist und der 2. text immer in zb.: blau (auch gleicher style)?


Beispiel - so ähnlich würde ich es brauchen..

So in etwa text nr1:
12 Lamps™ sold today - farbe Blau.

text2:
(insert text) farbe rot.

- kann man auch eine endlosschleife setzen sodass sich die 2 alle paar sekunden abwechseln?






Editiert hat leider nicht funktioniert:
Hab in deinem zusammengetragenen CSS

" #box > #innen > #text3{
color:SteelBl !important; "

versucht die folgenden Codeabschnitte von Nummer 3 bis nummer 8 so umzuschreiben, dass ich immer abwechselnd die nummer 1 und 2 eingetragen habe. Ich dachte mir dass dann immer der Text nummer 1 und 2 wiederholt wird.
Leider hat er aber nichts mehr angezeigt im preview fenster.

Zur veranschaulichung:


#box > #innen > #text1{
color:blue !important:
}
#box > #innen > #text2{
color:SkyBlue !important;
}
#box > #innen > #text1{
color:SteelBl !important;
}
#box > #innen > #text2{
color:Tomato !important;
}
#box > #innen > #text1{
color:grey !important;
}
#box > #innen > #text2{
color:yellow !important;
}
#box > #innen > #text1{
color:blue !important;
}
#box > #innen > #text2{
color:green !important;
}
#box > #innen > #text1{
color:red !important;
}


so habe ich es versucht. LG
 
Werbung: