Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • CALCULADORA

    Cargado por

    6D ???
    38 vistas7 páginas
    Esto es una calculadora en una pagina web

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Esto es una calculadora en una pagina web

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    38 vistas7 páginas

    CALCULADORA

    Cargado por

    6D ???
    Esto es una calculadora en una pagina web

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 7

    UPDS

    UNIVERSIDAD PRIVADA
    DOMINDO SAVIO

    JAVASCRIPT - CALCULADORA

    NOMBRE:
    Rosendo Achu Cruz
    CARRERA:
    Ingeniería de sistemas
    TURNO:
    Mañana
    DOCENTE:
    Ing. Rodmy Orellana Illanes

    2020
    LAPAZ - BOLIVIA
    LA PAZ - BOLIVIA
    DISEÑADOR DE LA CARACTU LA: ROSEN DO
    CODIGO
    Calculadora.html

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CALCULADORA DE ROSENDO</title>
    <link rel="stylesheet" href="hoja-de-estilo-calculadora.css">
    </head>

    <body >

    <div class="TITULO">
    <CENTER>
    <h1>MI CALCULADORA</h1>
    <hr></hr>

    </CENTER>
    </div>
    <div class="nombre">
    <p>Rosendo Achu Cruz</p>
    <a href="#">DISEÑADO POR ROSENDO</a>
    </div>

    <script>
    function validaNumericos(event) {
    if(event.charCode >= 48 && event.charCode <= 57){
    return true;
    }
    alert('Solo se acepta numeros');
    return false;
    }
    </script>

    <script>
    function calcNumbers(result){
    form.displayResult.value=form.displayResult.value+result;

    }
    </script>
    <div class="CONTEN">
    <form name="form">
    <div class="DD">
    <input type="text" placeholder="0" name="displayResult" onkeypress='retur
    n event.charCode >= 48 && event.charCode <= 57'/>
    </div>
    <div class="BOTON">
    <div class="RR">
    <input type="button" name="b7" value="7" onClick="calcNumbers(b7.value)">
    <input type="button" name="b8" value="8" onClick="calcNumbers(b8.value)">
    <input type="button" name="b9" value="9" onClick="calcNumbers(b9.value)">
    <input type="button" name="addb" value="+" onClick="calcNumbers(addb.value)
    ">

    </div>

    <div class="RR">
    <input type="button" name="b4" value="4" onClick="calcNumbers(b4.value)">
    <input type="button" name="b5" value="5" onClick="calcNumbers(b5.value)">
    <input type="button" name="b6" value="6" onClick="calcNumbers(b6.value)">
    <input type="button" name="subb" value="-
    " onClick="calcNumbers(subb.value)">
    </div>

    <div class="RR">
    <input type="button" name="b1" value="1" onClick="calcNumbers(b1.value)">
    <input type="button" name="b2" value="2" onClick="calcNumbers(b2.value)">
    <input type="button" name="b3" value="3" onClick="calcNumbers(b3.value)">
    <input type="button" name="mulb" value="*" onClick="calcNumbers(mulb.value)
    ">
    </div>

    <div class="RR">
    <input type="button" name="b0" value="0" onClick="calcNumbers(b0.value)">
    <input type="button" name="potb" value="." onClick="calcNumbers(potb.value)
    ">
    <input type="button" name="divb" value="/" onClick="calcNumbers(divb.value)
    ">
    <input type="button" class="ddd" value="=" onClick="displayResult.value=eva
    l(displayResult.value)">
    <div class="RRR">
    <input type="reset" class="x" value="c" onClick="calcNumbers(bx.value
    )">
    </div>

    </div>
    </div>

    </form>
    </div>
    </body>
    </html>
    Hoja de estilo calculadora.css
    body, html {
    background-color: rgb(44, 43, 43);
    margin: 0;
    padding: 0;
    }

    .nombre{
    color: rgb(255, 255, 255);
    font: oblique bold 120% cursive;

    }
    .nombre{color: rgb(255, 255, 255);}
    .nombre:hover{text-shadow: 2px 2px 5px rgb(175, 223, 238);}

    .TITULO{

    font: small-caps 100%/200% serif;


    }
    .TITULO{color: rgb(255, 255, 255);}
    .TITULO:hover{text-shadow: 2px 2px 5px rgb(73, 213, 255);}

    .CONTEN {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(47, 49, 49);
    box-
    shadow: 0 4px 8px 0 rgba(163, 162, 162, 0.2), 0 6px 20px 0 rgba(100, 99, 99, 0.2)
    ;
    border-radius: 5px;
    padding-bottom: 14px;
    width: 320px;

    }
    .DD {
    width: 100%;
    height: 40px;
    padding: 40px 0;
    background: rgb(47, 49, 49);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    }
    .BOTON {
    padding: 20px 20px 0 20px;
    }

    .RRR {
    padding: 20px 20px 0 20px;
    width: 280px;
    float: left;
    -ms-zoom-animation: 2s;
    }

    .RR {
    width: 280px;
    float: left;
    -ms-zoom-animation: 2s;
    }
    input[type=button] {
    width: 60px;
    height: 60px;
    float: left;
    padding: 0;
    margin: 5px;
    box-sizing: border-box;
    background: #070707;
    border: none;
    font-size: 25px;
    line-height: 30px;
    border-radius: 0%;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    }
    input:hover{
    background: rgba(48, 47, 47, 0.377);

    .a{
    color: rgb(252, 252, 252);
    }
    a:link{
    text-decoration: none;
    }
    a:hover{
    color: rgb(0, 201, 252);
    cursor: pointer;
    }
    input[type=text] {
    width: 270px;
    height: 60px;
    float: left;
    padding: 0;
    box-sizing: border-box;
    border: none;
    background: none;
    color: #ffffff;
    text-align: right;
    font-weight: 700;
    font-size: 60px;
    line-height: 60px;
    margin: 0 25px;

    }
    .ddd {
    background: #0a88fd7c !important;
    color: #ffffff !important;

    .x {
    width: 280px;
    float: left;
    -ms-zoom-animation: 2s;

    }
    input[type=reset] {
    width: 230px;
    height: 50px;
    float: left;
    padding: 0;
    margin: 0px;
    box-sizing: border-box;
    background: #000000;
    border: none;
    font-size: 35px;
    line-height: 30px;
    border-radius: 0%;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    }
    input:hover{
    background: rgba(241, 240, 240, 0.247);

    }
    Resultado

    También podría gustarte