terça-feira, 27 de dezembro de 2016

Javascript exemplo 1 - calculadora com operações com button

Segue exemplo 1 com operações em javascript calculadora



<!DOCTYPE html>
<html>
    <head>
        <title> Operações </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
           
            #div1 {
               
                border-style: solid;
                border-color: blue;
                border-bottom-color: black;
                border-top-color: black;
                border-left-color: red;
                border-right-color: red;
                border-radius: 2cm;
                border-width: 60px;
            }
           
            body {              
                background-color: dodgerblue;
            }
           
            h1 {              
                color: azure;
            }
           
            .b {              
                color: white;
                background-color: blue;
                border-color: black;
            }
           
        </style>
    </head>
    <body>
        <script>
            function soma() {
              var soma = new Number(document.getElementById("valor1").value)
+ new Number(document.getElementById("valor2").value);
                alert("Valor 1 + Valor 2: " + soma);
            }

            function sub() {
             var sub = new Number(document.getElementById("valor1").value)
- new Number(document.getElementById("valor2").value);
                alert("Valor 1 - Valor 2: "+sub);
            }

            function mult() {
             var mult = new Number(document.getElementById("valor1").value)
* new Number(document.getElementById("valor2").value);
                alert("Valor 1 * Valor 2: "+mult);
            }

            function div() {
             var div = new Number(document.getElementById("valor1").value)
/ new Number(document.getElementById("valor2").value);
                alert("Valor 1 / Valor 2: " +div);
            }

        </script>
        <center>
        <div id="div1">
            <h1> OPERADORES </h1>
            <br>
            <br>
            <button onclick="soma();" class="b"> Soma </button>
            <button onclick="sub();" class="b"> Subtração </button>
            <button onclick="mult();" class="b"> multiplicação </button>
            <button onclick="div();" class="b"> Divisão </button>
            <br>
            <br>
            <p> Valor 1: <input type="text" value="0" id="valor1"/> </p>
            <p> Valor 2: <input type="text" value="0" id="valor2"/> </p>
        </div>
    </center>
</body>
</html>

Nenhum comentário:

Postar um comentário