Keresés: - JavaScript topic - Fototrend Hozzászólások

LOGOUT témák

PROHARDVER! témák

Mobilarena témák

IT café témák

GAMEPOD témák

Keresés

Fototrend

Frissítve: 2014-02-25 10:20 Téma összefoglaló

Fototrend

JavaScript != Java (A JavaScript nem összekeverendő a Javával, két különböző programozási nyelvről van szó!)

Új hozzászólás Aktív témák

martonx veterán

#7586
#7582 hiperFizikus
2019-12-11 11:36:31

Új Válasz
Új hozzászólás
Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

martonx

veterán

#7582 hiperFizikus

#7582 hiperFizikus
Köszönöm neked !
Eddig jutottam . Ennek működni kéne, szépen villognia kéne, de azért nem működik mert sehogyanse nincs megoldva benne a paraméterátadás . Talán valami this.w01 = w01; kell bele, nem tudom ígyse működésre bírni . Hogyan kell a paraméterátdást megoldani benne, hogy szépen villogjon ? Persze a setInterval(frame, 3) 3-as száma helyet bármekkora számot tehettek .
<!DOCTYPE html>
<html>
<head><title>pr 04; canvas animation</title></head>
<body>
<p><button onclick="start1()">Start 1</button></p>
<p><canvas id="idCanvas01" width="300" height="200" style="border:3px solid black;"></canvas></p>
<script>
function start1() {
var canDim01 = document.getElementById("idCanvas01"); // megnyitja a canvas-t
var w01 = canDim01.getContext("2d");
w01.fillRect(50,100,80,40) ; // téglalapot ad meg
var pos = 0; // számlálóhoz lesz
var BL1 = true ; // billegtetéshez lesz
// alert("1 ::" +"\n"+ pos +"\n"+ BL1);
var id = setInterval(frame, 3); // az animáció motorja
function frame() {
// this.w01 = w01; // talán valami ilyesmi hiányzik
if (pos == 10) {
clearInterval(id); // leállítja a motort
} else {
// alert("2 ::" + "\n" + pos +"\n" + BL1);
pos++; // számot változtat
if (BL1) {
// alert("31 ::" +"\n"+ pos +"\n"+ BL1);
w01.fillStyle = "red" ; BL1 = false ; // színt változtat pirosra
} else {
// alert("32 ::" +"\n"+ pos +"\n"+ BL1);
w01.fillStyle = "blue" ; BL1 = true ; // színt változtat kékre
};
};
};
w01.stroke(); // bezárja a canvas-t
};
</script>
</body>
</html>
Ez egy másik kódból lett átvéve, evvel a másik kóddal nincs semmi bajom, csak azért tettem fel, hogy megnézhessétek :
<!DOCTYPE html>
<html>
<head><title>pr 03; w3school animaton</title></head>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
</script>
</body>
</html>

Tessék: https://jsfiddle.net/esf84dch/ remélem a megváltó könyvbe belekerülünk, mint angyalok
hiperFizikus senior tag

#7583
#7582 hiperFizikus
2019-12-11 02:34:35

Új Válasz
Új hozzászólás
Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

hiperFizikus

senior tag

#7582 hiperFizikus

#7582 hiperFizikus
Köszönöm neked !
Eddig jutottam . Ennek működni kéne, szépen villognia kéne, de azért nem működik mert sehogyanse nincs megoldva benne a paraméterátadás . Talán valami this.w01 = w01; kell bele, nem tudom ígyse működésre bírni . Hogyan kell a paraméterátdást megoldani benne, hogy szépen villogjon ? Persze a setInterval(frame, 3) 3-as száma helyet bármekkora számot tehettek .
<!DOCTYPE html>
<html>
<head><title>pr 04; canvas animation</title></head>
<body>
<p><button onclick="start1()">Start 1</button></p>
<p><canvas id="idCanvas01" width="300" height="200" style="border:3px solid black;"></canvas></p>
<script>
function start1() {
var canDim01 = document.getElementById("idCanvas01"); // megnyitja a canvas-t
var w01 = canDim01.getContext("2d");
w01.fillRect(50,100,80,40) ; // téglalapot ad meg
var pos = 0; // számlálóhoz lesz
var BL1 = true ; // billegtetéshez lesz
// alert("1 ::" +"\n"+ pos +"\n"+ BL1);
var id = setInterval(frame, 3); // az animáció motorja
function frame() {
// this.w01 = w01; // talán valami ilyesmi hiányzik
if (pos == 10) {
clearInterval(id); // leállítja a motort
} else {
// alert("2 ::" + "\n" + pos +"\n" + BL1);
pos++; // számot változtat
if (BL1) {
// alert("31 ::" +"\n"+ pos +"\n"+ BL1);
w01.fillStyle = "red" ; BL1 = false ; // színt változtat pirosra
} else {
// alert("32 ::" +"\n"+ pos +"\n"+ BL1);
w01.fillStyle = "blue" ; BL1 = true ; // színt változtat kékre
};
};
};
w01.stroke(); // bezárja a canvas-t
};
</script>
</body>
</html>
Ez egy másik kódból lett átvéve, evvel a másik kóddal nincs semmi bajom, csak azért tettem fel, hogy megnézhessétek :
<!DOCTYPE html>
<html>
<head><title>pr 03; w3school animaton</title></head>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
</script>
</body>
</html>

Most jut eszembe: a 3-as helyet 1000 kell, mert milliszekundumokban mér .