Калькулятор на javascript за полчаса

Javascript не такой сложный, каким его считают многие. Чтобы продемонстрировать его простоту, функциональность и полезность еще раз расскажу как создать свой калькулятор на html/css/javascript за полчаса. Калькулятор будет производить 4 основных математических операции: сложение, вычитание, умножение и деление и выводить результаты вычислений.

 

План работы такой:
1. Пять минут на написание html кода формы.
2. Пять минут на css стили для нашего калькулятора.
3. Двадцать минут на написание javascript функций управляющих процессом вычисления.

 

Начнем. Для удобства лучше пользоваться каким-нибудь редактором, например, я использую Dreamweaver CS5. Открываем его и создаем новый html-документ.

Между тегами body добавляем код нашей формы:

<div> //контейнер для формы
<div></div> //блок для вывода сообщений
<div> //здесь будет собственно форма
<form name="calcjs"> //Форма. Обязательно пишем имя формы
<div> //Каждый элемент формы помещаем в див
<input type="text" name="disp" id="disp" value="0" size="19" maxlength="10"> //Это дисплей калькулятора
</div>
<div>
<input type="button" value="7" width="30" height="30" id="k7"> //Кнопочки, для каждой кнопки пропишем свой id
</div>
<div>
<input type="button" value="8" width="30" height="30" id="k8">
</div>
<div>
<input type="button" value="9" width="30" height="30" id="k9">
</div>
<div>
<input type="button" value="C" width="30" height="30" id="kc"> //Кнопка сброса
</div>
<div>
<input type="button" value="4" width="30" height="30" id="k4">
</div>
<div>
<input type="button" value="5" width="30" height="30" id="k5">
</div>
<div>
<input type="button" value="6" width="30" height="30" id="k6">
</div>
<div>
<input type="button" value="/" width="30" height="30" id="kd"> // Деление
</div>
<div>
<input type="button" value="1" width="30" height="30" id="k1">
</div>
<div>
<input type="button" value="2" width="30" height="30" id="k2">
</div>
<div>
<input type="button" value="3" width="30" height="30" id="k3">
</div>
<div>
<input type="button" value="*" width="30" height="30" id="ku"> //Умножение
</div>
<div>
<input type="button" value="0" width="30" height="30" id="k0">
</div>
<div>
<input type="button" value="=" width="30" height="30" id="kr"> // Знак равенства
</div>
<div>
<input type="button" value="+" width="30" height="30" id="kp"> //Сложение
</div>
<div>
<input type="button" value="-" width="30" height="30" id="km"> //Вычитание
</div>
<input type="text" name="operation" value="0"> //Этот элемент будет служить для записи в память операции и будет скрыт
<input type="text" name="pamyat" value="0"> //Этот элемент будет служить для записи в память числа и будет скрыт
</form> // Форма готова

Форма готова, но ее внешний вид пока далек от внешнего вида настоящего калькулятора. Добавим css-стили чтобы сделать наш калькулятор похожим на обычный калькулятор к которому мы привыкли. Создаем файл css и добавляем в него несколько стилей:

#calculator { /*стиль для обертки нашего калькулятора*/
width: 160px;
height: 240px;
}

#message { /*стиль для блока с сообщением*/
width: 160px;
height: 30px;
font-family:Verdana, Geneva, sans-serif;
font-size: 10px;
font-weight:bold;
color:#666;
}

#calcwrap { /* стиль для блока с формой*/
background:#CCC;
border: groove 7px; /*вид границ нашего калькулятора, чтобы не терять время выбираем groove, помните что не во всех браузерах границы будут отображаться одинаково, так что если торопиться некуда то лучше воспользоваться например рисунками для более корректного и красивого отображения*/
border-radius: 10px; /*Добавим закругленные уголки из css3, эта фишка работает не во всех браузерах*/
width: 160px;
height: 200px;
margin-top: 10px;
padding: 2px;
display:block;
}

#tablo { /*обертка для дисплея*/
background: #777;
width: 150px;
height: 30px;
margin: 5px 5px 10px;
}

#disp { /*дисплей*/
margin-top: 4px;
margin-left: 3px;
text-align:right;
}

#knopka { /*Кнопочки*/
width: 30px;
height: 30px;
margin: 2px 5px 5px;
float:left;
}

#operation, #pamyat { /*Стили для скрытых полей*/
width: 70px;
height: 30px;
float: left;
margin-right: 10px;
display: none;
}

Ну вот и все, теперь добавим стили в код формы:

<div id="calculator">
<div id="message"></div>
<div id="calcwrap">
<form action="" name="calcjs">
<div id="tablo"><input type="text" name="disp" id="disp" value="0" size="19" maxlength="10"></div>
<div id="knopka">
<input type="button" value="7" width="30" height="30" id="k7">
</div>
<div id="knopka">
<input type="button" value="8" width="30" height="30" id="k8">
</div>
<div id="knopka">
<input type="button" value="9" width="30" height="30" id="k9">
</div>
<div id="knopka">
<input type="button" value="C" width="30" height="30" id="kc">
</div>
<div id="knopka">
<input type="button" value="4" width="30" height="30" id="k4">
</div>
<div id="knopka">
<input type="button" value="5" width="30" height="30" id="k5">
</div>
<div id="knopka">
<input type="button" value="6" width="30" height="30" id="k6">
</div>
<div id="knopka">
<input type="button" value="/" width="30" height="30" id="kd">
</div>
<div id="knopka">
<input type="button" value="1" width="30" height="30" id="k1">
</div>
<div id="knopka">
<input type="button" value="2" width="30" height="30" id="k2">
</div>
<div id="knopka">
<input type="button" value="3" width="30" height="30" id="k3">
</div>
<div id="knopka">
<input type="button" value="*" width="30" height="30" id="ku">
</div>
<div id="knopka">
<input type="button" value="0" width="30" height="30" id="k0">
</div>
<div id="knopka">
<input type="button" value="=" width="30" height="30" id="kr">
</div>
<div id="knopka">
<input type="button" value="+" width="30" height="30" id="kp">
</div>
<div id="knopka">
<input type="button" value="-" width="30" height="30" id="km">
</div>
<input type="text" name="operation" id="operation" value="0">
<input type="text" name="pamyat" id="pamyat" value="0">
</form>

Осталось самое интересное - написать функции для расчета и прикрутить их к форме. Во-первых, нам нужна функция для вывода сообщений в блок message. Назовем ее calculator() - Если расчет еще не производился то функция будет выводить сообщение "Что вычисляем?", если расчеты произведены, то выводим текст "Итого: #ОТВЕТ#".

function calculator() {
pole = document.calcjs.disp.value; //присваиваем переменной pole значение выведенное на дисплее(по умолчанию 0)
if (pole == 0) { //Если переменная равна 0, то выводим вопрос, если не равна - то выводим ответ.
document.getElementById('message').innerHTML = 'Что вычисляем?';
} else {
document.getElementById('message').innerHTML = 'Итого: ' + pole;
}
}

Теперь пропишем функцию для вывода чисел на дисплей:

function raschet(names) { //функция будет считывать value кнопки
pole = document.calcjs.disp.value;
if (pole > 0) { //если на дисплей что то выводилось ранее
znach = pole.toString() + names.toString(); //то переменной присваиваем результат строки "то что на дисплее + значение кнопки"
znach = Number(znach); //превращаем строку в число (можно этого и не делать) и выводим на дисплей результат
document.calcjs.disp.value = znach;
} else {
document.calcjs.disp.value = names;
}
}

Еще нам нужна функция для кнопки сброса значений:

function sbros() { //думаю здесь все понятно
document.calcjs.disp.value = 0;
document.calcjs.operation.value = 0;
document.calcjs.pamyat.value = 0;
}

Теперь переходим к самому интересному функция для кнопок с операциями:

function znak(zn) { //будет считывать операцию из value кнопки
rez = Number(document.getElementById('pamyat').value); //для удобства введем дополнительную переменную и присвоим ей значение числа в памяти

if (document.calcjs.operation.value == 0) { //Если в память не записаны операции
document.getElementById('pamyat').value = document.calcjs.disp.value; //то просто записываем число на дисплее в блок памяти
} else { //если же что то есть
if (document.getElementById('operation').value == '+') { // то проверяем что за операция записана
document.getElementById('pamyat').value = rez + Number(document.calcjs.disp.value); //и производим эту операцию с числом в памяти и числом на дисплее
}
if (document.getElementById('operation').value == '-') {
document.getElementById('pamyat').value = rez - Number(document.calcjs.disp.value);
}
if (document.getElementById('operation').value == '*') {
document.getElementById('pamyat').value = rez * Number(document.calcjs.disp.value);
}
if (document.getElementById('operation').value == '/') {
document.getElementById('pamyat').value = rez / Number(document.calcjs.disp.value);
}
}
op = zn.toString(); //записываем в память новую операцию
document.getElementById('operation').value = op;
document.calcjs.disp.value = 0; //обнуляем число на дисплее
}

