<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset=utf-8"/>
<title>Calculator</title>
<link href = "css/style.css" type = "text/css" rel = "stylesheet"/>
<script src = "https://code.jquery.com/jquery-2.1.0.js"></script> <!--Подключили библиотеку jQuery-->
</head>
<body>
<div id = "case">
<div id = "screen"><p id = "display"></p></div>
<div id = "buttons">
<ul class = "row-first">
<li><input id = 'reset' type = 'submit' value = 'R'/></li>
</ul>
<ul class = "row">
<li><input class = 'btn' type = 'submit' value = '1'/></li>
<li><input class = 'btn' type = 'submit' value = '2'/></li>
<li><input class = 'btn' type = 'submit' value = '3'/></li>
<li><input class = 'btn' type = 'submit' value = '+'/></li>
</ul>
<ul class = "row">
<li><input class = 'btn' type = 'submit' value = '4'/></li>
<li><input class = 'btn' type = 'submit' value = '5'/></li>
<li><input class = 'btn' type = 'submit' value = '6'/></li>
<li><input class = 'btn' type = 'submit' value = '-'/></li>
</ul>
<ul class = "row">
<li><input class = 'btn' type = 'submit' value = '7'/></li>
<li><input class = 'btn' type = 'submit' value = '8'/></li>
<li><input class = 'btn' type = 'submit' value = '9'/></li>
<li><input class = 'btn' type = 'submit' value = '*'/></li>
</ul>
<ul class = "row">
<li><input class = 'btn' type = 'submit' value = '0'/></li>
<li><input class = 'btn' type = 'submit' value = '.'/></li>
<li><input class = 'btn' type = 'submit' value = '='/></li>
<li><input class = 'btn' type = 'submit' value = '/'/></li>
</ul>
</div>
</div>
</body>
<script>
//Объявление переменных
var display = $('#display');
var str = '';
var btns = document.getElementsByClassName('btn');
//Сброс
$('#reset').click( function() {
str = '';
display.text(str);
});
//Пробегаюсь по всем кнопкам
for (let i = 0; i < btns.length; i++) {
show_number(btns[i]);
}
//Вывожу числа на экран
function show_number(button) {
$(button).click(function() {
var value = this.getAttribute('value');
str += value;
//Чтобы число не превышало разрядность
if (str.length > 8) {
return 1;
}
display.text(str);
//При нажатии на равно происходит магия, а потом на дисплей выводится результат
if (value === '=') {
var slice_str = str.slice(0, str.length - 1);
check_operation(slice_str);
display.text(add);
}
});
}
//Определяем с какой операцией будет работa
function check_operation(line) {
var split = line.split('');
for (let i = 0; i < split.length; i++) {
switch (split[i]) {
case '+' :
var plus = line.split('+');
add(plus);
break;
case '-' :
var minus = line.split('-');
deduct(minus);
break;
case '*' :
var star = line.split('*');
mult(star);
break;
case '/' :
var fraction = line.split('/');
divide(fraction);
break;
}
}
}
function add(expr) {
var sum = parseFloat(expr[0]) + parseFloat(expr[1]);
alert(sum); //Для отдалки
//Неужели правда NaN?
/*if (!isNaN(sum)) {
return sum;
} else {
alert(sum);
}*/
//return sum;
}
function deduct(expr) {
var ded = parseFloat(expr[0]) - parseFloat(expr[1]);
alert(ded);
}
function mult(expr) {
var mul = parseFloat(expr[0]) * parseFloat(expr[1]);
alert(mul);
}
function divide(expr) {
var div = parseFloat(expr[0]) / parseFloat(expr[1]);
alert(div);
}
</script>
</html>
__________
Вот css "style":
__________
@import url(reset.css);
#case {
width: 350px;
height: 465px;
background: #D3D3D3;
border: 1px solid #778899;
margin: 20px auto;
border-radius: 20px;
}
#screen {
width: 300px;
height: 100px;
background: #A9A9A9;
margin: 25px 25px 0 25px;
border: 1px solid #778899;
border-radius: 5px;
}
#buttons {
width: 300px;
height: 290px;
margin: 25px;
overflow: hidden;
background: #C0C0C0;
border-radius: 10px;
}
.row, .row-first {
overflow: hidden;
}
.row li, .row-first li{
float: left;
margin-top: 15px;
margin-left: 11px;
}
.row li input[type = 'submit'], .row-first input[type = 'submit']{
width: 60px;
height: 40px;
font-size: 16px;
font-weight: bold;
font-family: Arial, Verdana, sans-serif;
border-radius: 10px;
background: #F5F5DC;
}
.row-first #reset {
background: #FF6347;
border-radius: 30px;
}
#display {
font-family: Arial, Verdana, sans-serif;
font-size: 60px;
float: right;
margin: 18px 18px 0 0;
display: block;
}
____________
Вот css "reset"
____________
/*
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
