Ti Vídeo Tutoriais: javascript: Gerador de tabuada para Suan Pan

domingo, 10 de janeiro de 2016

javascript: Gerador de tabuada para Suan Pan

Script para geração de tabuada de soma complexa e subtração complexa para o Ábaco Suan Pan

<br />
<body ><br />
</body><br />
<script>
function getColuna(x, y)
{
 var img = document.createElement("img");
 img.src="colunas.png" 
 img.style.position= 'absolute'; 
 img.style.left = x + 'px'; 
 img.style.top = y + 'px'; 
 return  img;
}
function getContaB(div, b)
{
 var img = document.createElement("img");
 img.src="conta.png" 
 img.style.position= 'absolute'; 
 img.style.left = 104 + 'px'; 
 img.style.top = 122+(23*(6-b)) + 'px'; 
 div.appendChild(img);
}
function getContaA(div, a)
{
 var img = document.createElement("img");
 img.src="conta.png" 
 img.style.position= 'absolute'; 
 img.style.left = 104 + 'px'; 
 img.style.top = 54 + (23*a) + 'px'; 
 div.appendChild(img);
} 
function getDiv(d, a, b)
{
 var div = document.createElement("div"); 
 div.style.position= 'relative';  
 div.style.left = 0 + 'px'; 
 div.style.top = 0 + 'px';  
 div.style.width = 261 + 'px'; 
 div.style.height = 315 + 'px'; 
 var coluna = getColuna(0, 0);
 div.appendChild(coluna); 
 //===============================================================================
 // D
 //===============================================================================
 if( d == 10 )
 {
  var img = document.createElement("img");
  img.src="dezena.png" 
  img.style.position= 'absolute'; 
  img.style.left = 32 + 'px'; 
  img.style.top = 78+(23*4) + 'px';  
  div.appendChild(img);
 } 
 //===============================================================================
 // A
 //=============================================================================== 
 if( a == 0 )
 {
  var img = document.createElement("img");
  img.src="qualquer.png" 
  img.style.position= 'absolute'; 
  img.style.left = 104 + 'px'; 
  img.style.top = 78+(23*0) + 'px';  
  div.appendChild(img);
 }
 if(a==5)
 { 
  getContaA(div, 0)
 }
 if(a==-5)
 { 
  getContaA(div, 1)
 }
 var img = document.createElement("img");
 img.src="qualquer.png" 
 img.style.position= 'absolute'; 
 img.style.left = 104 + 'px'; 
 img.style.top = 77+(-23*2) + 'px';  
 div.appendChild(img);
 if(a>0)
 {
  var img = document.createElement("img");
  img.src="desceA.png" 
  img.style.position= 'absolute'; 
  img.style.left = 184 + 'px'; 
  img.style.top = 78-23 + 'px';  
  div.appendChild(img);
 }
 if(a<0)
 {
  var img = document.createElement("img");
  img.src="sobeA.png" 
  img.style.position= 'absolute'; 
  img.style.left = 184 + 'px'; 
  img.style.top = 76 + 'px';  
  div.appendChild(img);
 }
 //===============================================================================
 // B
 //=============================================================================== 
 if( 4 != Math.abs(b) )
 {
  var img = document.createElement("img");
  img.src="qualquer.png" 
  img.style.position= 'absolute'; 
  img.style.left = 104 + 'px'; 
  img.style.top = 122 + 'px';  
  div.appendChild(img);
 }
 if(b>=1)
 { 
  getContaB(div, 1)
 }
 if(b>=2)
 {
  getContaB(div, 2)
 }
 if(b>=3)
 {
  getContaB(div, 3)
 }
 if(b>=4)
 {
  getContaB(div, 4)
 }
 var soma4 = 0;
 if( 4 != Math.abs(b) ) soma4 = 1;
 if(b<=-1)
 { 
  getContaB(div, 6-soma4)
 }
 if(b<=-2)
 {
  getContaB(div, 5-soma4)
 }
 if(b<=-3)
 {
  getContaB(div, 4-soma4)
 }
 if(b<=-4)
 {
  getContaB(div, 3-soma4)
 }
 var img = document.createElement("img");
 img.src="qualquer.png" 
 img.style.position= 'absolute'; 
 img.style.left = 104 + 'px'; 
 img.style.top = 122+(23*6) + 'px';  
 div.appendChild(img);
 if(b>0)
 {
  var img = document.createElement("img");
  img.src="sobeB.png" 
  img.style.position= 'absolute'; 
  img.style.left = 184 + 'px'; 
  img.style.top = 122+(23*5) + 'px';  
  div.appendChild(img);
 }

if(b<0)
 {
  var img = document.createElement("img");
  img.src="desceB.png" 
  img.style.position= 'absolute'; 
  img.style.left = 184 + 'px'; 
  img.style.top = 122+(23*soma4) + 'px';  
  div.appendChild(img);
 }
 //===============================================================================
 // 
 //=============================================================================== 
 return  div;
}
function getSomaSuanPan()
{
 var d = new Array()
 var a = new Array()
 var b = new Array()
 d = [0,0,0,0,0,0,0,0,0,0,0,0,0,  0,  10,10,10,10,10,10,10,10,10,10,10,10,10]
 b = [-4,-3,-2,-1,0,1,2,3,4,   1,2,3,4,0,-4,-3,-2,-1,   -4,-3,-2,-1,0,1,2,3,4]
 a = [5,5,5,5,5,5,5,5,5,   0,0,0,0,0,0,0,0,0,   -5,-5,-5,-5,-5,-5,-5,-5,-5]
 document.write("<table border='1'>" ) 
 document.write("
<tr>" )
 document.write("<td style='font-size:60px;  text-align: center'> SOMA </td>" ) 
 document.write("<td style='font-size:60px;  text-align: center'> Sup+5 </td>" )
 document.write("<td style='font-size:60px;  text-align: center'> Sup=0 </td>" )
 document.write("<td style='font-size:60px;  text-align: center'> Sup-5 </td>" )
 document.write("</tr>
" )  
 for(i=0; i<9; i++)
 {
  document.write("
<tr>" ); 
  document.write("<td style='font-size:100px;  text-align: center'>+" +(i+1)+ "</td>" );

document.write("<td style='width:261px; height:315px; position:relative;' >"+ getDiv( d[i], a[i], b[i]).innerHTML +  "</td>" ) 
  document.write("<td style='width:261px; height:315px; position:relative;' >"+ getDiv( d[i+9], a[i+9], b[i+9]).innerHTML +  "</td>" ) 
  document.write("<td style='width:261px; height:315px; position:relative;' >"+ getDiv( d[i+18], a[i+18], b[i+18]).innerHTML +  "</td>" )

document.write("</tr>
"  );
 }
 document.write("</table>
" )
}
getSomaSuanPan()
</script><br />

Nenhum comentário:

Postar um comentário