Показать сообщение отдельно
  #19 (permalink)  
Старый 02.02.2016, 23:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Калькулятор простой
hbsv,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .screen{
      border: 1px solid #8B4513;
      width: 120px;
      display: inline-block;
       border-radius: 2px;
       text-align: right;
    }
   .calculator{
     width: 120px;
     text-align: center;
   }
   .calculator input{
     width: 20%;
   }

  </style>


</head>

<body>
<form>
    <table class="calculator">
        <tr>
            <td>


                    <span class="screen" >0</span>

            </td>
        </tr>

<tr>
    <td>


<input class="button" type="button" value="1" />
<input class="button" type="button" value="2" />
<input class="button" type="button" value="3" />
<input class="button" type="button" value="+"  />
         </td>
        </tr>
         <tr>
    <td>
<input class="button" type="button" value="4" />
<input class="button" type="button" value="5" />
<input class="button" type="button" value="6" />
<input class="button" type="button" value="-" />
         </td>
        </tr>
         <tr>
    <td>
<input class="button" type="button" value="7" />
<input class="button" type="button" value="8" />
<input class="button" type="button" value="9" />
<input class="button" type="button" value="*" />
         </td>
        </tr>
         <tr>
    <td>
<input class="button" type="button" value="c" />
<input class="button" type="button" value="0" />
<input class="button" type="button" value="=" />
<input class="button" type="button" value="/" />



            </td>
        </tr>
    </table>
</form>
<script>
window.addEventListener("DOMContentLoaded", function() {
    var calculator = document.querySelector(".calculator"),
        screen = document.querySelector(".screen");
    var methods = {
        a: 0,
        b: 0,
        "+": function() {
            return this.a += this.b
        },
        "-": function() {
            return this.a -= this.b
        },
        "*": function() {
            return this.a *= this.b
        },
        "/": function() {
            return this.a /= this.b
        },
        out: function(a) {
            screen.innerHTML = a
        },
        fix: function(a) {
            return (this[a] * 100 | 0) / 100
        },
        cur: 0,
        res: function(a) {
     if (a == +a)
                if (!this.cur) {
                    this.a = +(this.a + "" + a);
                    this.out(this.fix("a"))
                    }
                else {
                    this.b = +(this.b + "" + a);
                    this.out(this.fix("a") + this.cur + this.fix("b"))
                    }
      else if (a == "c")
            {
                this.b = this.a = this.cur = 0;
                this.out(0)
            }
      else if (this.cur) {
                if (!this.b && this.cur == "/") {
                    this.out("err");
                    return
                }
                !this.b && this.cur != "*" && (this.b = this.a);
                this[this.cur]();
                this.out(this.fix("a"));
                this.b = 0;
                this.cur = a == "=" ? 0 : a
            }
      else if (a != "=") {
                this.out(this.fix("a") + a);
                this.cur = a
            }
        }
    };
    calculator.addEventListener("click", function(event) {
        var cls = event.target.classList;
        if (cls && cls.contains("button")) {
            val = event.target.value;
            methods.res(val)
        }
    })
});
</script>
</body>

</html>
Ответить с цитированием