Среда, 31 Октября 2012 09:54

Делаем онлайн калькулятор

Written by 
Оцени эту запись
(5 Голоса)

В этой статье я расскажу как можно сделать онлайн калькулятор на JavaScript, который будет выполнять стандартные математические операции - сложение, вычитание, умножение, деление, квадрат числа и квадратный корень, косинус, синус, экспонента в степени числа, процент от числа и деление на число. Пока реализовано только кликанье мышкой, в будущем будет добавлен ввод с клавиатуры.

 

Результат можно сразу посмотреть:

 

 

C ex sin cos x2 7 8 9 ÷ % 4 5 6 × 1⁄x 1 2 3 = 0 . ± +

 

 

 

Для начала, я нарисовала сам калькулятор. Для этого была сдедада его структура и прописаны стили.

 

Структура калькулятора проста - блок с кнопочками и полем для показа результата:

 

 

<div id="calculator" class="calculator">
            <div id="view"></div>
            <span id="del">C</span>
            <span id="unexp">e<sup>x</sup></span>
            <span id="unsin">sin</span>
            <span id="uncos">cos</span>
            <span id="unsqr">x<sup>2</sup></span>
            <span id="unsqrt">&radic;</span>
            <span id="id7">7</span>
            <span id="id8">8</span>
            <span id="id9">9</span>
            <span id="bidiv">&divide;</span>
            <span id="unperc">%</span>
            <span id="id4">4</span>
            <span id="id5">5</span>
            <span id="id6">6</span>
            <span id="bimult">&times;</span>
            <span id="unfrac">1&frasl;x</span>
            <span id="id1">1</span>
            <span id="id2">2</span>
            <span id="id3">3</span>
            <span id="bimin">&minus;</span>
            <span id="eq">=</span>
            <span id="id0">0</span>
            <span id="point">.</span>
            <span id="pl_m">&plusmn;</span>
            <span id="biplus">+</span>
        </div>
 
 
У каждой кнопки свой идентификатор, для обращения из JavaScript.
 
 
Теперь нужно калькулятору придать симпатичный вид - закругление углов, легкий градиент. Это делается с использованием CSS3. Расположение кнопок делаем через float.
 
 
 
