Calculadora em JavaScript e HTML/CSS

Publicado por Luis Felipe Almeida Vieira (última atualização em 28/04/2019)

[ Hits: 28.065 ]

Download Calculator.rar




Uma calculadora simples, feita usando botões em HTML e JavaScript.

  



Esconder código-fonte

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' lang='pt-br'>
        <link rel="stylesheet" href="_css/style.css">
        <script src="_js/calc.js"></script>
    </head>
    <body>
        <div>
            <h1 id='title'>Online Calculator</h1>
            <div class='main'>
                <form name='form'> 
                    <input class="textview" name='textview'> 
                </form>                  
                    <table>
                        <td>
                            <input type="button" class='button' onclick='c()' value="C">
                            <input type="button" class='button' onclick="back()" value="<">
                            <input type="button" class='button' onclick="insert('/')" value="/">
                            <input type="button" class='button' onclick="insert('*')" value="*">
                        </td>
                        <tr>
                            <td>
                                <input type="button" class='button' onclick="insert(7)" value="7">
                                <input type="button" class='button' onclick="insert(8)" value="8">
                                <input type="button" class='button' onclick="insert(9)" value="9">
                                <input type="button" class='button' onclick="insert('+')" value="+">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" class='button' onclick="insert(4)" value="4">
                                <input type="button" class='button' onclick="insert(5)" value="5">
                                <input type="button" class='button' onclick="insert(6)" value="6">
                                <input type="button" class='button' onclick="insert('-')" value="-">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" class='button' onclick="insert(1)" value="1">
                                <input type="button" class='button' onclick="insert(2)" value="2">
                                <input type="button" class='button' onclick="insert(3)" value="3">
                                <input type="button" class='button' onclick='equal()' value="=">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="hidden">
                                <input type='button' value='0' onclick="insert(0)" class='button' id='n0'>
                                <input type='button' value='.' onclick="insert('.')" class='button' id='n0'>
                            </td>
                        </tr>
                </form>               
            </div>
        </div>
    </body>
</html>

(CSS):
*{
    padding: 0;
    margin: 0;
}
#title{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    margin: 0px;
}
.main{
    margin: 0 auto;
}
#n0{
    margin-left: 54px;
}
.button{
    width: 50px;
    height: 50px;
    font-size: 25px;
    margin: 2;
}
.textview{
    width: 211px;
    height: 30px;
}

(JavaScript):
function insert(num){
    document.form.textview.value = document.form.textview.value + num;
}
function equal(){
    exp = document.form.textview.value;
    if(exp){
       document.form.textview.value = eval(exp);
}
}
function c(){
    document.form.textview.value = "";
}
function back(){
    var exp = document.form.textview.value;
    document.form.textview.value = exp.substring(0, exp.length-1);
}

Scripts recomendados

Capturando o nome do browser, vesão, código e plataforma do visitante

IFrame (página dentro de página)

Refresh

Tabela com efeito Hover em JavaScript

Barras coloridas


  

Comentários

Nenhum comentário foi encontrado.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts