Hoe maak tekst die na 10 seconden verandert?

Status
Niet open voor verdere reacties.
G

gtabestmodsever

Gebruiker
Lid geworden
29 mei 2010
Berichten
208
Hoe maak je tekst die bijv. na 10 seconden verandert? Ik wil a.u.b een html tag!!

EDIT: ik zoek een javascript ervoor!
 
Laatst bewerkt:
Laatst bewerkt:
HTML: 
<span id='stuff'></span>
[JS]var index = -1, data = [
'dit is de 1e',
'de 2e',
'moar!'
]; // voeg hier meer aan toe enzo

setInterval(function()
{
document.getElementById('stuff').innerHTML = data[(++index % data.length)];
}, 10000); // 10 * 1000 ms = 10 secondes[/JS]met gratis onmogelijke array index aanroep!
 
That Guy zei:
HTML: 
<span id='stuff'></span>
[JS]var index = -1, data = [
'dit is de 1e',
'de 2e',
'moar!'
]; // voeg hier meer aan toe enzo

setInterval(function()
{
document.getElementById('stuff').innerHTML = data[(++index % data.length)];
}, 10000); // 10 * 1000 ms = 10 secondes[/JS]met gratis onmogelijke array index aanroep!
Klik om te vergroten...

Thanks, dit zocht ik bedankt vraag opgelost.
 
Het is niet gelukt... waarom?
Klik om te vergroten...
= Waarom niet? = ... als dat bekend was, was er geen probleem! :p

Goed, nu serieus. Ik was intussen even bezig met de That Guy oplossing: die komt altijd aanzetten met een script waarbij ik even op m'n hoofd moet krabben. :)
Hier met toepassing van de "% = modulus"; die kende ik niet (ook niet zo'n js-held, weer wat geleerd).
Dat vroeg om een test om te zien hoe 't nou precies werkte. :d
Komt er zo ongeveer op neer: het index-getal wordt steeds met 1 opgehoogd, en dan wordt de rest van het delen door het aantal wisselteksten bepaald: dat is steeds een oplopend getalletje van 0 tot dat aantal (min 1 eigenlijk), en dat getalletje wordt gebruikt om de handel te bedienen. Da's leuk!
Er zal nog wel een voorzieninkje bij moeten komen om bij de start meteen de eerste wisseltekst te tonen, want nu begint die pas na de eerste 10 seconden van de setInterval.
Maar die oplopende index, eindigt die nooit? Nee, die gaat oneindig door! Tijd voor versnelling met:
Hier is de wisseltijd teruggebracht tot zo klein mogelijk: 1ms. Na een tijdje ratelen kan je kijken op welke stand de index gearriveerd is. Dat gaat redelijk snel inderdaad! Even koffie ophalen en hij staat al boven de 10.000.
Nu zal het met de 10 seconden tussentijd in het echt niet zo'n vaart lopen, maar op deze manier zou in principe op een gegeven moment het geheugenbankje van m'n computer toch echt vol moeten zitten (met onbekende afloop).
Andere methode?
Zou ook moeten kunnen, door de index telkens weer opnieuw bij 1 te laten beginnen = een soortement loopje.
Meteen even ingebouwd dat de start meteen de eerste wisseltekst aanroept. Dat zou ook kunnen door die in te vullen in de <span>. Maar als je dan eens de eerste wisseltekst wilt veranderen, moet je er wel aan denken dat dat op 2 plaatsen moet gebeuren. Vandaar: geregeld met een extra regeltje script, dan gaat het automatisch.
En even checken wat er gebeurt bij loeieren:
Indendraad, stopzetten op een willekeurig moment laat zien dat de index nooit hoger dan 3 komt (en dan automatisch naar 0 wordt gereset).
Zo hoef ik niet bang te zijn voor grote getallen in mijn geheugen. :D

Een goed 2011!
CSShunter
 
Laatst bewerkt:
Ik zei dat waarom niet omdat ik een hekel heb aan berichten als "het lukt niet"... Want er staat geen code bij, niet wat er fout gaat, of wat er uit komt :P
 
Da-snapte-ik-wel-'oor! Beetje oliebollen-bui.;)

Een goed 2011!
CSShunter
 
die komt altijd aanzetten met een script waarbij ik even op m'n hoofd moet krabben.
Klik om te vergroten...
Hah, nou, deze keer was ik zelf ook verbaast over de onnodige moeilijkheid. Maar het was toch een beetje expres, want ik weet zeker dat men gewoon met wat simpel gegoochel het had kunnen vinden.

Er zal nog wel een voorzieninkje bij moeten komen om bij de start meteen de eerste wisseltekst te tonen, want nu begint die pas na de eerste 10 seconden van de setInterval.
Klik om te vergroten...
Ow, misschien is het toch niet zo'n slecht idee om toch een mooie spreuk tussen de <span> te zetten. Dan hebben mensen die javascript uit hebben staan (bv. met text-browsers) ook iets te lezen.
Klik om te vergroten...
Wat mijn eerste ingeving was, is de 1e zin in de <span> zetten, en dan beginnen met 2:
HTML: 
<span id='stuff'>1e zin</span>
[JS]var index = 0, data = [
'1e zin',
'de 2e zin',
'meer zin!'
];
[/JS](0 wordt direct 1, en data[1] is de 2e zin). Heb je ook gelijk 'fallback' voor geen JS.



:thumb:



[edit]ohja. Prettig nieuwjaar[/edit]
 
1e zin in de <span> zetten, en dan beginnen met 2
Klik om te vergroten...
Ja, dat was mijn 1e impuls ook. Even later bedacht ik dat het ook mogelijk zou kunnen zijn om er een vervolgverhaal van te maken:
[JS]var index = 0, data = [
'Heeft u er al aan gedacht ...',
'... dat al onze websites ...',
'... de hoogste kwaliteit hebben ...',
'... volgens de <a href="webrichtlijnen.nl">Webrichtlijnen<\/a> ...',
'... en dat helaas maar weinigen ...',
'... ons dat kunnen nazeggen?'
];[/JS]
Vandaar de meest universele versie met een losse slogan voor no-scripters neergepend, opdat zij zich niet eeuwig zullen afvragen waar ze aan hadden moeten denken. ;)
Maar als kreet 1 meteen de no-script kreet kan zijn, dan hoeft dat natuurlijk niet.

O, nu ik het zo over de Webrichtlijnen heb, bedenk ik ook dat als je een automatisch tekst-carroussel hebt, je dat ook moet kunnen vertragen en/of stopzetten. Richtlijn R-pd.2.9 die verwijst naar o.a. Richtlijn 7.3 van de WCAG!

Zo is er altijd nog wat te doen! :)
 
[...] bedenk ik ook dat als je een automatisch tekst-carroussel hebt, je dat ook moet kunnen vertragen en/of stopzetten.
Klik om te vergroten...
Gelukkig is dat niet heel erg lastig:[JS]// hier de index + data array
var timer = null; // noot: globale var

function start()
{
timer = setInterval(function()
{
// index++, array lookup, d.gEBY call, etc.
}, 1);
}

function stop()
{
clearInterval(timer);
}[/JS]
HTML: 
<button onclick='start();'>start</button>
<button onclick='stop();'>stop</button>
Er moet dan wel een body onload naar start() gemaakt worden, of gewoon een call naar de functie onder de functie zelf (of iets in die richting).


Beetje offtopic, maarja, script magie! :thumb:
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan