Получилось вот так вот. А как сделать , чтобы сохраняло историю и её потом можно было посмотреть?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Калькулятор</title>
<link rel='stylesheet' href='style.css' type='text/css'>
<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src='jquery-ui-1.10.4.custom.min.js'></script>
<script type='text/javascript' src='app.js'></script>
</head>
<body>
<div class="calc_app">
<div class="calc_header">
<div class="calc_title">Calculator</div>
<div class="calc_memory"></div>
<input type="text" class="calc_display" name="calc_display" disabled>
</div>
<div class="calc_body">
<div class="cifral_buttons">
<p>
<button>7</button>
<button>8</button>
<button>9</button>
</p>
<p>
<button>4</button>
<button>5</button>
<button>6</button>
</p>
<p>
<button>1</button>
<button>2</button>
<button>3</button>
</p>
<p>
<button>0</button>
<button class="width_2">.</button>
</p>
</div>
<div class="operation_buttons">
<button>/</button>
<button>*</button>
<button>-</button>
<button>+</button>
</div>
<div class="operation_function">
<button class="calc_reset_btn">C</button>
<button class="width_3 calc_equal_btn">=</button>
</div>
<dib class="memory_functions">
<button class="memory_btn_set">MS</button>
<button class="memory_btn_get">MR</button>
<button class="memory_btn_clear">MC</button>
</dib>
</div>
<div class="calc_footer"></div>
</div>
</body>
</html>
/**
* Объявление в общем глобальной видимости
* переменной нашего приложения
* @type {calc|*|{}}
*/
var calc = calc || {};
/**
* Изолируем jQuery
*/
(function($){
/**
* Выполнение скрипта по событию OnDOMReady
*/
$(document).ready(function(){
/**
* Описание нашего объекта
* @type {{init: init, setDisplay: setDisplay, clearDisplay: clearDisplay, checkDisplay: checkDisplay, addDisplay: addDisplay}}
*/
calc = {
init : function() {
/**
* Устанавливаем глобальную переменную
* нашего основного объекта
* @type {calc}
*/
var $t = this;
this.calc = $('.calc_app');
/**
* Обозначаем переменную в нашем приложении
* для дисплея калькулятор
* @type {*|HTMLElement}
*/
this.disaplay = $('.calc_display');
/**
* Определяем временную переменную для "памяти"
* @type {undefined}
*/
this.memory = undefined;
/**
* Устанавливаем по умолчанию значение равное нулю
*/
this.clearDisplay();
/**
* Делаем наш калькулятор "перемещаемый"
*/
this.calc.draggable();
/**
* Биндим кнопки [0-9] + Кнопки операций
*/
$('.cifral_buttons button, .operation_buttons button').click(function(e){
$t.checkDisplay();
$t.addDisplay( $(this).html() );
});
/**
* Биндим кнопку
*/
$('.calc_reset_btn').click(function(){
$t.clearDisplay();
});
/**
* Работаем с "памятью"
*/
$('.memory_functions button').click(function(){
/**
* Отрабатываем нажатия кнопок
* http://javascript.ru/switch
*/
switch ( $(this).html() ) {
case 'MR':
if($t.memory != '' || $t.memory == undefined)
$t.disaplay.val( $t.memory );
break;
case 'MS':
$t.memory = $t.disaplay.val()
break;
case 'MC':
$t.memory = '';
break;
default :
break;
}
/**
* Восстанавливаем знаение из "памяти"
*/
$('.calc_memory').html($t.memory);
});
/**
* Биндим кнопку [=]
*/
$('.calc_equal_btn').click(function(){
/**
* Производим вычисления при помощи js.eval()
* http://javascript.ru/eval
* @type {Object}
*/
var equal = eval($t.disaplay.val());
/**
* Проверки на ошибки вычисления
*/
if(equal == NaN ) {
$t.isError = true;
$t.setDisplay('Ошибка');
return;
}
if(equal == Infinity) {
$t.isError = true;
$t.setDisplay('Деление на ноль');
return;
}
$t.setDisplay( equal );
});
},
/**
* Установка определенного значения на дисплее
* @param val
*/
setDisplay: function(val) {
this.disaplay.val(val);
},
/**
* Очистка дисплея
*/
clearDisplay: function() {
this.setDisplay(0);
},
/**
* Проверка дисплея, на отображение ошибки
*/
checkDisplay: function() {
/**
* Если ошибка на дисплее
* - сбрасываем ошибку с дисплея
* - обнуляем данные о присутствии ошибки
*/
if (this.isError == true) {
this.clearDisplay();
this.isError = false;
}
},
/**
* Добавление на дисплей калькулятора
* @param digit
*/
addDisplay: function(digit) {
/**
* Удаление нуля на дисплее
*/
if(this.disaplay.val() == 0)
this.disaplay.val('');
/**
* Добавляем значение к уже существующему
* значению на нашем дисплее
*/
this.disaplay.val( this.disaplay.val() + digit);
}
}
/**
* Инициализируем приложение
*/
calc.init();
});
})(jQuery)
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.calc_app {
background: #dae5f2;
border: solid 6px #8dc8fb;
position: relative;
margin: 5px;
float: left;
-webkit-box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.75);
}
.calc_title {
cursor: pointer;
background: #8dc8fb url('icon.png') no-repeat 2px 50%;
padding: 2px 10px;
text-indent: 12px;
font-size: 14px;
line-height: 24px;
}
.calc_body {
width: 145px;
}
.calc_body > * {
margin: 0;
padding: 0;
}
.cifral_buttons {
float: left;
}
.cifral_buttons p {
margin: 0;
padding: 0;
}
button {
margin: 2px;
height: 30px;
width: 30px;
text-align: center;
}
button, .calc_display {
line-height: 30px;
font-size: 14px;
border: solid 1px #8797aa;
color: #1e395b;
text-shadow: 1px 1px 0px rgba(150, 150, 175, 0.36);
background: #f0f6fb; /* Old browsers */
background: -moz-linear-gradient(top, #f0f6fb 1%, #d7e2ef 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f0f6fb), color-stop(100%,#d7e2ef)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0f6fb 1%,#d7e2ef 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0f6fb 1%,#d7e2ef 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f0f6fb 1%,#d7e2ef 100%); /* IE10+ */
background: linear-gradient(to bottom, #f0f6fb 1%,#d7e2ef 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f6fb', endColorstr='#d7e2ef',GradientType=0 ); /* IE6-9 */
}
button.width_2 {
width: 65px;
}
button.width_3 {
width: 102px;
}
.operation_buttons {
float: left;
width: 34px;
}
.operation_buttons button {
float: left;
}
.calc_display {
text-align: right;
width: 118px;
margin: 2px;
padding: 0 10px;
}
