javascript白色简洁计算器

本文中计算器代码很简单，你可以很容易把该网页特效应用到你的项目中。

HTML

首先我们在网页上放置一个输入框及多个计算器按钮。

<div id="calcuator">
  <input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly" />
  <div id="btn-list">
    <div onclick="operator('clear')" class=" btn-30 btn-radius color-red clear-marginleft">
      C</div>
    <div onclick="operator('opposite')" class=" btn-30 btn-radius color-blue">
      +/-</div>
    <div onclick="operator('percent')" class=" btn-30 btn-radius color-blue">
      %</div>
    <div onclick="operator('backspace')" class=" btn-70 btn-radius color-red font-14">
      ←</div>
    <div onclick="typetoinput('7')" class=" btn-30 btn-radius clear-marginleft">
      7</div>
    <div onclick="typetoinput('8')" class=" btn-30 btn-radius">
      8</div>
    <div onclick="typetoinput('9')" class=" btn-30 btn-radius">
      9</div>
    <div onclick="operator('plus')" class=" btn-30 btn-radius color-blue font-14">
      +</div>
    <div onclick="operator('minus')" class=" btn-30 btn-radius color-blue font-14">
      -</div>
    <div onclick="typetoinput('4')" class=" btn-30 btn-radius clear-marginleft">
      4</div>
    <div onclick="typetoinput('5')" class=" btn-30 btn-radius">
      5</div>
    <div onclick="typetoinput('6')" class=" btn-30 btn-radius">
      6</div>
    <div onclick="operator('multiply')" class=" btn-30 btn-radius color-blue font-14">
      ×</div>
    <div onclick="operator('divide')" class=" btn-30 btn-radius color-blue font-12">
      ÷</div>
    <div onclick="typetoinput('1')" class=" btn-30 btn-radius clear-marginleft">
      1</div>
    <div onclick="typetoinput('2')" class=" btn-30 btn-radius">
      2</div>
    <div onclick="typetoinput('3')" class=" btn-30 btn-radius">
      3</div>
    <div onclick="operator('pow')" class=" btn-30 btn-radius color-blue font-14">
      ײ</div>
    <div onclick="operator('sqrt')" class=" btn-30 btn-radius color-blue font-12">
      √</div>
    <div onclick="typetoinput('0')" class=" btn-70 btn-radius clear-marginleft">
      0</div>
    <div onclick="typetoinput('.')" class=" btn-30 btn-radius">
      .</div>
    <div onclick="operator('result')" class=" btn-70 btn-radius color-red font-14">
      =</div>
  </div>
</div>

js

根据操作类型作相应操作：

function operator(type) {
  switch (type) {
  case "clear":
    input.value = "0";
    _string.length = 0;
    /*document.getElementById("ccc").innerHTML="";
        for(i=0;i<_string.length;i++)
        {
          document.getElementById("ccc").innerHTML+=_string[i]+" "
        }*/
    break;
  case "backspace":
    if (checknum(input.value) != 0) {
      input.value = input.value.replace(/.$/, '');
      if (input.value == "") {
        input.value = "0";
      }
    }
    break;
  case "opposite":
    if (checknum(input.value) != 0) {
      input.value = -input.value;
    }
    break;
  case "percent":
    if (checknum(input.value) != 0) {
      input.value = input.value / 100;
    }
    break;
  case "pow":
    if (checknum(input.value) != 0) {
      input.value = Math.pow(input.value, 2);
    }
    break;
  case "sqrt":
    if (checknum(input.value) != 0) {
      input.value = Math.sqrt(input.value);
    }
    break;
  case "plus":
    if (checknum(input.value) != 0) {
      _string.push(input.value);
      _type = "plus"input.value = "+";
      input.name = "type";
    }
    break;
  case "minus":
    if (checknum(input.value) != 0) {
      _string.push(input.value);
      _type = "minus"input.value = "-";
      input.name = "type";
    }
    break;
  case "multiply":
    if (checknum(input.value) != 0) {
      _string.push(input.value);
      _type = "multiply"input.value = "×";
      input.name = "type";
    }
    break;
  case "divide":
    if (checknum(input.value) != 0) {
      _string.push(input.value);
      _type = "divide"input.value = "÷";
      input.name = "type";
    }
    break;
  case "result":
    if (checknum(input.value) != 0) {
      _string.push(input.value);
      if (parseInt(_string.length) % 2 != 0) {
        _string.push(_string[_string.length - 2])
      }
      if (_type == "plus") {
        input.value = parseFloat(result(_string)[0]) + parseFloat(result(_string)[1]);
        input.name = "type"
      } else if (_type == "minus") {
        input.value = parseFloat(result(_string)[0]) - parseFloat(result(_string)[1]);
        input.name = "type"
      } else if (_type == "multiply") {
        input.value = parseFloat(result(_string)[0]) * parseFloat(result(_string)[1]);
        input.name = "type"
      } else if (_type == "divide") {
        input.value = parseFloat(result(_string)[0]) / parseFloat(result(_string)[1]);
        input.name = "type"
      }
      break;
    } 

  }
}

以上所述就是本文的全部内容了，希望大家能够喜欢。