Иногда на своём сайте хочется, а иногда даже требуется разместить обычный кнопочный html калькулятор. В этой статье я покажу как создать обычный стильный кнопочный калькулятор с помощью HTML, CSS и JavaScript.
Создаём два файла: index.html и style.css.
Также я создала два фоновых рисунка, один для фона панели калькулятора, другой для фона кнопок. Вы можете этого не делать, а просто обозначить цвет фона панели и кнопок.
В коде файла index.html наш калькулятор будет выглядеть в виде таблицы, заключённой в форму. В качестве значения атрибута OnClick тегов input будет прописан код JavaScript, который делает html калькулятор рабочим.
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>HTML калькулятор</title>
</head>
<body>
<form name="calc" class="wrapper">
<table class="main">
<tr class="display">
<td colspan="4"><input type="text" name="input"></td>
</tr>
<tr class="buttons">
<td><input type="button" value="1" OnClick="calc.input.value += '1'"></td>
<td><input type="button" value="2" OnClick="calc.input.value += '2'"></td>
<td><input type="button" value="3" OnClick="calc.input.value += '3'"></td>
<td><input type="button" value="+" OnClick="calc.input.value += '+'"></td>
</tr>
<tr class="buttons">
<td><input type="button" value="4" OnClick="calc.input.value += '4'"></td>
<td><input type="button" value="5" OnClick="calc.input.value += '5'"></td>
<td><input type="button" value="6" OnClick="calc.input.value += '6'"></td>
<td><input type="button" value="-" OnClick="calc.input.value += '-'"></td>
</tr>
<tr class="buttons">
<td><input type="button" value="7" OnClick="calc.input.value += '7'"></td>
<td><input type="button" value="8" OnClick="calc.input.value += '8'"></td>
<td><input type="button" value="9" OnClick="calc.input.value += '9'"></td>
<td><input type="button" value="x" OnClick="calc.input.value += '*'"></td>
</tr>
<tr class="buttons">
<td><input type="reset" value="c" OnClick="calc.input.value = ''"></td>
<td><input type="button" value="0" OnClick="calc.input.value += '0'"></td>
<td><input type="button" value="=" OnClick="calc.input.value = eval(calc.input.value)"></td>
<td><input type="button" value="/" OnClick="calc.input.value += '/'"></td>
</tr>
<table>
</form>
</body>
</html>
В файле style.css пишем стили для html калькулятора.
background: #858585;
}
.wrapper {
margin: 0 auto;
overflow: hidden;
width: 250px;
height: 270px;
background: url(fon.jpg);
border-radius: 10px;
border: 1px solid #949493;
box-shadow: 3px 3px 7px #000;
}
.main {
margin: 0 auto ;
margin-top: 5px;
width: 220px;
}
.display input {
background: #ccc;
margin: 0 auto;
overflow: hidden;
width: 207px;
height: 30px;
border-radius: 5px;
font-size: 24px;
}
.buttons input {
background: url(button.jpg);
margin: 0 auto;
overflow: hidden;
width: 50px;
height: 50px;
border-radius: 5px;
font-size: 24px;
}
В итоге должен получиться вот такой стильный кнопочный html калькулятор:
Конечно это - не инженерный калькулятор, но для расчёта простых арифметических действий вполне удобен.
Скачать исходники.