nem tudom kitörölni a vonalat!

Medve · 2009. Május. 12. (K), 08.47

hali mindenki,
gondoltam írok egy egyszerű progit amivel egy kis koordináta rendszerben lehet vonalakat rajzolni.A kirajzolás az müködik is viszont nem tudom kitorolni.:P
Arra kérlek titeket, hogy valaki aki ért hozzá fussa már át legyen szives fejtse meg nekem mi a baj vele mert én már vagy két hete gyökölök rajta és nem tudtam megfejteni.

<html>
<head>
<title>Medve™ vektorgrafika 2.</title>
<script type="text/Javascript">
var i=1;
function rajzol(x1,y1,x2,y2){
var p0,px,A,B,p;
r=Math.round(Math.random()*250+1);
g=Math.round(Math.random()*250+1);
b=Math.round(Math.random()*250+1);
szin="rgb("+r+","+g+","+b+")";
p0=document.createElement('DIV');
p0.setAttribute('id','p0'+i);
p0.setAttribute('style','position:absolute;left:'+(parseInt(x1)-2.5)+'px;top:'+(parseInt(y1)-2.5)*(-1)+'px;width:5px;height:5px;background-color:'+szin+';');
p0.appendChild(document.createTextNode('P'+i));
document.getElementById('origo').appendChild(p0);
br=document.createElement('BR');
Padat=document.createElement('DIV');
Padat.setAttribute('id','Padat'+i);
Padat.appendChild(document.createTextNode('P'+i+'('+x1+';'+y1+')'));
Padat.appendChild(br);
document.getElementById('pontok').appendChild(Padat);
px=document.createElement('DIV');
px.setAttribute('id','px'+i);
px.setAttribute('style','position:absolute;left:'+(parseInt(x2)-2.5)+'px;top:'+(parseInt(y2)-2.5)*(-1)+'px;width:5px;height:5px;background-color:'+szin+';');
px.appendChild(document.createTextNode('P'+(i+1)));
document.getElementById('origo').appendChild(px);
br=document.createElement('BR');
Padat=document.createElement('DIV');
Padat.setAttribute('id','Padat'+i+1);
Padat.appendChild(document.createTextNode('P'+(i+1)+'('+x2+';'+y2+')'));
Padat.appendChild(br);
document.getElementById('pontok').appendChild(Padat);
line=document.createElement('HR');
line.setAttribute('style','width:80px;height:1px;');
document.getElementById('pontok').appendChild(line);
i=i+2;
A=(parseInt(y2)-parseInt(y1))*(-1);
B=parseInt(x2)-parseInt(x1);
db=1;
if (parseInt(y1) > parseInt(y2)){
for (var y=parseInt(y2); y <= parseInt(y1); y=y+0.1 ){
x=(A*parseInt(x1)+B*parseInt(y1)-B*y)/A;
p=document.createElement('DIV');
p.setAttribute('ID','p'+i+';'+db);
p.setAttribute('style','position:absolute;left:'+x+'px;top:'+(y*(-1)+4)+'px;width:2px;height:2px;background-color:'+szin+';');
document.getElementById('origo').appendChild(p);
db++;
}
}
if (parseInt(y1) < parseInt(y2)){
for (var y=parseInt(y1); y <= parseInt(y2); y=y+0.1 ){
x=(A*parseInt(x1)+B*parseInt(y1)-B*y)/A;
p=document.createElement('DIV');
p.setAttribute('ID','p'+i+';'+db);
p.setAttribute('style','position:absolute;left:'+x+'px;top:'+(y*(-1)+4)+'px;width:2px;height:2px;background-color:'+szin+';');
document.getElementById('origo').appendChild(p);
db++;
}
}
if (parseInt(y1) == parseInt(y2)){
if (parseInt(x1) < parseInt(x2)){
for (var x=parseInt(x1); x<=parseInt(x2);x++){
p=document.createElement('DIV');
p.setAttribute('ID','p'+i+';'+db);
p.setAttribute('style','position:absolute;left:'+x+'px;top:'+(parseInt(y1)*(-1)+4)+'px;width:2px;height:2px;background-color:'+szin+';');
document.getElementById('origo').appendChild(p);
db++;
}
}
else{
for (var x=parseInt(x2); x<=parseInt(x1);x++){
p=document.createElement('DIV');
p.setAttribute('ID','p'+i+';'+db);
p.setAttribute('style','position:absolute;left:'+x+'px;top:'+(parseInt(y1)*(-1)+4)+'px;width:2px;height:2px;background-color:'+szin+';');
document.getElementById('origo').appendChild(p);
db++;
}
}
}
}
function kitorol(){
for (var j=db; j>0 ;j--){
var torlendo="p"+(i-1)+";"+db;
var element=document.getElementById(torlendo);
element.document.getElementById('origo').removeChild(element);
db--;
}
}
</script>
</head>
<body>
<table >
<form name="adatok">
<tr>
<td colspan=2 align="left" >Kezdőpont koordinátái:</td>
</tr>
<tr>
<td align="right" >x1:</td>
<td align="left" ><input type="text" name="x1" size="2"></td>
</tr>
<tr>
<td align="right">y1:</td>
<td align="left" ><input type="text" name="y1" size="2"></td>
</tr>
<tr>
<td colspan=2 align="left" >Végpont koordinátái:</td>
</tr>
<tr>
<td align="right" >x2:</td>
<td align="left" ><input type="text" name="x2" size="2"></td>
</tr>
<tr>
<td align="right" >y2:</td>
<td align="left" ><input type="text" name="y2" size="2"></td>
</tr>
<tr>
<td align="left" colspan=2><input type="button" name="ok" value="Mehet" onClick="rajzol(x1.value,y1.value,x2.value,y2.value)">
<input type="button" name="torol" value="Töröl" onClick="kitorol()"></td>
</tr>
</form>
</table>
<div ID='tabla' style="position:absolute;left:200px;top:100px;">
<div ID="pontok" style="position:absolute;left:420px;top:0px;width:110px;height:370px;overflow:auto;">
<p align="left"><b>Pontok:</b></p>
</div>
<div ID="koordinatarendszer" style="position:absolute;left:0px;top:0px;width:400px;height:400px;border: 2px ridge white;overflow:hidden;">
<div ID="origo" style="position:absolute;left:200px;top:200px;width:1px;height:1px;background-color:#000000;">
<sup> 0</sup>
<div style="position:absolute;left:-200px;top:0px;width:400px;height:1px;background-color:#000000;text-align:right">
<sup> x</sup>
</div>
<div style="position:absolute;left:0px;top:-200px;width:1px;height:400px;background-color:#000000;">
<sup> y</sup>
</div>
</div>
</div>
</body>
</html>


<html>
<head>
<title>Medve&trade;  vektorgrafika 2.</title>
<script type="text/Javascript">
	var i=1;
	
	
	function rajzol(x1,y1,x2,y2){
		
		var p0,px,A,B,p;
		r=Math.round(Math.random()*250+1);
		g=Math.round(Math.random()*250+1);
		b=Math.round(Math.random()*250+1);
		szin="rgb("+r+","+g+","+b+")";
		

					
		p0=document.createElement('DIV');
		p0.setAttribute('id','p0'+i);
		p0.setAttribute('style','position:absolute;left:'+(parseInt(x1)-2.5)+'px;top:'+(parseInt(y1)-2.5)*(-1)+'px;width:5px;height:5px;background-color:'+szin+';');
		p0.appendChild(document.createTextNode('P'+i));
		document.getElementById('origo').appendChild(p0);
		br=document.createElement('BR');



		Padat=document.createElement('DIV');
		Padat.setAttribute('id','Padat'+i);
		Padat.appendChild(document.createTextNode('P'+i+'('+x1+';'+y1+')'));
		Padat.appendChild(br);
		document.getElementById('pontok').appendChild(Padat);		



		px=document.createElement('DIV');
		px.setAttribute('id','px'+i);
		px.setAttribute('style','position:absolute;left:'+(parseInt(x2)-2.5)+'px;top:'+(parseInt(y2)-2.5)*(-1)+'px;width:5px;height:5px;background-color:'+szin+';');
		px.appendChild(document.createTextNode('P'+(i+1)));
		document.getElementById('origo').appendChild(px);
		br=document.createElement('BR');


		Padat=document.createElement('DIV');
		Padat.setAttribute('id','Padat'+i+1);
		Padat.appendChild(document.createTextNode('P'+(i+1)+'('+x2+';'+y2+')'));
		Padat.appendChild(br);
		document.getElementById('pontok').appendChild(Padat);
		line=document.createElement('HR');
		line.setAttribute('style','width:80px;height:1px;');
		document.getElementById('pontok').appendChild(line);
		i=i+2;



		A=(parseInt(y2)-parseInt(y1))*(-1);
		B=parseInt(x2)-parseInt(x1);

		

		db=1;
		if (parseInt(y1) > parseInt(y2)){
			for (var y=parseInt(y2); y <= parseInt(y1); y=y+0.1 ){
				x=(A*parseInt(x1)+B*parseInt(y1)-B*y)/A;	
				p=document.createElement('DIV');
				p.setAttribute('ID','p'+i+';'+db);
				p.setAttribute('style','position:absolute;left:'+x+'px;top:'+(y*(-1)+4)+'px;width:2px;height:2px;background-color:'+szin+';');
				document.getElementById('origo').appendChild(p);
				db++;	
		
			}
		}
		
		if (parseInt(y1) < parseInt(y2)){
			for (var y=parseInt(y1); y <= parseInt(y2); y=y+0.1 ){
				x=(A*parseInt(x1)+B*parseInt(y1)-B*y)/A;	
				p=document.createElement('DIV');
				p.setAttribute('ID','p'+i+';'+db);
				p.setAttribute('style','position:absolute;left:'+x+'px;top:'+(y*(-1)+4)+'px;width:2px;height:2px;background-color:'+szin+';');
				document.getElementById('origo').appendChild(p);
				db++;		
			}
		}
		
		if (parseInt(y1) == parseInt(y2)){
			if (parseInt(x1) < parseInt(x2)){
			for (var x=parseInt(x1); x<=parseInt(x2);x++){
				p=document.createElement('DIV');
				p.setAttribute('ID','p'+i+';'+db);
				p.setAttribute('style','position:absolute;left:'+x+'px;top:'+(parseInt(y1)*(-1)+4)+'px;width:2px;height:2px;background-color:'+szin+';');
				document.getElementById('origo').appendChild(p);
				db++;
				}
			}
			else{
			for (var x=parseInt(x2); x<=parseInt(x1);x++){
				p=document.createElement('DIV');
				p.setAttribute('ID','p'+i+';'+db);
				p.setAttribute('style','position:absolute;left:'+x+'px;top:'+(parseInt(y1)*(-1)+4)+'px;width:2px;height:2px;background-color:'+szin+';');
				document.getElementById('origo').appendChild(p);
				db++;
			}

			}
		}
	}



	function kitorol(){
		for (var j=db; j>0 ;j--){
			var torlendo="p"+(i-1)+";"+db;
			var element=document.getElementById(torlendo); 
			element.document.getElementById('origo').removeChild(element); 
			db--;
		}
	}

</script>
</head>

<body>
<table >
	<form name="adatok">
	<tr>
	<td colspan=2 align="left" >Kezdőpont koordinátái:</td>
	</tr>
	
	<tr>
	<td align="right" >x1:</td>
	<td align="left" ><input type="text" name="x1" size="2"></td>
	</tr>

	<tr>
	<td align="right">y1:</td>
	<td align="left" ><input type="text" name="y1" size="2"></td>
	</tr>

	<tr>
	<td colspan=2 align="left" >Végpont koordinátái:</td>
	</tr>
	
	<tr>
	<td align="right" >x2:</td>
	<td align="left" ><input type="text" name="x2" size="2"></td>
	</tr>

	<tr>
	<td align="right" >y2:</td>
	<td align="left" ><input type="text" name="y2" size="2"></td>
	</tr>

	<tr>
	<td align="left" colspan=2><input type="button" name="ok" value="Mehet" onClick="rajzol(x1.value,y1.value,x2.value,y2.value)"> 
	 <input type="button" name="torol" value="Töröl" onClick="kitorol()"></td>

	</tr>

	</form>
</table>
<div ID='tabla' style="position:absolute;left:200px;top:100px;">

<div ID="pontok" style="position:absolute;left:420px;top:0px;width:110px;height:370px;overflow:auto;">
	<p align="left"><b>Pontok:</b></p>
</div>

<div  ID="koordinatarendszer" style="position:absolute;left:0px;top:0px;width:400px;height:400px;border: 2px ridge white;overflow:hidden;">
	
	<div ID="origo" style="position:absolute;left:200px;top:200px;width:1px;height:1px;background-color:#000000;">
		<sup>&nbsp;0</sup>
		<div style="position:absolute;left:-200px;top:0px;width:400px;height:1px;background-color:#000000;text-align:right">
		<sup>&nbsp;x</sup>
		</div>
		<div style="position:absolute;left:0px;top:-200px;width:1px;height:400px;background-color:#000000;">
		<sup>&nbsp;y</sup>
		</div>
	</div>
</div>
</body>
</html>

előre is köszi

■

HTML, CSS, JavaScript, Ajax

csirip

Kétoldalú erőfestítés

vbence · 2009. Május. 12. (K), 10.00

Nem ártana egy kis leírás az elején, hogy mi is a működési elv, valamint bő kommentezés, hogy ehhez kedvem legyen nekiállni...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Kódolás

Poetro · 2009. Május. 12. (K), 10.57

Használj valid HTML kódot.
Generáláskor használj valid HTML elem tulajdonságokat.
Debugolj Firebuggal, vagy más hasonló eszközzel, hogy lásd mit próbálsz meg törölni, és mi van a DOM-ban.
Ha hibát jelentesz, akkor írd meg, mi volt a pontos hiba.
Használj CSSt a redundáns kód elkerülésére.
HTML-ben ne használj, ha lehet onClick stb. eseményeket, mert az a JavaScriptbe tartozik, legyen is ott.
Formázd, és kommentezd a kódodat, hogy ne csak te, hanem mások is olvasni tudják. Neked is hasznos lesz pár hónap múlva, ha valamiért elő kell venni a kódot.
Ne használj globális változókat, inkább egy objektumot az összes függvényre és változóra, ami egy dologhoz kapcsolódik.
Lokális változók deklarációjánál pedig használd a var kulcsszót. (például most a db-ről nem derült ki, hogy lokális vagy globális.)