.calculator {
    margin: 20px auto;
    width: 300px;
    height: auto;
    padding: 20px;
    background: #eee;
    background-image: -webkit-linear-gradient( 15deg, #ccc, #fff, #ccc);
    background-image: -moz-linear-gradient( 15deg, #ccc, #fff, #ccc);
    border-top: 5px solid #eee;
    border-left: 5px solid #ddd;
    border-right: 5px solid #ccc;
    border-bottom: 5px solid #aaa;
    -webkit-border-radius: 10px;
    -mox-border-radius: 10px;
    font-family: Arial;
}
 
.calculator span {
    display: block;
    width: 48px;
    height: 40px;
    background: #ccc;
    background-image: -webkit-linear-gradient( 15deg, blue, #157DEC, blue);
    background-image: -moz-linear-gradient( 15deg, blue, #157DEC, blue);
    -webkit-border-radius: 10px;
    -mox-border-radius: 10px;
    color: #eee;
    text-shadow: 0 0 2px #157DEC;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    float: left;
    margin: 5px;
    border: 1px solid #157DEC;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}
 
.calculator span:hover {
    background-image: -webkit-linear-gradient( 15deg, blue, #1569C7, blue);
    background-image: -moz-linear-gradient( 15deg, blue, #1569C7, blue);
}
 
.calculator span:active {
    background-image: -webkit-linear-gradient( 15deg, blue, blue, blue);
    background-image: -moz-linear-gradient( 15deg, blue, blue, blue);
}
 
.calculator:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    clear: left;
}
 
.calculator span sup {
    font-size: .5em;
    line-height: 10px;
}
 
.calculator span#eq {
    height: 92px;
    line-height: 92px;
    float: right;
}
 
.calculator #view {
    width: 280px;
    height:20px;
    background: #fff;
    border-top: 3px solid #aaa;
    border-left: 3px solid #ddd;
    border-right: 3px solid #ccc;
    border-bottom: 3px solid #eee;
    margin-bottom: 20px;
    -webkit-border-radius: 5px;
    -mox-border-radius: 5px;
    text-align: right;
    line-height: 20px;
    vertical-align: middle;
    color: darkblue;
    padding: 10px;
    font-size: 20px;
}
 
.calculator span#del {
    width: 108px;
    float: right;
}
 
.calculator span:nth-child(3) {
    clear: right;
}
 
 
А теперь осталось прописать саму JavaScript функцию, которую запустим при загрузке body:
 
 
<script>
        document.body.onload = Calculator;
</script>
 
 
 
В нашей функции мы разбиваем кнопочки на три основных вида - цифры, унарные и бинарные операции.
 
 
 
            for (i = 0; i < buttons.length; i ++) {
                button[i] = buttons[i];
            }
            for (i = 0; i < 10; i++) {
                number[i] = document.getElementById('id'+i);
                number[i].addEventListener('click', function () {
                    view.innerHTML += this.innerHTML;
                });
            }
            j = k = 0;
            for (i = 0; i < buttons.length; i++) {
                if (button[i].id.substring(0,2) == 'un') {
                    un_operator[j] = button[i];
                    j++;
                }
                if (button[i].id.substring(0,2) == 'bi') {
                    bi_operator[k] = button[i];
                    k++;
                }
            }
            for (i = 0; i < un_operator.length; i++) {
                un_operator[i].addEventListener('click', function () {
                    if (view.innerHTML != '' && view.innerHTML != 'Error') {
                        view.innerHTML = Operation(this.id, parseFloat(view.innerHTML));
                    } else {
                        view.innerHTML = Operation(this.id, 0);
                    }
                });
            }
 
 
 
Здесь у нас массив button содержит все кнопки, number только числа. У чисел id="id"+i, то есть у кнопки 7 идентификатор id7.
 
Далее выбираем отдельно унарные и бинарные операции у которых идентификаторы начинаются с un и bi соответственно. Для чего это нужно? У них реализована разная логика работы. При нажатии на кнопку с унарной операцией, мы берем содержание нашего окна вывода и делаем с ним указанную операцию. При нажатии на бинарную операцию, мы также берем значение из окошка, запоминаем его, очищаем окошко и ожидаем, что пользователь введет и второе значение. А при нажатии на "=", мы с этими двумя значениями выполняем действия.
 
 
После выбора всех нужных кнопок, вешаем на них события:
 
 
           for (i = 0; i < un_operator.length; i++) {
                un_operator[i].addEventListener('click', function () {
                    if (view.innerHTML != '' && view.innerHTML != 'Error') {
                        view.innerHTML = Operation(this.id, parseFloat(view.innerHTML));
                    } else {
                        view.innerHTML = Operation(this.id, 0);
                    }
                });
            }
            for (i = 0; i < bi_operator.length; i++) {
                bi_operator[i].addEventListener('click', function () {
                    if (view.innerHTML != '' && view.innerHTML != 'Error') {
                        memory = parseFloat(view.innerHTML);
                    } else {
                        memory = 0;
                    }
                    view.innerHTML = '';
                    k = this.id;
                });
            }
            equal.addEventListener('click', function () {
                if (view.innerHTML != '' && view.innerHTML != 'Error') {
                    memory2 = parseFloat(view.innerHTML);
                } else {
                    memory2 = 0;
                }
                view.innerHTML = Operation(k, memory2, memory);
            });
 
 
Вы можете видеть, что выполняется функция Operation(), в которую передаются параметры идентификатора кнопки операции, значение операнда и, если нужно, значение второго операнда для бинарной операции.
 
Сама функция выглядит так:
 
 
         function Operation (a, b, c) {
            switch (a) {
                case 'unexp':
                    return Math.exp(b);
                case 'unsin':
                    return Math.sin(b);
                case 'uncos':
                    return Math.cos(b);
                case 'unsqr':
                    return Math.pow(b, 2);
                case 'unsqrt':
                    if (b >= 0) {
                        return Math.pow(b, 1/2);
                    } else {
                        return 'Error';
                    }
                case 'unperc':
                    return b*0.01;
                case 'unfrac':
                    if (b != 0) {
                        return 1/b;
                    } else {
                        return 'Error';
                    }
                case 'bidiv':
                    if (b != 0) {
                        return c/b;
                    } else {
                        return 'Error';
                    }
                case 'bimult':
                    return c*b;
                case 'bimin':
                    return c-b;
                case 'biplus':
                    return c+b;
            }
        }
 
 
Как видим это обычный switch, который в зависимости от id кнопки операции обрабатывает операнды и возвращает нужное значение. В операциях, связанных с делением на число выполняем проверку на равенство этого числа нулю, а в подивании корня проверяем на положительность операнда.
 
 
 
 
 

Additional Info

Комментарии  

 
0 #2 kat-khmara 12.05.2014 06:24
Рассматриваю варианты))
 
 
0 #1 Влад 11.05.2014 14:02
Зачем усложнять себе жизнь? Не легче ли калькулятор сделать на HTML5?
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов