Javascript - 包含数组和更多计算的数学

时间：2017-01-28 23:14:33

标签： javascript jquery math

我试图做一个由一些按钮组成的项目，当你点击它们时，一个值被推入一个数组（custo）。我需要添加该数组的所有值并将它们存储在变量中，我无法正常...我尝试加入（＆＃34; *＆＃34;）。在变量中具有该值之后，我需要将其乘以用户在输入上给出的值.........此外，单击按钮Calcular时将显示最终结果，并且当单击重置按钮时， div与结果（resultado），将被清理并重新排列数组。这是我得到的代码：

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">
    <div class="inner-cont">
        <div id="resultado"></div>
        <div class="bloco-estilo" id="penteado">
            <p>Penteado</p>
        </div>
        <div class="bloco-estilo" id="pintar">
            <p>Pintar</p>
        </div>
        <div class="bloco-estilo" id="pintar-opt">
            <ul class="cores">
                <li id="cor_verm">Vermelho</li>
                <li id="cor_loiro">Loiro</li>
                <li id="cor_cast" cast>Castanho</li>
            </ul>
        </div>
        <div class="bloco-estilo" id="acabamento">
            <p>Acabamento</p>
        </div>






        <div class="lucro">
            <div class="lucro-dir">
                <p>Introduza o valor percentual de lucro</p>
                <input type="text" maxlength="2">
                <p>%</p>
            </div>

            <div class="lucro-esq">
                <button id="reset">Reset</button>
                <button id="calc">Calcular</button>
            </div>
        </div>


        </div>
    </div>






<script src="jquery-3.1.1.min.js"></script>
<script src="function.js"></script>
</body>

</html>

CSS：

* {
margin: 0;
padding: 0;
}

html,
body {
width: 100%;
height: 100%;
}

ul {
list-style: none;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}

ul li {
display: inline;
padding: 0 40px;
box-sizing: border-box;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}

.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.inner-cont {
width: 50%;
height: 80%;
background-color: #f2ce9e;
position: relative;
}

#resultado {
width: 100%;
height: 100px;
background-color: snow;
box-sizing: border-box;
border: 2px dashed #e39835;
}

.bloco-estilo {
width: 100%;
height: 80px;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 20pt;
color: navy;
font-family: Arial;
margin-bottom: 10px;
box-sizing: border-box;
cursor: pointer;
transition: all 500ms ease;
}

ul li:hover {
background-color: #8b1555;
color: white;
}

.bloco-estilo:hover {
background-color: deeppink;
color: white;
}

.lucro {
width: 100%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
}

.lucro-dir {
width: 50%;
height: 100px;
font-size: 16pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
box-sizing: border-box;
}

.lucro-esq {
width: 50%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
}

#reset {
width: 50%;
height: 50%;
background-color: red;
border: none;
color: white;
font-size: 15pt;
float: left;
}

#calc {
width: 50%;
height: 50%;
background-color: green;
border: none;
color: white;
font-size: 15pt;
float: left;
}

input {
width: 40px;
height: 30px;
margin: 0 10px;
font-size: 12pt;
text-align: center;
font-weight: bolder;
}

#pintar-opt {
display: none;
}

JS（我也使用jquery）：

$('#pintar').click(function () {
$('#pintar-opt').slideToggle(0);
});



var p1, p2, p2_1, p2_2, p2_3, a;
p1 = 10; //penteado
p2 = 0; // pintar
p2_1 = 3; //opt cor 1
p2_2 = 5; //opt cor 2
p2_3 = 7; //opt cor 3
a = 6; //acabamento

var custo = [];

$('#penteado').click(function () {
custo.push(p1);
});

$('#pintar').click(function () {
custo.push(p2);
});

$('#cor_verm').click(function () {
custo.push(p2_1);
});

$('#cor_loiro').click(function () {
custo.push(p2_2);
});

$('#cor_cast').click(function () {
custo.push(p2_3);
});

$('#acabamento').click(function () {
custo.push(p2_3);
});

var preco = custo.join(" * ");

非常适合任何试图帮助我的人！如果你能看到设计上的错误，那将是非常棒的，因为它没有正确响应......

1 个答案:

答案 0 :(得分：0)

此代码段执行计算。通过使用$.each循环遍历数组元素并将每个元素添加到变量num（在脚本中注释），我们可以执行添加。我已经注释了元素连接线，因为我不确定为什么这是必要的。

n.b。通过简单地递增然后乘以num变量，可以在没有数组的情况下实现相同的结果，因此假设您将在其他地方执行其他任务。

＆＃13;
＆＃13; 
$('#pintar').click(function() {
  $('#pintar-opt').slideToggle(0);
});


var p1 = 10, //penteado
  p2 = 0, // pintar
  p2_1 = 3, //opt cor 1
  p2_2 = 5, //opt cor 2
  p2_3 = 7, //opt cor 3
  a = 6; //acabamento

var custo = [];

function totals() {
  var num = 0, // define num 
    percen = parseFloat($('#perc').val()) || 0, // get the input number or enter 0 if no user input
    percen = percen * 0.01, //convert the percentage
    sum = 0; // the total
  $.each(custo, function() { // cycle through custo
    num += parseFloat(this); // increase num by element value
  });
  sum = (num * percen).toFixed(2); // calculate and round to two decimal places
  return sum; // return aumrray sum times percentage

}

$('#penteado').click(function() {
  custo.push(p1);
});

$('#pintar').click(function() {
  custo.push(p2);
});

$('#cor_verm').click(function() {
  custo.push(p2_1);
});

$('#cor_loiro').click(function() {
  custo.push(p2_2);
});

$('#cor_cast').click(function() {
  custo.push(p2_3);
});

$('#acabamento').click(function() {
  custo.push(p2_3);
});

$('#calc').click(function() {
  $('#resultado').text(totals()); // call on the totals() function
});

$('#reset').click(function() {
  custo = []; // reset custo and num
  $('#resultado').text(0);
});

// var preco = custo.join(" * "); <- not sure why you're joining them here?
＆＃13; 
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
ul {
  list-style: none;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
ul li {
  display: inline;
  padding: 0 40px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.inner-cont {
  width: 50%;
  height: 80%;
  background-color: #f2ce9e;
  position: relative;
}
#resultado {
  width: 100%;
  height: 100px;
  background-color: snow;
  box-sizing: border-box;
  border: 2px dashed #e39835;
}
.bloco-estilo {
  width: 100%;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 20pt;
  color: navy;
  font-family: Arial;
  margin-bottom: 10px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 500ms ease;
}
ul li:hover {
  background-color: #8b1555;
  color: white;
}
.bloco-estilo:hover {
  background-color: deeppink;
  color: white;
}
.lucro {
  width: 100%;
  height: 100px;
  font-size: 12pt;
  color: navy;
  font-family: Arial;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
}
.lucro-dir {
  width: 50%;
  height: 100px;
  font-size: 16pt;
  color: navy;
  font-family: Arial;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;
}
.lucro-esq {
  width: 50%;
  height: 100px;
  font-size: 12pt;
  color: navy;
  font-family: Arial;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
}
#reset {
  width: 50%;
  height: 50%;
  background-color: red;
  border: none;
  color: white;
  font-size: 15pt;
  float: left;
}
#calc {
  width: 50%;
  height: 50%;
  background-color: green;
  border: none;
  color: white;
  font-size: 15pt;
  float: left;
}
input {
  width: 40px;
  height: 30px;
  margin: 0 10px;
  font-size: 12pt;
  text-align: center;
  font-weight: bolder;
}
#pintar-opt {
  display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">
    <div class="inner-cont">
      <div id="resultado"></div>
      <div class="bloco-estilo" id="penteado">
        <p>Penteado</p>
      </div>
      <div class="bloco-estilo" id="pintar">
        <p>Pintar</p>
      </div>
      <div class="bloco-estilo" id="pintar-opt">
        <ul class="cores">
          <li id="cor_verm">Vermelho</li>
          <li id="cor_loiro">Loiro</li>
          <li id="cor_cast" cast>Castanho</li>
        </ul>
      </div>
      <div class="bloco-estilo" id="acabamento">
        <p>Acabamento</p>
      </div>






      <div class="lucro">
        <div class="lucro-dir">
          <p>Introduza o valor percentual de lucro</p>
          <input id="perc" type="text" maxlength="2">
          <p>%</p>
        </div>

        <div class="lucro-esq">
          <button id="reset">Reset</button>
          <button id="calc">Calcular</button>
        </div>
      </div>


    </div>
  </div>


</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题