Calculadora em JavaScript e HTML/CSS

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

[ Hits: 27.916 ]

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

Script de Tabuada

Data base em HTML para ASP

Html e suas principais Tags.

JSOO - JavaScript Orientado a Objeto

Adicionando wallpaper em sua página


  

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