JavaScript简易计算器

随笔 2015-12-14

虽说是简易计算器,但是实现了计算器的大部分功能。 代码实现了页面与脚本的分离

1.png

cal.html

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>JavaScript 计算器</title>
    <script type="text/javascript" src="cal.js"></script>
  </head>
  <body>

  <hr />
  <h1>JavaScript 计算器</h1>
  <hr />

  <form id="calculator" action="">
    <p><input type="text" name="box" value="0" id="result"/></p>

    <p>
    <input type="button" value="Backspace" id="backspace" />
    <input type="button" value="CE" id="CE" />
    <input type="button" value="C" id="C" /></p>

    <p>
    <input type="button" value=" 7 " id="num7" />
    <input type="button" value=" 8 " id="num8" />
    <input type="button" value=" 9 " id="num9" /><br/>

    <input type="button" value=" 4 " id="num4" />
    <input type="button" value=" 5 " id="num5" />
    <input type="button" value=" 6 " id="num6" /><br />

    <input type="button" value=" 1 " id="num1" />
    <input type="button" value=" 2 " id="num2" />
    <input type="button" value=" 3 " id="num3" /><br />

    <input type="button" value=" 0 " id="num0" />
    <input type="button" value="+/-" id="sign" />
    <input type="button" value=" . " id="point" /></p>

    <p>
    <input type="button" value=" + " id="add" />
    <input type="button" value=" - " id="sub" />
    <input type="button" value=" * " id="mul" />
    <input type="button" value=" / " id="div" /><br />

    <input type="button" value=" % " id="mod" />
    <input type="button" value="sqrt" id="sqrt" />
    <input type="button" value="1/x" id="recip" />

    <input type="button" value=" = " id="calculate" /></p>

  </form>
  <hr />

</body>
</html>

cal.js

  var CalRslt=0;
  var opertr;

  function Calc()
  {
    if(opertr=="+"){
      CalRslt=CalRslt+eval(document.getElementById("result").value);}
    else if(opertr=="-"){
      CalRslt=CalRslt-eval(document.getElementById("result").value);}
    else if(opertr=="*"){
      CalRslt=CalRslt*eval(document.getElementById("result").value);}
    else if(opertr=="/"){
      CalRslt=CalRslt/eval(document.getElementById("result").value);}
     else if(opertr=="%"){
      CalRslt=CalRslt%eval(document.getElementById("result").value);}
     else if(opertr=="$"){
      CalRslt=1/eval(document.getElementById("result").value);
      document.getElementById("result").value=CalRslt;}
    else if(opertr=="s"){
      CalRslt=CalRslt*CalRslt;
      document.getElementById("result").value=CalRslt;}
    else
      CalRslt=eval(document.getElementById("result").value);
  }

  function dispCal(t)
  {
   if(t=="="){
    Calc();
    document.getElementById("result").value=CalRslt;
    opertr="";}
   else if(t=="+"){
    Calc();
    document.getElementById("result").value="";
    opertr="+";}
   else if(t=="-"){
    Calc();
    document.getElementById("result").value="";
    opertr="-";}
   else if(t=="*"){
    Calc();
    document.getElementById("result").value="";
    opertr="*";}
   else if(t=="/"){
    Calc();
    document.getElementById("result").value="";
    opertr="/";}
    else if(t=="%"){
    Calc();
    document.getElementById("result").value="";
    opertr="%";}
    else if(t=="$"){
    Calc();
    opertr="$";
    Calc();
    opertr="="}
   else if(t=="s"){
    Calc();
    opertr="s";
    Calc();
    opertr="="}
   else
    document.getElementById("result").value=document.getElementById("result").value+t;
  }

 function init(){

    num0 = document.getElementById("num0");
    num1 = document.getElementById("num1");
    num2 = document.getElementById("num2");
    num3 = document.getElementById("num3");
    num4 = document.getElementById("num4");
    num5 = document.getElementById("num5");
    num6 = document.getElementById("num6");
    num7 = document.getElementById("num7");
    num8 = document.getElementById("num8");
    num9 = document.getElementById("num9");
    sadd = document.getElementById("add");
    ssub = document.getElementById("sub");
    smul = document.getElementById("mul");
    sdiv = document.getElementById("div");
    smod = document.getElementById("mod");
    ssqrt = document.getElementById("sqrt");
    srecip = document.getElementById("recip");
    scalculate = document.getElementById("calculate");
    spoint = document.getElementById("point");
    ssign = document.getElementById("sign");
    backspace=document.getElementById("backspace");
    CE=document.getElementById("CE");
    C=document.getElementById("C");

     ssign.onclick=function(){
     var x=-1*eval(document.getElementById("result").value);
     document.getElementById("result").value=x;
  };

    C.onclick=function(){
    document.getElementById("result").value=0;
  };

     CE.onclick=function(){
      document.getElementById("result").value=0;
      CalRslt=0;
      opertr="";
  };

   backspace.onclick=function(){
    var s=document.getElementById("result").value;
    s=s.substr(0, s.length-1);
    document.getElementById("result").value=s;
  };
    spoint.onclick=function(){
    document.getElementById("result").value=document.getElementById("result").value+'.';
  };

    num0.onclick=function(){
    dispCal(0);
  };
    num1.onclick=function(){
    dispCal(1);
  };
    num2.onclick=function(){
    dispCal(2);
  };
  num3.onclick=function(){
    dispCal(3);
  };
  num4.onclick=function(){
    dispCal(4);
  };
  num5.onclick=function(){
    dispCal(5);
  };
  num6.onclick=function(){
    dispCal(6);
  };
  num7.onclick=function(){
    dispCal(7);
  };
  num8.onclick=function(){
    dispCal(8);
  };
  num9.onclick=function(){
    dispCal(9);
  };
  sadd.onclick=function(){
    dispCal('+');
  };
  ssub.onclick=function(){
    dispCal('-');
  };
  smul.onclick=function(){
    dispCal('*');
  };
  sdiv.onclick=function(){
    dispCal('/');
  };
   scalculate.onclick=function(){
    dispCal('=');
  };
  ssqrt.onclick=function(){
    dispCal('s');
  };

  smod.onclick=function(){
    dispCal('%');
  };

  srecip.onclick=function(){
    dispCal('$');
  };
      }

 window.onload=init; // init为自定义的初始化函数,我们让它在文档加载完后立即执行

本文由 Tony 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

赏个馒头吧