Calcular el area de un triangulo, pedimos la base y la altura

<h1>Calculo del area del triangulo</h1>
<p>Para calcular el area debes introducir la base y altura.</p>
<p>Introduce base <input type="text" name="base" class="base"></p>
<p>Introduce altura <input type="text" name="altura" class="altura"></p>
<input type="button" class="calcular" value="Calcular">
<div class="resultado"></div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(e){
		$(".calcular").click(function(e){
			var base, altura, resultado;
			base=Number($(".base").val());
			altura=Number($(".altura").val());
			resultado=1/2*base*altura;
			$(".resultado").html("<p>El area del triangulo es "+resultado+"</p>");
		});
	});
</script>

Un sencillo ejercicio de una calculadora con dos input para los números y  los botones de suma, resta, multiplicación y división

<h1>Calculadora</h1>
<p>Introduce do numeros y pulsa el boton correspondiente para realizar su operacion</p>
<p>
	Numero 1: <input type="text" class="n1">
	Numero 2: <input type="text" class="n2">
</p>
<p>
	<input type="button" value="Suma los numeros" class="suma">
	<input type="button" value="resta" class="resta">
	<input type="button" value="multiplica" class="multiplica">
</p>
<p>
	Resultado:
	<div class="resultado"></div>
</p>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(e){

		$(".suma").click(function(e){
			var n1, n2, resultado;
			n1=Number($(".n1").val());
			n2=Number($(".n2").val());
			resultado=n1+n2;
			$(".resultado").html(resultado);			
		});
		$(".resta").click(function(e){
			var n1, n2, resultado;
			n1=Number($(".n1").val());
			n2=Number($(".n2").val());
			resultado=n1-n2;
			$(".resultado").html(resultado);			
		});
		$(".multiplica").click(function(e){
			var n1, n2, resultado;
			n1=Number($(".n1").val());
			n2=Number($(".n2").val());
			resultado=n1*n2;
			$(".resultado").html(resultado);			
		});
	});
</script>


Calculadora completa

<style type="text/css">
	.display{
		width:94%;
		height:40px;
		line-height: 40px;
		background-color:#e0f8e3;
		font-size:20px;
		border: 3px black ridge;
		border-radius: 5px;
		text-align: right;
	}
	input[type=button]{
		width:50px;
		height:50px;
		font-size:16px;
		background-color: #73ca65;
		border: 3px black ridge;
		border-radius: 5px;
		font-weight: bold;
	}
</style>
</head>

<body>
<table>
  <tbody>
    <tr>
      <td colspan="4"><input type="text" name="textfield" id="textfield" class="display"></td>
    </tr>
    <tr>
      <td><input type="button" name="button" id="button" value="7" class="operacion"></td>
      <td><input type="button" name="button2" id="button2" value="8" class="operacion"></td>
      <td><input type="button" name="button3" id="button3" value="9" class="operacion"></td>
      <td><input type="button" name="button4" id="button4" value="+" class="operacion"></td>
    </tr>
    <tr>
      <td><input type="button" name="button5" id="button5" value="4" class="operacion"></td>
      <td><input type="button" name="button6" id="button6" value="5" class="operacion"></td>
      <td><input type="button" name="button7" id="button7" value="6" class="operacion"></td>
      <td><input type="button" name="button8" id="button8" value="-" class="operacion"></td>
    </tr>
    <tr>
      <td><input type="button" name="button9" id="button9" value="1" class="operacion"></td>
      <td><input type="button" name="button10" id="button10" value="2" class="operacion"></td>
      <td><input type="button" name="button11" id="button11" value="3" class="operacion"></td>
      <td><input type="button" name="button12" id="button12" value="*" class="operacion"></td>
    </tr>
    <tr>
      <td><input type="button" name="button13" id="button13" value="0" class="operacion"></td>
      <td><input type="button" name="button14" id="button14" value="." class="operacion"></td>
      <td><input type="button" name="button15" id="button15" value="=" class="resultado"></td>
      <td><input type="button" name="button16" id="button16" value="/" class="operacion"></td>
    </tr>
    <tr>
      <td><input type="button" name="button17" id="button17" value="Ce" class="limpiar"></td>
      <td><input type="button" name="button18" id="button18" value="(" class="operacion"></td>
      <td><input type="button" name="button19" id="button19" value=")" class="operacion"></td>
      <td><input type="button" name="button20" id="button20" value="Ret" class="retroceso"></td>
    </tr>
    <tr>
      <td><input type="button" name="button21" id="button21" value="Seno" class="seno"></td>
      <td><input type="button" name="button22" id="button22" value="Cos" class="coseno"></td>
      <td><input type="button" name="button23" id="button23" value="Raiz" class="raiz"></td>
      <td><input type="button" name="button24" id="button24" value="PI" class="PI"></td>
    </tr>
    
  </tbody>
