[JS] Problem z czekaniem

Question

Witam, mam na mojej stronie obraz o id 'klikacz' i chcę aby się obracał. W tym celu napisałem kod JS, jednak on nie działa. W konsoli dostaję błąd:

javascript.js:3 Uncaught RangeError: Maximum call stack size exceeded

 Oto kod:

var kat = 0;

function obrot_klikacza()
{
	kat++;
	if(kat > 360) kat=0;
	var transform = "rotate("+kat+")"
	document.getElementById('klikacz').style.transform=transform;
	setTimeout(obrot_klikacza(), 1000)
}

window.onload = obrot_klikacza();

 

Comments

A dlaczego nie zrobisz obrotu normalnie np. przy użyciu @keyframes i po prostu dodaniu w JS np. "click" odpowiedniej animacji? Ewentualnie na :hover lub w ogóle dodać animation jeśli ma to być ciągła animacja. Od takich rzeczy dzisiaj jest CSS, a nie JS.

---

Dzięki, poczytam o tym na W3 i dam znać jak coś wykombinuję.

---

Ok, zrobiłem to tak, dzięki.

#klikacz
{
	display: block;
	position: absolute;
	width: 100px;
	height: 100px;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	animation: obrot_klikacza 3.5s linear 0s infinite normal;
}

@keyframes obrot_klikacza
{
	from
	{
		transform: rotate(0deg);
	}
	to
	{
		transform: rotate(360deg);
	}
}

 

---

Popatrz sobie na bibliotekę animace.css, a dokładniej na jej źródła na githubie:

https://github.com/daneden/animate.css/tree/master/source

I poanalizuj z dostępnym demo :)

A tak na marginesie to nie styluj po id, tylko nadaj elementowi klasę. Dzięki temu łatwiej np. dodasz za chwilę te same style innemu elementowi i możliwe będzie nadpisanie styli jeśli zajdzie taka konieczność. i druga kwestia staraj się stosować jednak nazewnictwo angielskie.

Pokombinuj też z jednostkami, aby do minimum ograniczać PX na rzecz procentów czy ewentualnie rem/em aby dać większą responsywność elementom.

---

Dzięki, przejrzałem tą bibliotekę i znalazłem tam kilka ciekawych rozwiązań.

A co do używania procentów zamiast px to postaram się to robić w następnych projektach, lecz tworzę grę przeglądrkową i nie było to potrzebne.