HTML + CSS + JAVASCRIPT

JAVASCRIPT

function gravar12() {

var vo = document.getElementById ("txtMruvVo-08").value;
var angulo = document.getElementById ("txtMruvAng-08").value;
var g = 9.8;
angulo2 = angulo*2;
var rad = angulo2 * Math.PI/180;
var sin = Math.sin(rad);
var rx = (sin*(vo*vo)/g). toFixed(2);

if((isNaN(rx)) || (angulo < 0) || (angulo > 90)){
//o resultado não é numero
alert('digite corretamente');
//sai da funcao
return;
}

$('#divResultado-12') .css('background', '#000');
$('#divResultado-12').css('border', 'dashed 1px #fff');
$('#divResultado-12').css('width', '90%');
$('#divResultado-12').css('height', '70px');
$('#resp-12').show();
$('#resp-13').show();
var div = document. getElementById ("resp-12");
var div02 = document. getElementById ("resp-13");
div.innerText = 'O alcance máximo é: '+rx+' metros '; div02.innerText = rx+' m';

var elem = document .getElementById ("animate-03");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 300) {
clearInterval(id);
} else {
pos++;
elem.style.left = pos + 'px';
}
}

var c = document.getElementById ("myCanvas-07");
var ctx = c.getContext ("2d");

ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(30,290);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(10,270);
ctx.lineTo(360,270);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(20,40);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(40,40);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(360,270);
ctx.lineTo(350,260);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(360,270);
ctx.lineTo(350,280);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.font = "12pt sans-serif";
ctx.fillText("y(x)",50,40);
ctx.fillText("x",370,270);
ctx.fill();
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc(180,270,150,0, Math.PI, true);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(180, 130);
ctx.lineTo(180, 260);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(180, 130);
ctx.lineTo(170, 130);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(180, 130);
ctx.lineTo(190, 130);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(180, 260);
ctx.lineTo(190, 260);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(180, 260);
ctx.lineTo(170, 260);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(370, 100);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(50, 90);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(50, 110);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(370, 100);
ctx.lineTo(370, 90);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(370, 100);
ctx.lineTo(370, 110);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.font = "12pt sans-serif";
ctx.fillText("ymáx",130,200);
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.font = "12pt sans-serif";
ctx.fillText("Rx",180,90);
ctx.fill();
ctx.stroke();
}

function limpar12() {

$('#divResultado-12') .css('background', 'none');
$('#divResultado-12') .css('border', 'none');
$('#divResultado-12') .css('width', '0');
$('#divResultado-12') .css('height', '0');
$('#resp-12').hide();
}

JAVASCRIPT

function gravar13() {

var vo = document .getElementById ("txtMruvVo-09").value;
var angulo = document .getElementById ("txtMruvAng-09").value;
var g = 9.8;
var rad = angulo * Math.PI/180;
var sin = Math.sin(rad);
var ym = ((sin*sin)* (vo*vo)/(2*g)) .toFixed(2);

if((isNaN(ym)) || (angulo < 0) || (angulo > 90)){
//o resultado não é numero
alert('digite corretamente');
//sai da funcao
return;
}

$('#divResultado-14') .css('background', '#000');
$('#divResultado-14') .css('border', 'dashed 1px #fff');
$('#divResultado-14') .css('width', '90%');
$('#divResultado-14') .css('height', '70px');
$('#resp-14').show();
$('#resp-15').show();
var div = document.getElementById ("resp-14");
var div02 = document.getElementById ("resp-15");
div.innerText = 'A altura máxima é: '+ym+' metros '; div02.innerText = 'ymáx ' + ym +' m';

var elem = document.getElementById ("animate-04");
var pos = 0;
var id = setInterval(frame, 15);
function frame() {
if (pos == 150) {
clearInterval(id);
} else {
pos++;
elem.style.bottom = pos + 'px';
}
}

var c = document. getElementById ("myCanvas-08");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(30,330);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(10,320);
ctx.lineTo(350,320);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(20,40);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(40,40);
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(350,320);
ctx.lineTo(340,310);
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(350,320);
ctx.lineTo(340,330);
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.font = "12pt sans-serif";
ctx.fillText("y(x)",50,40);
ctx.fillText("x",360,325);
ctx.fill();
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(30, 320);
ctx.bezierCurveTo(100, 10, 270, 10, 335, 320);
ctx.strokeStyle = "red";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(185, 100);
ctx.lineTo(185, 310);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(185, 100);
ctx.lineTo(175, 100);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(185, 100);
ctx.lineTo(195, 100);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(185, 310);
ctx.lineTo(175, 310);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(185, 310);
ctx.lineTo(195, 310);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.font = "12pt sans-serif";
ctx.fillText("ymáx",130,220);
ctx.fill();
ctx.stroke();
}

function limpar13() {

$('#divResultado-14') .css('background', 'none');
$('#divResultado-14') .css('border', 'none');
$('#divResultado-14') .css('width', '0');
$('#divResultado-14') .css('height', '0');
$('#resp-14').hide();
}

JAVASCRIPT