Programacion

Abrir en una nueva pestaña

<HTML>
	<HEAD>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
		<title>Codigo de colores</title>
		<style>
		label {
			color: white;
			font-size: 30px;
			text-shadow: 7px 4px 5px black;
		}
		
		#resultado{
			color: white;
			font-size: 50px;
		}

select { 
			width: 90px; 
			height: 35px;
			font-size: 17px;
			background: #ddd; 
			border-radius: .3em;
		}
		</style>
		<script>
		function colores(){
			const valores = ["black","brown","red","orange","yellow","green","blue","violet","grey","white","#EABE3F","silver"];
			const multiplos = [1,10,100,1000,10000,100000,1000000,0.1,0.01];
			var a = document.getElementById("uno").value;
			var b = document.getElementById("dos").value;
			var c = document.getElementById("tres").value;
			var d = document.getElementById("cuatro").value;
			var valor;
			
			a=parseInt(a);
			b=parseInt(b);
			c=parseInt(c);

document.querySelector("#primera").style.stroke = valores[a];
			document.querySelector("#segunda").style.stroke = valores[b];
			document.querySelector("#tercera").style.stroke = valores[c];
			document.querySelector("#cuarta").style.stroke = valores[d];
			
			if (c>=10) c = c - 3;
			
			valor = ((a*10)+b) * multiplos[c];
			if (valor % 1 != 0) {
				if (c == 8){
					valor  = valor.toFixed(2);
				}else{
					valor  = valor.toFixed(1);
				}
			}
			
			if (valor >= 1000 && valor < 1000000){
				valor = valor / 1000;
				valor = valor + "K";
			}else{
				if (valor > 1000000){
					valor = valor / 1000000;
					valor = valor + "M";
				}
			}
			
			if (d == 10){
				d = 5;
			}else{
				d = 10;
			}
			document.getElementById("resultado").innerHTML = valor + "Ω " + d +"%";
			
		}
		</script>
	</HEAD>
	<BODY BGCOLOR="#454e4c"	ALIGN="center">
		<label>Codigo de colores de resistencias<label><BR>
		<BR>
		<svg height="20mm" width="90mm">
			<rect fill="#fcdbab" stroke="black" 
			stroke-width="1mm" x="50" y="0" width="64mm" 
			height="20mm" />
			<line stroke="black" stroke-width="2mm" 
			x1="0mm" y1="10mm" x2="13mm" y2="10mm" />
			<line stroke="black" stroke-width="2mm" 
			x1="77mm" y1="10mm" x2="90mm" y2="10mm" />
			<line id="primera" stroke="brown" stroke-width="5mm" 
			x1="30mm" y1="0.5mm" x2="30mm" y2="19.5mm" />
			<line id="segunda" stroke="black" stroke-width="5mm" 
			x1="40mm" y1="0.5mm" x2="40mm" y2="19.5mm" />
			<line id="tercera" stroke="red" stroke-width="5mm" 
			x1="50mm" y1="0.5mm" x2="50mm" y2="19.5mm" />
			<line id="cuarta" stroke="#EABE3F" stroke-width="5mm" 
			x1="65mm" y1="0.5mm" x2="65mm" y2="19.5mm" />
		</svg><BR><BR>
		<div id="resultado">1KΩ 5%</div>
		<BR>
		<select id="uno" onChange="colores()">
			<option value="0">Negro</option>
			<option value="1" selected>Cafe</option>
			<option value="2">Rojo</option>
			<option value="3">Naranja</option>
			<option value="4">Amarillo</option>
			<option value="5">Verde</option>
			<option value="6">Azul</option>
			<option value="7">Violeta</option>
			<option value="8">Plomo</option>
			<option value="9">Blanco</option>
		</select>
		<select id="dos" onChange="colores()">
			<option value="0" selected>Negro</option>
			<option value="1">Cafe</option>
			<option value="2">Rojo</option>
			<option value="3">Naranja</option>
			<option value="4">Amarillo</option>
			<option value="5">Verde</option>
			<option value="6">Azul</option>
			<option value="7">Violeta</option>
			<option value="8">Plomo</option>
			<option value="9">Blanco</option>
		</select>
		<select id="tres" onChange="colores()">
			<option value="0">Negro</option>
			<option value="1">Cafe</option>
			<option value="2" selected>Rojo</option>
			<option value="3">Naranja</option>
			<option value="4">Amarillo</option>
			<option value="5">Verde</option>
			<option value="6">Azul</option>
			<option value="10">Dorado</option>
			<option value="11">Plateado</option>
		</select>
		<select id="cuatro" onChange="colores()">
			<option value="10" selected>Dorado</option>
			<option value="11">Plateado</option>
		</select>

</BODY>
</HTML>

Descargar archivo