Text switch alle paar Sekunden
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.
Habe versucht den HTML Code über Google Chrome > Untersuchen rauszukopieren. (auf Page wo das funktioniert)
Folgendes wurde aus der Stelle kopiert:
Kommentar abgeben zu diesen Beitrag/Code ?
Habe versucht den HTML Code über Google Chrome > Untersuchen rauszukopieren. (auf Page wo das funktioniert)
Folgendes wurde aus der Stelle kopiert: Dann hier klicken
Der hier verwendete Code
<style>
body{
height:100vh;
text-align:center;
}
div{
margin-top:calc(50vh - 30px)
}
#zahl,#texte{
font-size:30px;
}
#texte{
font-size:30px;
}
</style>
<body>
<div id="ausgabe"></div>
</body>
<script>
var tempo=2000;// Sekunden mal 1000 (1000 = 1 Sekunde)
var texte=['Standard-Paletten',
'Millionen möglichen',
'Farbwerte benutzen',
'besteht kein Zwang',
'gestalterischen Gründe dagegensprechen',
'bieten diese Paletten',
'gewisse Orientierung',
'Auf jeden Fall haben solche Farbpaletten',
'einen technischen Vorteil',
'verschiedenen Hardware-Typen',
'und verschiedenen Betriebssystemen'];
function farben_random(){
var farben=['red','green','blue','lightgreen','darkred','grey','DarkGrey','DarkGreen','Gold','LightGrey','LightGreen','LightPink','Lime','LimeGreen','Orange','OrangeRed','Pink','Red','SkyBlue','SteelBlue','Tomato','Violet','Yellow','YellowGreen'];
return farben[rand_zahl(0, farben.length-1)];
}
/*Ab hier nix mehrt ändern auser du wei0 was du tust */
var inhalt=document.getElementById('ausgabe');
function rand_zahl(zahlmin, zahlmax) {
return Math.floor(Math.random() * zahlmax) + zahlmin;
}
setInterval(function(){
zahlout=rand_zahl(0 ,texte.length-1);
color=farben_random();
inhalt.innerHTML="<div style='color:"+color+"'><span id='zahl'>"+zahlout+" </span><span id='texte'> "+texte[zahlout]+"</span></div>";
},tempo);
</script>