Javacript - 尝试编写计算器代码

时间：2017-05-28 10:29:07

标签： javascript jquery html css calculator

我只是在打字几个小时后尝试修改我的代码，才为学校作业制作了一个计算器。它仍然无法正常工作，我希望有人能找到我的错误。

＆＃13;
＆＃13; 
function myStory() {
  window.alert ("Very doge");
}

// Als de pagina laadt: laad de query

$(document).ready(function(){
  // Onthoud de input van de gebruiker om later te gebruiken
  var inputs=[""];

  // Onthoud de input van de gebruikers die eerst word ingetypt.
  var totalString;

  // Operator array voor validatie geheugen
  var operators1 = ["Mc", "M+", "M-", "MR"];

  // Operator array voor validatie zonder '.' Zo kan er niet bijv. 2x ++
  // worden ingevuld
  var operators2 = ["+", "-", "/", "X", "+/-"];

  // Operators arrat voor validatie met de '.'
  var operators3 = ["."];

  // Nummers voor validatie
  var numbers = [0,0,1,2,3,4,5,6,7,8,9];


  //Functie om alles te updaten
  // ALS er een punt in zit, dan wordt er gekeken of het er maar 1 is en niet
  // meerdere, anders krijg je de error: Duplicate
  function getValue(input){
    if(operators3.includes(inputs[inputs.length-1]) === true && input === "."){
      window.alert("Duplicate '.' ");
    }
    else if (inputs.length === 1 && operators2.includes(input) === false){
      inputs.push(input);
    }
    else if(operators2.includes(inputs[inputs.length-1]) === false){
      inputs.push(input);
    }
    else if (numbers.includes(Number(input))){
      inputs.push(input);
    }
    update();
  }

  //Functie om de display te updaten
  function update(){
    totalString = inputs.join("");
    $("#display").html(totalString);
    console.log(inputs);
  }

  //Functie om het totaal te berekenen bijv. 8+6-4 wordt ingevuld
  // Dit wordt dan in 1x berekend. Het wordt zegmaar ge-evalueerd
  function getTotal(){
    totalString = inputs.join("");
    $("#display").html(eval(totalString));
  }

  //Wanneer er op een button wordt geklikt, voer dan de functie uit.
  $("input").on("click", function(){
    if (this.id === "C"){
      inputs=[""];
      update();
    }
    else if (this.id === "="){
      getTotal();
    }
    else {
      if(inputs[inputs.length-1].indexOf("+", "-", "/", "X", "+/-") === -1){
        getValue(this.id);
      }
      else {
        getValue(this.id);
      }
    }
  });
});
＆＃13; 
body {
  font-family: 'Titillium Web', Helvetica, sans-serif;
  font-weight: 600;
  background-color: #f4f4f4;
}

#container {
  position: relative;
  width: 400px;
  height: 600px;
  background-color: #FFFFFF;
  margin: 0px auto;
  border-radius: 15px;
  box-shadow: 20px 40px 45px -4px rgba(0,0,0,0.05);
}

form[name="calculator"] {
  width: 320px;
  margin: 0 auto;
  margin-top: 50px;
}

#answer {
  font-family: 'Titillium Web', Helvetica, sans-serif;
  font-weight: 600;
  background-color: #FFFFFF;
  border: none;
  margin-top: 1em;
  width: 320px;
  height: 50px;
  padding-top: 50px;
}

#display {
  padding-left: 300px;
  font-size: 2em;
}

.line {
  width: 320px;
  height: 1px;
  background-color: #c3c3c3;
}

input[type="button"] {
  font-family: 'Titillium Web', Helvetica, sans-serif;
  font-weight: 600;
  width: 65px;
  height: 65px;
  margin-left: 10px;
  margin-top: 10px;
  border: none;
  background-color: #FFFFFF;
  color: #525252;
  font-size: 1.1em;
}

input[type="button"]:hover {
  border: none;
  color: #f67474;
  cursor: pointer;
}

input.numbers {
  color: #9d9d9d;
}

input.red {
  color: #f67474;
}

input.red:hover {
  color: #525252;
}

/* Memes */
p {
  color: #9d9d9d;
  float: left;
}

input.m1 {
  float: left;
  margin-left: 150px;
  margin-top: 80px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}

input.m2 {
  margin-left: 250px;
  margin-top: 250px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}

input.m3 {
  margin-left: 1100px;
  margin-top: 140px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}

input.m4 {
  margin-left: 1000px;
  margin-top: 400px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}

input.m5 {
  margin-left: 150px;
  margin-top: 450px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}

input.m6 {
  margin-left: 1200px;
  margin-top: 340px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}

input.m7 {
  margin-left: 1100px;
  margin-top: 600px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}

input.m8 {
  margin-left: 300px;
  margin-top: 600px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
	20%{color: red;}
	40%{color: purple;}
	60%{color: green;}
	80%{color: blue;}
	100%{color: orange;}
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
    <script src="javascriptcalc.js" type="text/javascript"></script>
    <title>Clean Calculator</title>
  </head>

  <body>

    <!-- many memes -->


    <input class="m1" type="button" value="such wow" onclick="myStory()">
    <input class="m2" type="button" value="many calculate" onclick="myStory()">
    <input class="m3" type="button" value="very machine" onclick="myStory()">
    <input class="m4" type="button" value="much javascript" onclick="myStory()">
    <input class="m5" type="button" value="such root" onclick="myStory()">
    <input class="m6" type="button" value="many squares" onclick="myStory()">
    <input class="m7" type="button" value="very numbers" onclick="myStory()">
    <input class="m8" type="button" value="much code" onclick="myStory()">


    <!-- Calculator -->

    <div id="container">

      <form name="calculator">
          <div id="answer">
            <span id="display">0</span>
          </div>
          </br>
          <div class="line"></div>

        <input type="button" id="MC" value="MC"/>
        <input type="button" id="M+" value="M+"/>
        <input type="button" id="M-" value="M-"/>
        <input type="button" id="MR" value="MR"/>
          </br>

        <input type="button" id="C" value="C"/>
        <input type="button" id="+/-" value="+/-"/>
        <input type="button" id="%" value="%"/>
        <input class="red" type="button" id="/" value="/"/>
          </br>

        <input class="numbers" type="button" id="7" value="7"/>
        <input class="numbers" type="button" id="8" value="8"/>
        <input class="numbers" type="button" id="9" value="9"/>
        <input class="red" type="button" id="X" value="X"/>
          </br>

        <input class="numbers" type="button" id="4" value="4"/>
        <input class="numbers" type="button"id="5"  value="5"/>
        <input class="numbers" type="button" id="6" value="6"/>
        <input class="red" type="button" id="-" value="-"/>
          </br>

        <input class="numbers" type="button" id="1" value="1"/>
        <input class="numbers" type="button" id="2" value="2"/>
        <input class="numbers" type="button" id="3" value="3"/>
        <input class="red" type="button" id="+" value="+"/>
          </br>

        <input class="numbers" type="button" id="00" value="00"/>
        <input class="numbers" type="button" id="0" value="0"/>
        <input type="button" id="," value=","/>
        <input class="red" type="button" id="=" value="="/>
          </br>

      </form>
    </div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：3)

您缺少 jquery 。使用

加载 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;
＆＃13; 
function myStory() {
  window.alert ("Very doge");
}

// Als de pagina laadt: laad de query

$(document).ready(function(){
  // Onthoud de input van de gebruiker om later te gebruiken
  var inputs=[""];

  // Onthoud de input van de gebruikers die eerst word ingetypt.
  var totalString;

  // Operator array voor validatie geheugen
  var operators1 = ["Mc", "M+", "M-", "MR"];

  // Operator array voor validatie zonder '.' Zo kan er niet bijv. 2x ++
  // worden ingevuld
  var operators2 = ["+", "-", "/", "X", "+/-"];

  // Operators arrat voor validatie met de '.'
  var operators3 = ["."];

  // Nummers voor validatie
  var numbers = [0,0,1,2,3,4,5,6,7,8,9];


  //Functie om alles te updaten
  // ALS er een punt in zit, dan wordt er gekeken of het er maar 1 is en niet
  // meerdere, anders krijg je de error: Duplicate
  function getValue(input){
    if(operators3.includes(inputs[inputs.length-1]) === true && input === "."){
      window.alert("Duplicate '.' ");
    }
    else if (inputs.length === 1 && operators2.includes(input) === false){
      inputs.push(input);
    }
    else if(operators2.includes(inputs[inputs.length-1]) === false){
      inputs.push(input);
    }
    else if (numbers.includes(Number(input))){
      inputs.push(input);
    }
    update();
  }

  //Functie om de display te updaten
  function update(){
    totalString = inputs.join("");
    $("#display").html(totalString);
    console.log(inputs);
  }

  //Functie om het totaal te berekenen bijv. 8+6-4 wordt ingevuld
  // Dit wordt dan in 1x berekend. Het wordt zegmaar ge-evalueerd
  function getTotal(){
    totalString = inputs.join("");
    $("#display").html(eval(totalString));
  }

  //Wanneer er op een button wordt geklikt, voer dan de functie uit.
  $("input").on("click", function(){
    if (this.id === "C"){
      inputs=[""];
      update();
    }
    else if (this.id === "="){
      getTotal();
    }
    else {
      if(inputs[inputs.length-1].indexOf("+", "-", "/", "X", "+/-") === -1){
        getValue(this.id);
      }
      else {
        getValue(this.id);
      }
    }
  });
});
＆＃13; 
body {
  font-family: 'Titillium Web', Helvetica, sans-serif;
  font-weight: 600;
  background-color: #f4f4f4;
}

#container {
  position: relative;
  width: 400px;
  height: 600px;
  background-color: #FFFFFF;
  margin: 0px auto;
  border-radius: 15px;
  box-shadow: 20px 40px 45px -4px rgba(0,0,0,0.05);
}

form[name="calculator"] {
  width: 320px;
  margin: 0 auto;
  margin-top: 50px;
}

#answer {
  font-family: 'Titillium Web', Helvetica, sans-serif;
  font-weight: 600;
  background-color: #FFFFFF;
  border: none;
  margin-top: 1em;
  width: 320px;
  height: 50px;
  padding-top: 50px;
}

#display {
  padding-left: 300px;
  font-size: 2em;
}

.line {
  width: 320px;
  height: 1px;
  background-color: #c3c3c3;
}

input[type="button"] {
  font-family: 'Titillium Web', Helvetica, sans-serif;
  font-weight: 600;
  width: 65px;
  height: 65px;
  margin-left: 10px;
  margin-top: 10px;
  border: none;
  background-color: #FFFFFF;
  color: #525252;
  font-size: 1.1em;
}

input[type="button"]:hover {
  border: none;
  color: #f67474;
  cursor: pointer;
}

input.numbers {
  color: #9d9d9d;
}

input.red {
  color: #f67474;
}

input.red:hover {
  color: #525252;
}

/* Memes */
p {
  color: #9d9d9d;
  float: left;
}

input.m1 {
  float: left;
  margin-left: 150px;
  margin-top: 80px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}

input.m2 {
  margin-left: 250px;
  margin-top: 250px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}

input.m3 {
  margin-left: 1100px;
  margin-top: 140px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}

input.m4 {
  margin-left: 1000px;
  margin-top: 400px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}

input.m5 {
  margin-left: 150px;
  margin-top: 450px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}

input.m6 {
  margin-left: 1200px;
  margin-top: 340px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}

input.m7 {
  margin-left: 1100px;
  margin-top: 600px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}

input.m8 {
  margin-left: 300px;
  margin-top: 600px;
  position: absolute;
  width: 160px !important;
  background-color: inherit;
  /* Chrome, Safari, Opera */
 -webkit-animation: rainbow 2s infinite;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
	20%{color: red;}
	40%{color: purple;}
	60%{color: green;}
	80%{color: blue;}
	100%{color: orange;}
}
＆＃13; 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="javascriptcalc.js" type="text/javascript"></script>
    
    <title>Clean Calculator</title>
  </head>

  <body>

    <!-- many memes -->


    <input class="m1" type="button" value="such wow" onclick="myStory()">
    <input class="m2" type="button" value="many calculate" onclick="myStory()">
    <input class="m3" type="button" value="very machine" onclick="myStory()">
    <input class="m4" type="button" value="much javascript" onclick="myStory()">
    <input class="m5" type="button" value="such root" onclick="myStory()">
    <input class="m6" type="button" value="many squares" onclick="myStory()">
    <input class="m7" type="button" value="very numbers" onclick="myStory()">
    <input class="m8" type="button" value="much code" onclick="myStory()">


    <!-- Calculator -->

    <div id="container">

      <form name="calculator">
          <div id="answer">
            <span id="display">0</span>
          </div>
          </br>
          <div class="line"></div>

        <input type="button" id="MC" value="MC"/>
        <input type="button" id="M+" value="M+"/>
        <input type="button" id="M-" value="M-"/>
        <input type="button" id="MR" value="MR"/>
          </br>

        <input type="button" id="C" value="C"/>
        <input type="button" id="+/-" value="+/-"/>
        <input type="button" id="%" value="%"/>
        <input class="red" type="button" id="/" value="/"/>
          </br>

        <input class="numbers" type="button" id="7" value="7"/>
        <input class="numbers" type="button" id="8" value="8"/>
        <input class="numbers" type="button" id="9" value="9"/>
        <input class="red" type="button" id="X" value="X"/>
          </br>

        <input class="numbers" type="button" id="4" value="4"/>
        <input class="numbers" type="button"id="5"  value="5"/>
        <input class="numbers" type="button" id="6" value="6"/>
        <input class="red" type="button" id="-" value="-"/>
          </br>

        <input class="numbers" type="button" id="1" value="1"/>
        <input class="numbers" type="button" id="2" value="2"/>
        <input class="numbers" type="button" id="3" value="3"/>
        <input class="red" type="button" id="+" value="+"/>
          </br>

        <input class="numbers" type="button" id="00" value="00"/>
        <input class="numbers" type="button" id="0" value="0"/>
        <input type="button" id="," value=","/>
        <input class="red" type="button" id="=" value="="/>
          </br>

      </form>
    </div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题