Далее прописываем функцию для знака равенства:

function ravno() {
if (document.calcjs.operation.value == 0) { //если в памяти не записаны операции
pole = document.calcjs.disp.value; // то просто записываем число с дисплея в переменную
} else { // а если что то есть
if (document.getElementById('operation').value == '+') { //то проверяем что за операция в памяти
pole = Number(document.getElementById('pamyat').value) + Number(document.calcjs.disp.value); //и производим эту операцию с числом в памяти и числом на дисплее
}
if (document.getElementById('operation').value == '-') {
pole = Number(document.getElementById('pamyat').value) - Number(document.calcjs.disp.value);
}
if (document.getElementById('operation').value == '*') {
pole = Number(document.getElementById('pamyat').value) * Number(document.calcjs.disp.value);
}
if (document.getElementById('operation').value == '/') {
pole = Number(document.getElementById('pamyat').value) / Number(document.calcjs.disp.value);
}
}
document.calcjs.disp.value = pole; //возвращаем результат на дисплей
calculator(); //обновляем message
document.getElementById('operation').value = 0;//очищаем поле operation
document.getElementById('pamyat').value = 0;//очищаем поле pamyat }

И последний штрих - добавим событие onClick для работы с написанными ранее функциями.

<div id="calculator">
<div id="message"></div>
<div id="calcwrap">
<form action="" name="calcjs">
<div id="tablo">
<input id="disp" type="text" name="disp" value="0" size="19" maxlength="10" /></div>
<div id="knopka"><input id="k7" onclick="raschet(this.value);" type="button" value="7" /> //Для каждой кнопки добавляем событие onClick с указанием функции raschet, которая по клику получает value кнопки
<div id="knopka"><input id="k8" onclick="raschet(this.value);" type="button" value="8" /></div>
<div id="knopka"><input id="k9" onclick="raschet(this.value);" type="button" value="9" /></div>
<div id="knopka"><input id="kc" onclick="sbros();" type="button" value="C" /></div>//добавляем onClick для функции сброс
<div id="knopka"><input id="k4" onclick="raschet(this.value);" type="button" value="4" /></div>
<div id="knopka"><input id="k5" onclick="raschet(this.value);" type="button" value="5" /></div>
<div id="knopka"><input id="k6" onclick="raschet(this.value);" type="button" value="6" /></div>
<div id="knopka"><input id="kd" onclick="znak(this.value);" type="button" value="/" /></div>//добавляем onClick для функции znak для кнопок с арифметическими операциями&
<div id="knopka"><input id="k1" onclick="raschet(this.value);" type="button" value="1" /></div>
<div id="knopka"><input id="k2" onclick="raschet(this.value);" type="button" value="2" /></div>
<div id="knopka"><input id="k3" onclick="raschet(this.value);" type="button" value="3" /></div>
<div id="knopka"><input id="ku" onclick="znak(this.value);" type="button" value="*" /></div>
<div id="knopka"><input id="k0" onclick="raschet(this.value);" type="button" value="0" /></div>
<div id="knopka"><input id="kr" onclick="ravno();" type="button" value="=" /></div>//добавляем onClick для вывода результатов вычислений
<div id="knopka"><input id="kp" onclick="znak(this.value);" type="button" value="+" /></div>
<div id="knopka"><input id="km" onclick="znak(this.value);" type="button" value="-" /></div>
<input id="operation" type="text" name="operation" value="0" />
<input id="pamyat" type="text" name="pamyat" value="0" /></form></div> </div>

Ну, вот и готов наш калькулятор. Конечно он очень простой, но аналогично в него можно добавить любые другие операции и производить вычисления кораздо более сложных выражений. Пример работы калькулятора можно посмотреть здесь. Буду рад если моя статья кому-то пригодилась и еще раз подчеркну - Javascript - очень удобен, если с ним обращаться умеючи.

 


Также можно почитать:

К сожалению, у Вас отключен Javascript, включите JavaScript, чтобы испытать комментарии правильно

Оставить комментарий:

  • Naum91

    Написано 2013-08-20 11:40:26

    Да, с социальными сетями пока еще не все ясно... Хотелось бы узнать? у ПС: переход по каким ссылкам ( из поисковой выдачи, с сайтов, социальных сетей, форумов) наиболее важен для повышения релевантности страниц (URL) в поисковой выдаче? Наверное и Фишкин этого не знает...

    Ответить на комментарий

    • azzaul

      Написано 2013-08-21 08:58:32

      Да, с социальными сетями пока еще не все ясно... Хотелось бы узнать? у ПС: переход по каким ссылкам ( из поисковой выдачи, с сайтов, социальных сетей, форумов) наиболее важен для повышения релевантности страниц (URL) в поисковой выдаче? Наверное и Фишкин этого не знает...
      Вопрос задан интересный, но данная статья далека от темы продвижения, сео и прочих тонкостей поэтому ответ на данный вопрос перенесен в статью - Траст сайта и его влияние на позиции в поисковых системах

      Ответить на комментарий

  • Веди

    Написано 2012-12-11 00:05:32

    Во -первых не понятно, для чего присваивались каждой кнопке id,
    во -вторых, где отклики для нажатия кнопки, как js понимать что кнопка нажата и необходимо произвести действие?
    подскажите пожалуйста...

    Ответить на комментарий

    • azzaul

      Написано 2012-12-11 10:11:24

      Спасибо за полезный комментарий.
      Во -первых не понятно, для чего присваивались каждой кнопке id,

      Первоначальная задумка была в том, чтобы изменить внешний вид кнопок и поправить их положение с помощью css, если это будет необходимо, потом решил отказаться от этого так как это лищь добавило бы лишнего текстаи увело бы от сути статьи, а статья и так довольно большая. Поэтому сейчас id в форме не нужны, но убирать я их не стал, потому что это может понадобиться кому нибудь другому, кто решит потратить немного больше времени на свой калькулятор.
      во -вторых, где отклики для нажатия кнопки, как js понимать что кнопка нажата и необходимо произвести действие?
      А вот это моя ошибка, забыл добавить окончательный вариант формы с событием onClick на каждой кнопке, теперь результат можно посмотреть в конце статьи.

      Ответить на комментарий

      • Веди

        Написано 2012-12-11 11:36:04

        по откликам я понял сам, "пофаербагил" Ваш примет, и вписал клики в код, но есть главная ошибка, нарушена логика калькулятора, первый раз он считает правильно, а вот дальше начинает путать, например: 6*3=18, далее считаю, 18/10=10.8, т.е. в память заноситься не 18, а 108.
        попробую разобраться где косяк, возможно что-то с обнулением не так..

        P.S. и ещё, это не совет, а просто пожелание как пользователя, я бы предал ссылке, на пример калькулятора, , очень неудобно когда тебя выкидывает со страницы, ибо всегда хочется иметь перед глазами оригинал.

        Ответить на комментарий

        • azzaul

          Написано 2012-12-11 14:21:28

          нарушена логика калькулятора, первый раз он считает правильно, а вот дальше начинает путать, например: 6*3=18, далее считаю, 18/10=10.8, т.е. в память заноситься не 18, а 108.

          Логика не нарушена, но был небольшой недочет в работе функции ravno(). Ошибку я поправил, но суть объясню, дело в том что когда произведена операция 6*3 и получен ответ 18, то на этом этапе на дисплей калькулятора выведен только ответ, но в полях operation и pamyat по прежнему хранятся число 6 и операция *. Поэтому, когда мы начинаем делить, то работает эта часть скрипта:
          if (document.getElementById('operation').value == '+')
          document.getElementById('pamyat').value = rez + Number(document.calcjs.disp.value);
          }
          if (document.getElementById('operation').value == '-') {
          document.getElementById('pamyat').value = rez - Number(document.calcjs.disp.value);
          }
          if (document.getElementById('operation').value == '*') {
          document.getElementById('pamyat').value = rez * Number(document.calcjs.disp.value);
          }
          if (document.getElementById('operation').value == '/') {
          document.getElementById('pamyat').value = rez / Number(document.calcjs.disp.value);
          }
          Соответственно прежде чем разделить 18 на 10 скрипт производит умножение 18*6=108, вот откуда взялось число 108 и потом уже 108 делит на 10. Просто нужно было очищать оба скрытых поля после нажатия знака равенства.