ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Онлайн калькулятор при помощи CSS + JS

Онлайн калькулятор при помощи CSS + JS

Онлайн калькулятор при помощи CSS + JS
Иногда на сайте требуется калькулятор онлайн, где вашему вниманию отличное решение на вычислительный гаджет, что создана при помощи javascript. Не скажу, что он простой, где идет отличный дизайн, что можно самостоятельно выстроить под различный стиль шаблона. Также на нем поставлены градиенты, что безусловно придает вид самому корпусу и кнопкам. Но по кнопкам отдельно, они созданы в реальности, где вы наводите и получаете эффект, а также при кликах сами кнопки красивый вид показывают.

А так безусловно простой и очень удобный по работе калькулятор, который работает в режиме онлайн красивый, что легко сможете добавить на свой сайт. Есть очень много тем, как интернет магазины и другие сайты, где предлагают различные услуги. И здесь без вычислительной машинки не как нельзя, что будет отличным приложение под раздел, где вы с полки набираете товар и сразу ведете подсчет. Где все проверено по работе, что и вы сможете посмотреть на demo странице, что находится ниже.

Так выглядит по умолчанию, где немного темных красок добавил:

Простой калькулятор на HTML + CSS + JavaScript

Установка:

HTML

Код
<div id="calculator">
  <div class="kasnedos">
  <span class="clear">C</span>
  <div class="screen"></div>
  </div>
   
  <div class="calcuka-suslatom">
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span class="operator">+</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span class="operator">-</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span class="operator">÷</span>
  <span>0</span>
  <span>.</span>
  <span class="eval">=</span>
  <span class="operator">x</span>
  </div>
</div>

CSS

Код
html {
  height: 100%;
  background: white;
  background: radial-gradient(circle, #fff 20%, #ccc);
  background-size: cover;
}

#calculator {
  width: 321px;
  height: auto;
  margin: 100px auto;
  padding: 18px 18px 10px;
  background: #4c9fc5;
  background: linear-gradient(#9adfff, #326f8a);
  border-radius: 2px;
  box-shadow: 0px 4px #10506d, 0px 10px 15px rgba(86, 86, 86, 0.2);
}

.kasnedos span.clear {
  float: left;
}

.kasnedos .screen {
  height: 38px;
  width: 209px;
  float: right;
  padding: 0 8px;
  background: rgba(21, 21, 21, 0.33);
  border-radius: 3px;
  box-shadow: inset 0px 4px rgba(62, 62, 62, 0.2);
  font-size: 17px;
  line-height: 40px;
  color: #f7f7f7;
  text-shadow: 1px 1px 2px rgba(23, 23, 23, 0.2);
  text-align: right;
  letter-spacing: 1px;
}

.calcuka-suslatom, .kasnedos {overflow: hidden;}

.calcuka-suslatom span, .kasnedos span.clear {
  float: left;
  position: relative;
  top: 4px;
  cursor: pointer;
  width: 65px;
  height: 35px;
  background: #f9f9f9;
  border-radius: 3px;
  box-shadow: 0px 4px rgba(37, 37, 37, 0.35);
  margin: 0 7px 11px 0;
  color: #827f7f;
  line-height: 35px;
  text-align: center;
  user-select: none;
  transition: all 0.2s ease;
}

.calcuka-suslatom span.operator {
  background: #FFF0F5;
  margin-right: 0;
}

.calcuka-suslatom span:hover {
  background: #907fe0;
  box-shadow: 0px 4px #6142b1;
  color: #f9f9f9;
}

.kasnedos span.clear {
  background: #ff9fa8;
  box-shadow: 0px 4px #ff7c87;
  color: #f7f5f5;
}

.calcuka-suslatom span:hover {
  background: #9c89f6;
  box-shadow: 0px 4px #6b54d3;
  color: #f7f5f5;
}

.calcuka-suslatom span.eval:hover {
  background: #abb850;
  box-shadow: 0px 4px #717a33;
  color: #ffffff;
}

.kasnedos span.clear:hover {
  background: #f68991;
  box-shadow: 0px 4px #d3545d;
  color: #f7f5f5;
}

.calcuka-suslatom span:active {
  box-shadow: 0px 0px #6552bb;
  top: 4px;
}

.calcuka-suslatom span.eval:active {
  box-shadow: 0px 0px #6d772a;
  kasnedos: 4px;
}

.kasnedos span.clear:active {
  kasnedos: 4px;
  box-shadow: 0px 0px #f120cd;
}

JS

Код
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;

for(var i = 0; i < keys.length; i++) {
  keys[i].onclick = function(e) {
  // Get the input and button values
  var input = document.querySelector('.screen');
  var inputVal = input.innerHTML;
  var btnVal = this.innerHTML;
   
  if(btnVal == 'C') {
  input.innerHTML = '';
  decimalAdded = false;
  }
   

  else if(btnVal == '=') {
  var equation = inputVal;
  var lastChar = equation[equation.length - 1];
   
  equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
   
  if(operators.indexOf(lastChar) > -1 || lastChar == '.')
  equation = equation.replace(/.$/, '');
   
  if(equation)
  input.innerHTML = eval(equation);
   
  decimalAdded = false;
  }

  else if(operators.indexOf(btnVal) > -1) {

  var lastChar = inputVal[inputVal.length - 1];

  if(inputVal != '' && operators.indexOf(lastChar) == -1)  
  input.innerHTML += btnVal;
   
  else if(inputVal == '' && btnVal == '-')  
  input.innerHTML += btnVal;
   
  if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {

  input.innerHTML = inputVal.replace(/.$/, btnVal);
  }
   
  decimalAdded =false;
  }
   
  else if(btnVal == '.') {
  if(!decimalAdded) {
  input.innerHTML += btnVal;
  decimalAdded = true;
  }
  }
   
  else {
  input.innerHTML += btnVal;
  }
   
  e.preventDefault();
  }  
}

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

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

Демонстрация
2020-02-21 Загрузок: 1 Просмотров: 356 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 5
Kosten
Kosten 2020-02-21 22:451
0
При установки был закреплен файл, но почему то он битый оказался, но убрав его все отлично работает, не знаете для чего он вообще предназначен, так как сайта по ссылки не существует, и как понял он же был источником.

Подключаем в HEAD

Код
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
Webmaster32
Webmaster32 2020-02-21 23:512
0
Скрипт, позволяющий использовать везде без префикса свойства CSS. Он работает за кулисами, добавляя префикс текущего браузера в любой код CSS, только когда это необходимо.
Рабочий файл:
Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js" type="text/javascript" type="text/javascript"></script>
Kosten
Kosten 2020-02-22 00:283
0
Вот не знаю, добавлять к материалу его, ведь без него на демо странице можно посмотреть, что все корректно работает.
PickleAdmiraL
PickleAdmiraL 2020-05-02 15:134
0
Не понимаю как на в скрипте сделать ограничение на деление на ноль. Чтобы при попытке поделить на ноль он выдавал сообщение недопустимая операция?
Kosten
Kosten 2020-05-02 19:425
0
Сам только заметил, что на ноль не делиться, но также думаю, а для чего все на ноль делить. Это как только в 90 тых говорили, что я тебя на ноль поделю, просто считаю это деление не нужным.
avatar