Problema de representacion de porcentaje con color

Rockzilla · #1 (**permalink**) 31/07/2008, 10:18

Buenas a todos soy nuevo en la parte de diseño con javascrip y este es mi formulario y el calculo como podrarn ver es un formulario q pide un numero q calculo el porcentaje d 40 es decir si marca 20 el te dira q es un 50% el problema es es q quiero q si marque entre 0 a 45% el color rojo y de 45% a 75% otro color y 75% a 100 % el verde se agradec todo tipo de ayuda gracias o concejos y les soy sincero en java soy nuevo y si me mandan los link de ejemplo mejor gracias a todos

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML><HEAD>  
<TITLE>Calculo de porcentaje </TITLE>  
<META content="text/html; charset=windows-1251" http-equiv=Content-Type>  
<meta name="DESCRIPTION"content="Rockzillla">  
<meta name="KEYWORD"content="venezuela.">   
</HEAD>  
<BODY style="FONT-FAMILY: Arial" bottomMargin=0 vLink=#000000 aLink=#000000   
link=#000000 bgColor=#ffffff leftMargin=0 topMargin=0 rightMargin=0 ? size="2"   
face="arial" font>  
 
<TABLE cellSpacing=0 cellPadding=0 width=720 align=center border=0>  
  <TBODY>   
  <TR bordercolor="#0099FF">   
    <TD vAlign=top width=150 bgColor=#F0F8FF><TABLE id=AutoNumber2 style="BORDER-COLLAPSE: collapse"   
      borderColor=#111111 cellSpacing=0 cellPadding=0 width=160 border=0>  
        <TBODY>   
        <TR>   
          <TD>   
            <div align="center"> </div>  
          </TD>  
        </TR>  
        </TBODY>  
      </TABLE>  
        
    </TD>  
    <TD vAlign=top align=left width=420><TABLE cellSpacing=0 cellPadding=0 width=360 align=center border=0>  
        <TBODY>  
        <TR>  
          <TD valign="top">   
            <P align=center>  
              <SCRIPT language=JavaScript>  
 
 
function perc1() {  
 a = document.form1.a.value/100;  
 b = a*40;  
 document.form1.total1.value = 40  
 }  
function perc2() {  
 a = document.form1.c.value;  
 b = 40;  
 c = a/40;  
 d = c*100;  
 document.form1.total2.value = d  
 }  
//-->  
</SCRIPT>  
            <P align=center>   
            <FORM name=form1>  
              <TABLE width="510" height="100" border=1 cellPadding=1 cellSpacing=1>  
                <TBODY><TR>   
                  <TD width="282" height="46"><font size="1">   
                     <INPUT size=10 name=c>  
                    porcentaje de   
                      
                     40 </font></TD>  
                  <TD width="74"><font size="1">=   
                    <INPUT size=10 name=total2>  
                    %</font></TD>  
                  <TD width="57"><font size="1">   
                    <INPUT onclick=perc2() type=button value=Calculo>  
                    </font></TD>  
                <TR>   
                  <TD align=middle   
colSpan=3>   
                    <div align="center"> <font size="1">   
                      <INPUT type=reset value=Reset>  
                      </font></div>                  </TD>  
                </TR>  
                </TBODY>   
              </TABLE>  
            </FORM>  
            </TD>  
        </TR></TBODY></TABLE></TD>  
    <TD vAlign=top align=left width=150 border="0" bgcolor="#F0F8FF">&nbsp;</TD>  
  </TR></TBODY></TABLE>  
<P align=center> <font face="Arial, Helvetica, sans-serif" size="2">   
 
 
</font><BR>  
<BR>  
</BODY></HTML>

David · #2 (**permalink**) 31/07/2008, 10:37

¿Quieres cambiar el color del texto o del fondo del input?.

Puedes hacer con if, algo así como esto:

Código PHP:

  if (d<=45) {
    // Cambiar color a rojo
}
else {
   if (d<=75) {
       // Cambiar color a verde
   }
   else {
      // Cambiar a otro color
   }
}

En este caso estamos usando la variable d que tienes en la función perc2

Rockzilla · #3 (**permalink**) 31/07/2008, 10:40

eso donde lo coloco de verdad soy nuevo

Rockzilla · #4 (**permalink**) 31/07/2008, 10:42

lo q quiero hacer es digamos cuando me salga 45% me salga un cudrito representando el rojo y si es mas de 45% a 75% el amarillo no quiero q cambie de color ni el fondo ni el numero solo un cuadrito como haria en ese caso?

David · #5 (**permalink**) 31/07/2008, 10:46

Tienes una función llamada perc2, en ella puedes colocar el código ya que se supone que es en ella donde estás cambiando el porcentaje. Para colocar el cuadrito quizás sirva un <div> o algo parecido.

Rockzilla · #6 (**permalink**) 31/07/2008, 11:15

bueno aqui realic o modifique mi funcion pero solo me muestra el fondo amarillo
<SCRIPT language=JavaScript>

function perc1() {
a = document.form1.a.value/100;
b = a*40;
document.form1.total1.value = 40
}
function perc2() {
a = document.form1.c.value;
b = 40;
c = a/40;
d = c*100;
f = d + x
document.form1.total2.value = d
var x = Math.random()
//document.write(x)
x = new String (x)
x = x.substring(x.length -1)
//document.write(x)
if (x <=45){ document.bgColor='yellow'}
else {
if (x <=75){ document.bgColor='green'}
else {
if (x <= 100){ document.bgColor='red'}

}
}

}

}

//-->
</SCRIPT>

David · #7 (**permalink**) 31/07/2008, 11:16

¿Qué es lo que estás intentando hacer?. Debes usar la variable d y no esa variable aleatoria que llamas x.

Rockzilla · #8 (**permalink**) 31/07/2008, 11:19

si pero asi fue q se me ocurrio hacer la funcion del color por q en d solo me meustra el calculo de c*100

Rockzilla · #9 (**permalink**) 31/07/2008, 11:21

y lo que quiero hacer es mi resultado de porcenteje sea representado por un color y solo uso tres q es de el 0 al 45% rojo del 46% al 75% amarrillo del 76% al 100% verde

David · #10 (**permalink**) 31/07/2008, 11:31

Pues bien, como te expliqué, ¿qué pretendes hacer con la variable x?. Debes usar la variable d, así:

Código PHP:

  function perc2() {
 a = document.form1.c.value;
 c = a/40;
 d = c*100;
 fdocument.form1.total2.value = d
if (d <=45){ document.bgColor='yellow'}
else {
if (d <=75){ document.bgColor='green'}
else {
if (d <= 100){ document.bgColor='red'}
}
}
}

Rockzilla · #11 (**permalink**) 31/07/2008, 11:38

jajajaja gracias pana de verdad son bueno asi quedo
<SCRIPT language=JavaScript>

function perc1() {
a = document.form1.a.value/100;
b = a*40;
document.form1.total1.value = 40
}
function perc2() {
a = document.form1.c.value;
b = 40;
c = a/40;
d = c*100;
// f = d + x
document.form1.total2.value = d
//var x = Math.random()
//document.write(x)
//x = new String (x)
//x = x.substring(x.length -1)
//document.write(x)
if (d <=45){ document.bgColor='red'}
else {
if (d <=75){ document.bgColor='yellow'}
else {
if (d <= 100){ document.bgColor='green'}
//yellowgreen
//
}

}

}

{

}

//-->
</SCRIPT>

Rockzilla · #12 (**permalink**) 31/07/2008, 11:39

el problema sabes un scrip o la funcion de mostrar esos colores en cuadritos en vez de color de fondo

Rockzilla · #13 (**permalink**) 31/07/2008, 11:44

digo como hago para qesa funcion aparte de darme el porcetaje me de un cudrito con una columna un color en esa pare del llamado no tengo ni idea

David · #14 (**permalink**) 31/07/2008, 11:48

Como te dije al principio, puedes usar un div, colocarlo al lado del input, asignarle un id, y manejar ese id para cambiarle el color.

Saludos

Rockzilla · #15 (**permalink**) 31/07/2008, 12:56

todavia estoy luchando con el div pero de igual gracias amigo saludos