javascript白色简洁计算器

前端技术 2023/09/04 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; 
    } 
 
  } 
}

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

本文地址：https://www.stayed.cn/item/11728

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案