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

Калькулятор IOS 8 для сайта на JS + CSS

Калькулятор IOS 8 для сайта на JS + CSS
Здесь представлен веб-калькулятор, что идет в стильном виде, где переменяется прозрачность элементов, который отлично впишется под разный дизайн. Плюс в том, что нам не нужно подключать разные библиотеки, где все функция расчета выполняет JS, а стилистика CSS отвечает за оформление, ведь вы самостоятельно можете что-то добавить, но вообще подогнать под основной стиль ресурса. Здесь представлен веб-калькулятор, что идет в стильном виде, где переменяется прозрачность элементов, который отлично впишется под разный дизайн.

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

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

При открытие сайта или страницы:

Прозрачный калькулятор IOS на JS + CSS

Установка:

HTML

Код
<div id="adding_machine">
  <div class="calculating">
  <span class="akopasned">C</span>
  <div class="udesanag"></div>
  </div>
   
  <div class="poviden">
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span class="lodebas">+</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span class="lodebas">-</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span class="lodebas">÷</span>
  <span>0</span>
  <span>.</span>
  <span class="amipod">=</span>
  <span class="lodebas">x</span>
  </div>
</div>

CSS

Код
#adding_machine {
  width: 330px;
  height: auto;
  overflow: hidden;
  margin: 100px auto;
  padding: 22px 22px 10px;
  position: relative;
  background: rgb(47 47 47 / 40%);
  border-radius: 3px;
  box-shadow: 0px 9px 10px 0px rgb(27 27 27 / 47%);
}

.calculating span.akopasned {
  position:absolute;
  z-index:6;
   
}

.calculating .udesanag {
  height: 82px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 22px 12px;
  background: rgb(19 19 19 / 23%);
  font-size: 30px;
  font-weight: normal;
  line-height: 39px;
  color: #f7f6f6;
  text-shadow: 1px 1px 2px rgb(23 22 22 / 29%);
  text-align: right;
  letter-spacing: 1px;
}

.poviden, .calculating {overflow: hidden;}

.poviden span, .calculating span.akopasned {
  float: left;
  position: relative;
  top: 0;
  cursor: pointer;
  width: 66px;
  height: 56px;
  background: rgb(18 18 18 / 50%);
  border-radius: 3px;
  box-shadow: 0px 4px rgb(12 12 12 / 20%);
  margin: 0 7px 11px 0;
  color: #bbb5b5;
  line-height: 56px;
  text-align: center;
  user-select: none;
  transition: all 0.2s ease;
}

.poviden span.lodebas {
  background: rgb(10 125 125 / 64%);
  margin-right: 0;
}

.poviden span.amipod {
  color: #7a8056;
}

.calculating span.akopasned {
  background: rgb(31 31 31 / 0%);
  box-shadow: none;
  color: #bdb7b7;
  width: 60px;
  left: 5px;
  /* padding: 0px 8px 10px 8px; */
  line-height: 59px;
}

.poviden span:hover {
  background: rgb(230 230 230 / 80%);
  color: #1f1d1d;
}

.poviden span.amipod:hover {
  background: #a6b157;
  color: #f7f3f3;
}

.calculating span.akopasned:hover {
  border-radius: 190px;
  background: rgb(27 26 26 / 10%);
  color: #f9f5f5;
}

.poviden span:active {
  box-shadow: 0px 0px rgba(0, 0, 0, 0.2);
  top: 4px;
}

.poviden span.amipod:active {
  box-shadow: 0px 0px #717a33;
  top: 4px;
}

.calculating span.akopasned:active {
  top: 4px;
  box-shadow: 0px 0px #d3545d;
}

JS

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

for(var i = 0; i < keys.length; i++) {
  keys[i].onclick = function(e) {
   
  var input = document.querySelector('.udesanag');
  var inputVal = input.innerHTML;
  var btnVal = this.innerHTML;
  var total;
  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)
  {
  total = eval(equation);
  if(total.toString().indexOf('.') != -1)
  total= total.toFixed(2);
   
  input.innerHTML = total;
  }
   
  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-08-12 Загрузок: 1 Просмотров: 350 Комментарий: (0)

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

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

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

Комментарий: 0
avatar