</table>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(e){
		$(".operacion").click(function(e){
			var display=$(".display").val();
			display+=$(this).val();
			$(".display").val(display);
		});
		$(".resultado").click(function(e){
			var display=$(".display").val();
			var resultado=eval(display);
			$(".display").val(resultado);
		});
		$(".limpiar").click(function (e){
			$(".display").val("");
		});
		$(".retroceso").click(function(e){
			var display=$(".display").val();
			display=display.substr(0,display.length-1);
			$(".display").val(display);
		});
		$(".seno").click(function(e){
			var display=$(".display").val();
			var resultado=Math.sin(display);
			$(".display").val(resultado);
		});
		$(".coseno").click(function(e){
			var display=$(".display").val();
			var resultado=Math.cos(display);
			$(".display").val(resultado);
		});
		$(".raiz").click(function(e){
			var display=$(".display").val();
			var resultado=Math.sqrt(display);
			$(".display").val(resultado);
		});
		$(".PI").click(function(e){
			var display=$(".display").val();
			var resultado=Math.PI;
			$(".display").val(resultado);
		});
	});
</script>

En este caso el programa sirve para trabajar con un array y nos permite añadir números, borrarlos, ordenarlos y visualizarlos. Para que un enlace no  “funcione” y se vaya a donde apunta o bien en jquery en el evento click añadimos e.preventDefaul() o en el href del enlace le ponemos javascript:void(0); hemos usado ambas formas en el ejemplo.

<p>Introduce un numero:
<input type="text" name="numero" class="numero">
</p>
<p>
	<a href="#" class="anadir">Añade el numero</a><br/>
	<a href="javascript:void(0);" class="visualizar">Visualiza los numeros</a><br/>
	<a href="#" class="borrar">Borra el ultimo numero</a><br/>
	<a href="javascript:void(0);" class="ordena">Ordena los numeros</a>
	
</p>
<div class="resultado"></div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(e){
		var numeros=new Array();
		$(".anadir").click(function(e){
			e.preventDefault();
			var num=$(".numero").val();
			if(isNaN(num) || num==""){
				alert("No has introducido un numero");
			}else{
				numeros.push(num);
			}
			$(".numero").val("");
			
		});
		$(".visualizar").click(function(e){
			var i, longitud;
			longitud=numeros.length;
			$(".resultado").html("<p>los numeros son</p>");
			for (i=0;i<longitud;i++)
				$(".resultado").append("<p>El numero en la posicion "+i+" es "+numeros[i]+"</p>");
		});
		$(".borrar").click(function(e){
			e.preventDefault();
			numeros.pop();
			$(".resultado").html("Se ha borrado un numero");
		});
		$(".ordena").click(function(e){
			numeros=numeros.sort(function(a,b){return a-b});
			$(".resultado").html("Se han ordenado los numeros");			
		});
	});
</script>

Calculo de un boleto de primitiva.

<div class="resultado"></div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(e){
		var numeros=new Array(6);
		var i,num,repetido,k;
		for (i=0;i<6;i++){
			do{
				num=Math.floor(Math.random()*49+1);
				repetido=0;
				for (k=0;k<i;k++)
					if (numeros[k]==num)
						repetido=1;
			}while(repetido==1);
			numeros[i]=num;
		}
		numeros=numeros.sort(function(a,b){return a-b});
		$(".resultado").html("<p>La combinacion ganadora es</p>");
		for (i=0;i<6;i++){
			$(".resultado").append("<p> "+numeros[i]+"</p>");
		}
	});
</script>

Pin It on Pinterest