Pages

segunda-feira, 11 de julho de 2016

Tabuada em Html, css e javascript

Programa básico para calcular a tabuada em Html, css e javascript.

<!DOCTYPE html>
<html>
<head>
<title>Teste de Rotina de repetição</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
        function calcular(){
             var n= new Number(document.fr.txtValor.value);
            var tabuada="<table align=center>";
           for (i = 0; i < 10; i++){
                 var p = n*i;
         tabuada = tabuada + "<tr><td>" + n + " x " + i + " = " + p;
          }
          tabuada = tabuada + "</table>";
          document.getElementById("resposta").innerHTML = tabuada;
            }
</script>
<style>
body{
border: background solid thin;
border-radius: 10px;
background-color:#ffe;
width: 400px;
height: 655px;
}
#titulo{
font-family: tahoma;
font-size: 16pt;
color: brown;
border-bottom-style: solid;
text-align: center;
border-bottom-width: thin;
display:table-cell;
vertical-align:middle;
width: 600px;
height: 80px;
}
p{
font-family: tahoma;
font-size: 12pt;
color: brown;
}
table{
border: background solid thin;
background-color:#fff;
width: 200px;
padding:10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#caixa{
border: background solid thin;
background-color:#ffe;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#botao{
font-family: tahoma;
font-size: 12pt;
background-color:white;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
width: 80px;
height: 80px;
padding: 5px;
background-color: red;
color: white;
}
td{
font-family: tahoma;
font-size: 12pt;
color: red;
border-bottom-style: dotted;
border-bottom-wisth: thin;
}
#separador{
font-family: tahoma;
font-size: 16pt;
color: red;
border-bottom-style: dotted;
border-bottom-wisth: thin;
padding: 10px;
}
</style>
</head>
<body>
<p id="titulo"> CALCULO - TABUADA </p>
<form name="fr">
<p style="padding:10px"> Calcular tabuada do valor:
<input type="text" name="txtValor" value="0" size="20" id="caixa"
style="padding:10px"/>
<p style="text-align: center"> <input type="button" value="Calcular" name="btnCalcular" id="botao"
onclick="calcular();"/>
<p id="separador">RESPOSTA ABAIXO</p>
<p id="resposta"> </p>
</form>
</body>
</html>




























Duvidas ou Trabalhos para fazer entre em Contato: marcofernando71@gmail.com

0 comentários:

Postar um comentário