STL,CSS

Aquí tenemos una calculadora básica de creación de JavaScript

 

<!DOCTYPE html>

<html>

<head>

<title>Kalkulator</title>

<meta charset="utf-8" />

<style type="text/css">

#calculator {

    background: #0000FF;

    margin:  auto;

    padding: 50px 50px 50px 50px;

    width: 200px;

    text-align: center;

    

    

}

#calculator button{

    background: #FFEBCD;

    padding: 13px;

    width: 13px;

   

padding-right:33px;

max-width: 300px;

margin:auto;

text-align: center;

 

 

 

 

}

 

#calculator input[type="text"] {

    padding: 20px;

    width: 160px;

    margin-bottom: 10px;

    text-align: center;

    

 

}

 

</style>

<script>

function Calculator(operator) 

{

    var a = document.getElementById('a').value;

    var b = document.getElementById('b').value;  

 

    switch(operator) 

    {

        case '+':

            var result = parseFloat(a) + parseFloat(b);         

        break;

        case '-':

            var result = parseFloat(a) - parseFloat(b);         

        break;  

        case 'x':

            var result = parseFloat(a) * parseFloat(b);         

        break;  

        case '/':

            var result = parseFloat(a) / parseFloat(b);         

        break;    

        case 'C':

             var result  = '0';   

        break;    

         case '√a':

             var result  = Math.pow(a, 0.5);   

        break;

          case 'a^b':

             var result  = Math.pow(a, b);   

        break;

         case '%':

             var result  = parseFloat(a) * parseFloat(b)/100;   

        break;

        case 'log(a)':

             var result  = Math.log(a);   

        break;

    }

 

    document.getElementById('result').value = '= ' + result;

}

</script>

</head>

<body>

<form id="calculator">

    <input type="text" id="a" placeholder="a" />

    <input type="text" id="b" placeholder="b" />

    <input type="text" id="result" placeholder="=" disabled="disabled" />

    <p><button type="button" onclick="Calculator(this.innerHTML)">C</button>

    <button type="button" onclick="Calculator(this.innerHTML)">+</button> 

    <button type="button" onclick="Calculator(this.innerHTML)">-</button>

    <button type="button" onclick="Calculator(this.innerHTML)">x</button>   

    <button type="button" onclick="Calculator(this.innerHTML)">/</button>

    <button type="button" onclick="Calculator(this.innerHTML)">√a</button>

    <button type="button" onclick="Calculator(this.innerHTML)">a^b</button>

    <button type="button" onclick="Calculator(this.innerHTML)">%</button>

     <button type="button" onclick="Calculator(this.innerHTML)">log(a)</button></p>

    

</form>

 

</body>



Dodaj komentarz






Dodaj

© 2013-2025 PRV.pl
Strona została stworzona kreatorem stron w serwisie PRV.pl