var i = 1;
function rajzol(x1, y1, x2, y2) {
var p0, px, A, B, p;
r = Math.round(Math.random() * 250 + 1);
g = Math.round(Math.random() * 250 + 1);
b = Math.round(Math.random() * 250 + 1);
szin = "rgb(" + r + "," + g + "," + b + ")";
p0 = document.createElement('DIV');
p0.setAttribute('id', 'p0' + i);
p0.setAttribute('style', 'position:absolute;left:' + (parseInt(x1) - 2.5) + 'px;top:' + (parseInt(y1) - 2.5) * ( - 1) + 'px;width:5px;height:5px;background-color:' + szin + ';');
p0.appendChild(document.createTextNode('P' + i));
document.getElementById('origo').appendChild(p0);
br = document.createElement('BR');
Padat = document.createElement('DIV');
Padat.setAttribute('id', 'Padat' + i);
Padat.appendChild(document.createTextNode('P' + i + '(' + x1 + ';' + y1 + ')'));
Padat.appendChild(br);
document.getElementById('pontok').appendChild(Padat);
px = document.createElement('DIV');
px.setAttribute('id', 'px' + i);
px.setAttribute('style', 'position:absolute;left:' + (parseInt(x2) - 2.5) + 'px;top:' + (parseInt(y2) - 2.5) * ( - 1) + 'px;width:5px;height:5px;background-color:' + szin + ';');
px.appendChild(document.createTextNode('P' + (i + 1)));
document.getElementById('origo').appendChild(px);
br = document.createElement('BR');
Padat = document.createElement('DIV');
Padat.setAttribute('id', 'Padat' + i + 1);
Padat.appendChild(document.createTextNode('P' + (i + 1) + '(' + x2 + ';' + y2 + ')'));
Padat.appendChild(br);
document.getElementById('pontok').appendChild(Padat);
line = document.createElement('HR');
line.setAttribute('style', 'width:80px;height:1px;');
document.getElementById('pontok').appendChild(line);
i = i + 2;
A = (parseInt(y2) - parseInt(y1)) * ( - 1);
B = parseInt(x2) - parseInt(x1);
db = 1;
if (parseInt(y1) > parseInt(y2)) {
for (var y = parseInt(y2); y <= parseInt(y1); y = y + 0.1) {
x = (A * parseInt(x1) + B * parseInt(y1) - B * y) / A;
p = document.createElement('DIV');
p.setAttribute('id', 'p' + i + '-' + db);
p.setAttribute('style', 'position:absolute;left:' + x + 'px;top:' + (y * ( - 1) + 4) + 'px;width:2px;height:2px;background-color:' + szin + ';');
document.getElementById('origo').appendChild(p);
db++;
}
}
if (parseInt(y1) < parseInt(y2)) {
for (var y = parseInt(y1); y <= parseInt(y2); y = y + 0.1) {
x = (A * parseInt(x1) + B * parseInt(y1) - B * y) / A;
p = document.createElement('DIV');
p.setAttribute('id', 'p' + i + '-' + db);
p.setAttribute('style', 'position:absolute;left:' + x + 'px;top:' + (y * ( - 1) + 4) + 'px;width:2px;height:2px;background-color:' + szin + ';');
document.getElementById('origo').appendChild(p);
db++;
}
}
if (parseInt(y1) == parseInt(y2)) {
if (parseInt(x1) < parseInt(x2)) {
for (var x = parseInt(x1); x <= parseInt(x2); x++) {
p = document.createElement('DIV');
p.setAttribute('id', 'p' + i + '-' + db);
p.setAttribute('style', 'position:absolute;left:' + x + 'px;top:' + (parseInt(y1) * ( - 1) + 4) + 'px;width:2px;height:2px;background-color:' + szin + ';');
document.getElementById('origo').appendChild(p);
db++;
}
}
else {
for (var x = parseInt(x2); x <= parseInt(x1); x++) {
p = document.createElement('DIV');
p.setAttribute('id', 'p' + i + '-' + db);
p.setAttribute('style', 'position:absolute;left:' + x + 'px;top:' + (parseInt(y1) * ( - 1) + 4) + 'px;width:2px;height:2px;background-color:' + szin + ';');
document.getElementById('origo').appendChild(p);
db++;
}
}
}
}
function kitorol() {
for (var j = db-1; j > 0; j--) {
var torlendo = "p" + i + "-" + j;
var element = document.getElementById(torlendo);
document.getElementById('origo').removeChild(element);
db--;
}
}


var i = 1;

