HTML + CSS + JAVASCRIPT

JAVASCRIPT

function gravar10() {

var Vo = document.getElementById ("txtMruvVo-06").value;
var g = document.getElementById ("txtMruvG-06").value;
var T = document.getElementById ("txtMruvT-06").value;
var Vfinal = (parseFloat(Vo) + (parseFloat(g) * parseFloat(T))).toFixed(2); var gravidade = "O movimento é para baixo";

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

$('#divResultado-10').css('background', '#000');
$('#divResultado-10').css('border', 'dashed 1px #fff');
$('#divResultado-10').css('width', '90%');
$('#divResultado-10').css('height', '80px');
$('#resp-10').show();
var div = document.getElementById ("resp-10");
div.innerText = "A V(t) é igual a = "+Vfinal+" m/s"+"\n"+ gravidade;
var elem = document.getElementById ("animate");

var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 230) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
}
}

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

ctx.beginPath();
ctx.moveTo(15,15);
ctx.lineTo(15,60);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(15,60);
ctx.lineTo(10,55);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(15,60);
ctx.lineTo(20,55);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(50,15);
ctx.lineTo(50,60);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(50,60);
ctx.lineTo(45,55);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(50,60);
ctx.lineTo(55,55);
ctx.stroke();

ctx.beginPath();
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.font = "10pt sans-serif";
ctx.fillText("g",20,30);
ctx.fillText("v(t)",60,30);
ctx.fill();
ctx.stroke();
}

function limpar10() {

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

JAVASCRIPT

function gravar11() {

var g = document.getElementById ("txtMruvG-07").value;
var T = document.getElementById ("txtMruvT-07").value;
var Vinicial = ((parseFloat(g) * parseFloat(T))).toFixed(2); var gravidade = "O movimento é para cima";

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

$('#divResultado-11'). css('background', '#000');
$('#divResultado-11') .css('border', 'dashed 1px #fff');
$('#divResultado-11') .css('width', '90%');
$('#divResultado-11').css('height', '80px');
$('#resp-11').show();
var div = document.getElementById ("resp-11");
div.innerText = "A Vo é igual a = "+Vinicial+" m/s"+"\n"+ gravidade;

var elem = document.getElementById ("animate-02");

var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 230) {
clearInterval(id);
} else {
pos++;
elem.style.bottom = pos + 'px';
}
}

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

ctx.beginPath();
ctx.moveTo(15,15);
ctx.lineTo(15,60);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(15,60);
ctx.lineTo(10,55);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(15,60);
ctx.lineTo(20,55);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(50,15);
ctx.lineTo(50,60);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(50,15);
ctx.lineTo(45,20);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(50,15);
ctx.lineTo(55,20);
ctx.stroke();

ctx.beginPath();
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.font = "10pt sans-serif";
ctx.fillText("g",20,30);
ctx.fillText("v(t)",60,30);
ctx.fill();
ctx.stroke();
}

function limpar11() {

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

JAVASCRIPT