0 votes
in SoSci Survey (dt.) by s047286 (325 points)

Hallo,

ich habe den folgenden Code geschrieben, um nach dem Klick auf einen Button eine visuelle Zählaufgabe (pulsierendes Bild) zu starten:

<div style="text-align: center; margin: 40px 0"> <img name="blinker1" src="Circle.png"></div>

Bitte klicke hier, wenn du loslegen möchtest: <input id="clickMe" type="button" value="Start" onclick="startBlink()" /> 

<script type="text/javascript">
        document.images["blinker1"].style.visibility = "hidden"; //hide image on load
        numberOfBlinks=15; //image blinks for n-times
        timeIntervall=349 // time in ms, divide by 1000 for seconds
            
function startBlink() {
	    i=0
        imgLoop = window.setInterval("blinkImg()", timeIntervall) 
        }

function blinkImg() {       
        var obj = document.images["blinker1"];
        if (obj.style.visibility == 'hidden') {
	obj.style.visibility = '';
	i = i + 1; }
else {
	obj.style.visibility = 'hidden'
        console.log(i) }
        if (i>numberOfBlinks) {
	window.clearInterval(imgLoop);
	obj.style.visibility = 'hidden' }
};
</script>

Mein Problem ist, dass das Blinken des Bildes unmittelbar nach dem drücken des Buttons beginnt. Leider sind meine Java-Script Kentnisse zu schlecht um zu beurteilen mit wie viel Aufwand man eine Verzögerung in diesen Code hineinschreiben könnte. Auch ein visueller Countdown (3,2,1, GO) innerhalb des Buttons wäre denkbar.

Vielleicht kann mir jemand helfen?

Vielen Dank im Voraus

1 Answer

0 votes
by SoSci Survey (302k points)

Vorab: Der Code ist nicht ganz sauber. Zum Beispiel werden da mehrere globale Variablen (numberOfBlinks, imgLoop, i, ...) verwendet, aber nicht mit var deklariert. Auch document.images["blinker1"] sieht nach altem Internet Explorer Code aus - vermutlich würde man heute eher document.getElementById("blinker1") schreiben.

Abgesehen davon ist das mit der Verzögerung relativ einfach. Sie machen aus...

function startBlink() {
	i=0
	imgLoop = window.setInterval("blinkImg()", timeIntervall) 
}

Einen verschachtelten Aufruf mit window.setTimeout()

function startBlink() {
	window.setTimeout(function() {
		i=0
		imgLoop = window.setInterval("blinkImg()", timeIntervall) 
	}, 1000);
}

Die 1000 in der vorletzten Zeile sind 1000 ms Verzögerung, also 1 Sekunde.

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...