Веб-мастерская Ларисы ВоронинойСтильный кнопочный html калькулятор.
WEB-мастерская Ларисы Ворониной logo

Стильный кнопочный html калькулятор. Дек 7 2016


Иногда на своём сайте хочется, а иногда даже требуется разместить обычный кнопочный html калькулятор. В этой статье я покажу как создать обычный стильный кнопочный  калькулятор с помощью HTML, CSS и JavaScript.

Создаём два файла: index.html и style.css.

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

В коде файла index.html наш калькулятор будет выглядеть в виде таблицы, заключённой в форму. В качестве значения атрибута OnClick тегов input будет прописан код JavaScript, который делает html калькулятор рабочим.

<!DOCTYPE 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 калькулятора.

body {
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 калькулятор:

Конечно это - не инженерный калькулятор, но для расчёта простых арифметических действий вполне удобен.


Рейтинг@Mail.ru