Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать в интернете на создании сайтов и блогов

Создаем простой калькулятор на javascript с кнопкой сброса

Доброго времени суток, дорогие читатели блога. После прочтения текущей публикации вы научитесь самостоятельно программировать простой калькулятор на JavaScript с кнопкой сброса. Я поделю свой рассказ на три части.

Вначале я опишу создание разметки калькулятора на html, далее расскажу, какие стилевые правила необходимо будет задать, а после перейду к объяснению функций на JavaScript. Давайте приступим!

Оформление гипертекстовой разметки

Изначально для приложения «Калькулятор» необходимо задать разметку элементов и сразу назначить обработчики событий. Для этого лучше всего использовать таблицу. Поскольку в коде будет множество инпутов, то потребуется и форма.

Поэтому создаем форму с именем «Calculation». В нее вписываем таблицу, которая будет содержать 5 строк и 5 столбцов. Первая строка табличного представления будет занята текстовым полем ввода. А далее разместим кнопки с цифрами, арифметическими операциями, знаком «равно», сбросом последнего введенного числа (CE) и полным сбросом ©.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<form name="Calculation" action="">
     <table class="Table" cellpadding="2" cellspacing="2">
     <tr>
         <td colspan=5 align=middle>
         	<input id="TextEdit" name="ReadOut" type="Text" size=28 value="0" width="250px">
         </td>
     </tr>
     <tr>
         <td><input name="btnSeven" type="Button" value="7" onclick="PressedNum(7)"></td>
         <td><input name="btnEight" type="Button" value="8" onclick="PressedNum(8)"></td>
         <td><input name="btnNine" type="Button" value="9" onclick="PressedNum(9)"></td>
          <td><input name="btnClear" type="Button" value="C" onclick="Clear()" /></td>
         <td><input name="btnClearEntry" type="Button" value="CE" onclick="ClearEntry()" /></td>
       </tr>
     <tr>
         <td><input name="btnFour" type="Button" value="4" onclick="PressedNum(4)"></td>
         <td><input name="btnFive" type="Button" value="5" onclick="PressedNum(5)"></td>
         <td><input name="btnSix" type="Button" value="6" onclick="PressedNum(6)"></td>
            <td><input name="btnPlus" type="Button" value="+" onclick="Operations('+')" /></td>
         <td><input name="btnMultiply" type="Button" value="*" onclick="Operations('*')" /></td>
     </tr>
     <tr>
         <td><input name="btnOne" type="Button" value="1" onclick="PressedNum(1)"></td>
         <td><input name="btnTwo" type="Button" value="2" onclick="PressedNum(2)"></td>
         <td><input name="btnThree" type="Button" value="3" onclick="PressedNum(3)"></td>
          <td><input name="btnMinus" type="Button" value="-" onclick="Operations('-')" /></td>
         <td ><input name="btnDivide" type="Button" value=" / " onclick="Operations('/')" /></td>
     </tr>
     <tr>
         <td><input name="btnZero" type="Button" value="0" onclick="PressedNum(0)"></td>
         <td colspan="2"><input id="WideBtn" name="btnEquals" type="Button" value="=" onclick="Operations('=')"></td>
       <td></td>
       <td></td>
     </tr>
     </table>
</form>

Превратим набор элементов во что-то стоящее

Для любого пользовательского приложения в первую очередь важен графический интерфейс. Поэтому нужно привести в порядок расположение клавиш и текстового поля, а также скомпоновать их так, чтобы они выглядели, как единое целое.

Итак, для начала оформим внешний вид самой таблицы. Я задал объемную рамку вокруг калькулятора, установил цвет фона, внешние отступы, ширину таблицы и вид размещения текста внутри нее.

1
2
3
4
5
6
7
8
	.Table {
   	  border: 3px inset gray;
   	  background: #E6E6FA;
   	  margin-left: 22%;
   	  margin-top: 12px;
   	  width: 270px;
   	  text-align: center;
   	}

Теперь красиво оформим кнопки.

1
2
3
4
5
6
  	.Table input {
   	  border: 2px solid gray;
   	  border-radius: 4px;
   	  width: 30px;
   	  margin: 4px;
   	}

Также у меня в коде есть особые поля. Это широкая кнопка для знака «равно» и само текстовое поле ввода. Для начала я опишу стили поля ввода, которому я задал идентификатор TextEdit.

          #TextEdit {

width: 255px;

height: 23px;

}

А теперь займемся редактированием широкой кнопки с идентификатором WideBtn.

          #WideBtn {

width: 93px;

}

Как видите, теперь разрабатываемый калькулятор выглядит достаточно привлекательно и аккуратно. Осталось прописать логику работы функций на JS.

Вперед! Работай!

Вот теперь пришло время разобрать самое увлекательное! Ниже я прикреплю программный код на JS и прокомментирую важные моменты.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script language="JavaScript">
var ThisCalc  = document.Calculation; //Определяю объект, с которым буду работать
var CurResult = 0; //хранит текущий численный результат
var IsNewNumFlag = false; //определяю вводится новое число или нет
var OperPending = "";// хранит текущее нажатое значение
 
//функция обрабатывает кнопки с цифрами
function PressedNum (Num) 
{
		if (IsNewNumFlag)//если ввод нового числа, т.е. первой его цифры
		{
			ThisCalc.ReadOut.value = Num;
			IsNewNumFlag = false;
		}	
		else {//если не новое
			if (ThisCalc.ReadOut.value == "0")//если был сброс и стоит 0
//то заменяем его на новую цифру
				ThisCalc.ReadOut.value = Num;
			Else
//иначе дописываем цифры
				ThisCalc.ReadOut.value += Num;
		}
}
 
//функция обрабатывает кнопки с арифметическими операциями
function Operations (Op) 
{
		var Readout = ThisCalc.ReadOut.value;
		if (IsNewNumFlag && OperPending != "=")
		{
			ThisCalc.ReadOut.value = CurResult;
		}
		else
		{
			IsNewNumFlag = true;
			if ( '+' == OperPending )
				CurResult += parseFloat(Readout);
			else if ( '-' == OperPending )
				CurResult -= parseFloat(Readout);
			else if ( '/' == OperPending )
				CurResult /= parseFloat(Readout);
			else if ( '*' == OperPending )
				CurResult *= parseFloat(Readout);
			else
				CurResult = parseFloat(Readout);
			ThisCalc.ReadOut.value = CurResult;
			OperPending = Op;
		}
}
 
 
// Очистка текущей цифры
function ClearEntry () 
{
		ThisCalc.ReadOut.value = "0";
		IsNewNumFlag = true;
}
 
// Сброс всех параметров калькулятора
function Clear () 
{
		Currents = 0;
		OperPending = "";
		ClearEntry();
}
</script>

Вот теперь программа готова. Буду очень рад, если вы подпишитесь на обновления моего обучающего блога и поделитесь ссылкой на него с коллегами и друзьями. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 2126 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Денис

    Руслан, JS воспринимает текстовое поле как то, что в него будет введён текст, а мы вводим цифры. Какая функция занимается этим переводом?

    03.01.2017 в 04:25
  • Денис

    У меня не работает. Куда вставлять программный код на JS? Я вписал его после формы. Вся программа оформлена в тег html.

    29.01.2017 в 05:35