<!DOCTYPE html>
<html>
<head>
<meta charset="8">
<title>Multiplicar Números</title>
<link rel="stylesheet" href="css/regla.css">
</head>
<body>
<header><h1> Regla de 3</h1>
<form id="multiplicar">
<input type="text" id="div1" value=0 onChange="multiplicar();">
<input type="text" id="mul2" value=0 onChange="multiplicar();">
<input type="text" id="mul1" value=0
onChange="dividir();">
<input type="button" id="ya" value="calcular!" onclick="calc()" >
<input type="reset" id="volver">
</form>
<div id="resultado"></div>
<script type="text/javascript">
function calc(){
var m1 = document.getElementById("div1").value; var m2 = document.getElementById("mul2").value;var m3= document.getElementById("mul1").value; var m5= (m2*m3/m1);
document.getElementById("resultado").innerHTML= 'es igual a'+ m5;
}
</script>
</body>
</html>
y el css: (obviamente esto es como querais)
*{ margin: auto;
}
header{ margin-bottom: 50px;
}
h1{ text-align: center;
border-radius: 40px;
border-style: double;
background-image: linear-gradient(to left, pink, purple,white);
margin-bottom: 5px;
padding: 40px;
color: aliceblue;
}
body{ background: purple;
}
input{ padding: 10px;
margin-bottom: 8px;
border:solid;
margin-left: 350px;
background: black;
color :white;
}
#resultado{ background: black;
border: solid;
height: 50px;
width: 200px;
color: white;
text-align: center;
padding: 20px;
}
#resultado:active{ box-decoration-break: 3px 3px 3px gray;
}
Crear cuenta
Comentarios sobre la versión: 0.0 (0)
No hay comentarios