function rajzol(x1, y1, x2, y2) {

  var p0, px, A, B, p;
  r = Math.round(Math.random() * 250 + 1);
  g = Math.round(Math.random() * 250 + 1);
  b = Math.round(Math.random() * 250 + 1);
  szin = "rgb(" + r + "," + g + "," + b + ")";

  p0 = document.createElement('DIV');
  p0.setAttribute('id', 'p0' + i);
  p0.setAttribute('style', 'position:absolute;left:' + (parseInt(x1) - 2.5) + 'px;top:' + (parseInt(y1) - 2.5) * ( - 1) + 'px;width:5px;height:5px;background-color:' + szin + ';');
  p0.appendChild(document.createTextNode('P' + i));
  document.getElementById('origo').appendChild(p0);
  br = document.createElement('BR');

  Padat = document.createElement('DIV');
  Padat.setAttribute('id', 'Padat' + i);
  Padat.appendChild(document.createTextNode('P' + i + '(' + x1 + ';' + y1 + ')'));
  Padat.appendChild(br);
  document.getElementById('pontok').appendChild(Padat);

  px = document.createElement('DIV');
  px.setAttribute('id', 'px' + i);
  px.setAttribute('style', 'position:absolute;left:' + (parseInt(x2) - 2.5) + 'px;top:' + (parseInt(y2) - 2.5) * ( - 1) + 'px;width:5px;height:5px;background-color:' + szin + ';');
  px.appendChild(document.createTextNode('P' + (i + 1)));
  document.getElementById('origo').appendChild(px);
  br = document.createElement('BR');

  Padat = document.createElement('DIV');
  Padat.setAttribute('id', 'Padat' + i + 1);
  Padat.appendChild(document.createTextNode('P' + (i + 1) + '(' + x2 + ';' + y2 + ')'));
  Padat.appendChild(br);
  document.getElementById('pontok').appendChild(Padat);
  line = document.createElement('HR');
  line.setAttribute('style', 'width:80px;height:1px;');
  document.getElementById('pontok').appendChild(line);
  i = i + 2;

  A = (parseInt(y2) - parseInt(y1)) * ( - 1);
  B = parseInt(x2) - parseInt(x1);

  db = 1;
  if (parseInt(y1) > parseInt(y2)) {
    for (var y = parseInt(y2); y <= parseInt(y1); y = y + 0.1) {
      x = (A * parseInt(x1) + B * parseInt(y1) - B * y) / A;
      p = document.createElement('DIV');
      p.setAttribute('id', 'p' + i + '-' + db);
      p.setAttribute('style', 'position:absolute;left:' + x + 'px;top:' + (y * ( - 1) + 4) + 'px;width:2px;height:2px;background-color:' + szin + ';');
      document.getElementById('origo').appendChild(p);
      db++;

    }
  }

  if (parseInt(y1) < parseInt(y2)) {
    for (var y = parseInt(y1); y <= parseInt(y2); y = y + 0.1) {
      x = (A * parseInt(x1) + B * parseInt(y1) - B * y) / A;
      p = document.createElement('DIV');
      p.setAttribute('id', 'p' + i + '-' + db);
      p.setAttribute('style', 'position:absolute;left:' + x + 'px;top:' + (y * ( - 1) + 4) + 'px;width:2px;height:2px;background-color:' + szin + ';');
      document.getElementById('origo').appendChild(p);
      db++;
    }
  }

  if (parseInt(y1) == parseInt(y2)) {
    if (parseInt(x1) < parseInt(x2)) {
      for (var x = parseInt(x1); x <= parseInt(x2); x++) {
        p = document.createElement('DIV');
        p.setAttribute('id', 'p' + i + '-' + db);
        p.setAttribute('style', 'position:absolute;left:' + x + 'px;top:' + (parseInt(y1) * ( - 1) + 4) + 'px;width:2px;height:2px;background-color:' + szin + ';');
        document.getElementById('origo').appendChild(p);
        db++;
      }
    }
    else {
      for (var x = parseInt(x2); x <= parseInt(x1); x++) {
        p = document.createElement('DIV');
        p.setAttribute('id', 'p' + i + '-' + db);
        p.setAttribute('style', 'position:absolute;left:' + x + 'px;top:' + (parseInt(y1) * ( - 1) + 4) + 'px;width:2px;height:2px;background-color:' + szin + ';');
        document.getElementById('origo').appendChild(p);
        db++;
      }

    }
  }
}

function kitorol() {
  for (var j = db-1; j > 0; j--) {
    var torlendo = "p" + i + "-" + j;
    var element = document.getElementById(torlendo);
    document.getElementById('origo').removeChild(element);
    db--;
  }
}

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés