Calculadora em JavaScript e HTML/CSS [Javascript]

Calculadora em JavaScript e HTML/CSS

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

[ Hits: 28.250 ]

Download Calculator.rar

7 0

Denuncie Favoritos Indicar

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

IFrame (página dentro de página)

Script simples

TABELA DE CORES

Adicionando um texto em movimento

HTA - HTML Application Um exemplo com todas as propriedades

Comentários

Nenhum comentário foi encontrado.