Вам потребуется только описать логику реакции на действия пользователя, например, на клик мышкой. Благо делается это довольно просто при помощи html атрибутов.
Логика работы довольно простая, при клике на теге с атрибутом data-type к выражению должен добавиться очередной символ, для этого есть метод toGlue, а при клике на теге с атрибутом data-action должно произойти действие название которого указанно атрибуте. Итого у нас есть четыре экшина:
var display = document.getElementById("calc_display"),
calc = document.getElementById("calc");
calc.addEventListener('click', function (e) {
e.preventDefault();
var type = e.target.getAttribute("data-type");
if ( type )
display.innerHTML = self.toGlue(e.target.innerHTML, type);
if e.target.getAttribute("data-action")
display.innerHTML = self.expression = self[e.target.getAttribute("data-action")](self.expression)
false
)
});
До того как закончить с кодом нужно позаботится об html. Предлагаю генерировать html прямо в коде вот таким образом.
var Calc_template = ''
+'<div id="calc_area">'
+'<div id="calc_display"></div>'
+'<div class="calc_backspace calc_button" data-action="deleteLastChar">←</div>'
+'<div class="calc_deleteChars calc_button" data-action="deleteChars">Del</div>'
+'<div class="calc_changeSign calc_button" data-action="changeSign">±</div>'
+'<div class="calc_bracketOpen calc_button" data-type="bracketOpen">(</div>'
+'<div class="calc_bracketClose calc_button" data-type="bracketClose">)</div>'
+'<div class="calc_divide calc_button" data-type="operator">/</div>'
+'<div class="calc_multiply calc_button" data-type="operator">*</div>'
+'<div class="calc_subtract calc_button" data-type="operator">-</div>'
+'<div class="calc_add calc_button" data-type="operator">+</div>'
+'<div class="calc_calculate calc_button" data-action="calculate">=</div>'
+'<div class="calc_comma calc_button" data-type="comma">.</div>'
+'<div class="calc_null calc_button" data-type="number">0</div>'
+'<div class="calc_one calc_button" data-type="number">1</div>'
+'<div class="calc_two calc_button" data-type="number">2</div>'
+'<div class="calc_three calc_button" data-type="number">3</div>'
+'<div class="calc_four calc_button" data-type="number">4</div>'
+'<div class="calc_five calc_button" data-type="number">5</div>'
+'<div class="calc_six calc_button" data-type="number">6</div>'
+'<div class="calc_seven calc_button" data-type="number">7</div>'
+'<div class="calc_eight calc_button" data-type="number">8</div>'
+'<div class="calc_nine calc_button" data-type="number">9</div>'
+'</div>';
Остается создать свой класс калькулятора который будет наследовать от CalculatorJS. Для удобства используем CoffeeScript.
class My_calc extends Calculator
constructor: (@options)->
self = this
@expression = @options.expression || ""
@lastCharType = @options.lastCharType || ""
calc = document.createElement("DIV")
calc.id = "calculator"
calc.innerHTML = Calc_template
document.body.appendChild(calc)
display = document.getElementById("calc_display")
calc.addEventListener('click', (e)->
e.preventDefault()
type = e.target.getAttribute("data-type")
if !!type
display.innerHTML = self.toGlue(e.target.innerHTML, type)
if e.target.getAttribute("data-action")
display.innerHTML = self.expression = self[e.target.getAttribute("data-action")](self.expression)
false
)
Вот и все! Каких-то 20 строчек кода и вы можете создавать сколько угодно калькуляторов на странице простым вызовом new My_calc.
Весь выше описанный код можно посмотреть тут. Там есть еще кусочек отвечающий за анимацию, но не обращайте на него внимания.
Весь код примера компилированный и собранный можно посмотреть тут.
Скачать к себе и поклацать в браузере нажмите тут.
CalculatorJS
Логика работы довольно простая, при клике на теге с атрибутом data-type к выражению должен добавиться очередной символ, для этого есть метод toGlue, а при клике на теге с атрибутом data-action должно произойти действие название которого указанно атрибуте. Итого у нас есть четыре экшина:
- Посчитать выражение calculate;
- Изменить знак changeSign
- Удалить последний символ deleteLastChar
- Удалить выражение deleteChars
var display = document.getElementById("calc_display"),
calc = document.getElementById("calc");
calc.addEventListener('click', function (e) {
e.preventDefault();
var type = e.target.getAttribute("data-type");
if ( type )
display.innerHTML = self.toGlue(e.target.innerHTML, type);
if e.target.getAttribute("data-action")
display.innerHTML = self.expression = self[e.target.getAttribute("data-action")](self.expression)
false
)
});
До того как закончить с кодом нужно позаботится об html. Предлагаю генерировать html прямо в коде вот таким образом.
var Calc_template = ''
+'<div id="calc_area">'
+'<div id="calc_display"></div>'
+'<div class="calc_backspace calc_button" data-action="deleteLastChar">←</div>'
+'<div class="calc_deleteChars calc_button" data-action="deleteChars">Del</div>'
+'<div class="calc_changeSign calc_button" data-action="changeSign">±</div>'
+'<div class="calc_bracketOpen calc_button" data-type="bracketOpen">(</div>'
+'<div class="calc_bracketClose calc_button" data-type="bracketClose">)</div>'
+'<div class="calc_divide calc_button" data-type="operator">/</div>'
+'<div class="calc_multiply calc_button" data-type="operator">*</div>'
+'<div class="calc_subtract calc_button" data-type="operator">-</div>'
+'<div class="calc_add calc_button" data-type="operator">+</div>'
+'<div class="calc_calculate calc_button" data-action="calculate">=</div>'
+'<div class="calc_comma calc_button" data-type="comma">.</div>'
+'<div class="calc_null calc_button" data-type="number">0</div>'
+'<div class="calc_one calc_button" data-type="number">1</div>'
+'<div class="calc_two calc_button" data-type="number">2</div>'
+'<div class="calc_three calc_button" data-type="number">3</div>'
+'<div class="calc_four calc_button" data-type="number">4</div>'
+'<div class="calc_five calc_button" data-type="number">5</div>'
+'<div class="calc_six calc_button" data-type="number">6</div>'
+'<div class="calc_seven calc_button" data-type="number">7</div>'
+'<div class="calc_eight calc_button" data-type="number">8</div>'
+'<div class="calc_nine calc_button" data-type="number">9</div>'
+'</div>';
Остается создать свой класс калькулятора который будет наследовать от CalculatorJS. Для удобства используем CoffeeScript.
class My_calc extends Calculator
constructor: (@options)->
self = this
@expression = @options.expression || ""
@lastCharType = @options.lastCharType || ""
calc = document.createElement("DIV")
calc.id = "calculator"
calc.innerHTML = Calc_template
document.body.appendChild(calc)
display = document.getElementById("calc_display")
calc.addEventListener('click', (e)->
e.preventDefault()
type = e.target.getAttribute("data-type")
if !!type
display.innerHTML = self.toGlue(e.target.innerHTML, type)
if e.target.getAttribute("data-action")
display.innerHTML = self.expression = self[e.target.getAttribute("data-action")](self.expression)
false
)
Вот и все! Каких-то 20 строчек кода и вы можете создавать сколько угодно калькуляторов на странице простым вызовом new My_calc.
Весь выше описанный код можно посмотреть тут. Там есть еще кусочек отвечающий за анимацию, но не обращайте на него внимания.
Весь код примера компилированный и собранный можно посмотреть тут.
Скачать к себе и поклацать в браузере нажмите тут.