Script pentru aplicativă calculator de buzunar

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
alexzheng
Mesaje: 2

Script pentru aplicativă calculator de buzunar

Salut,sunt nou pe acest forum, dar tot ce am vazut imi place,ași avea si eu nevoie de câteva indicatii, trebuie sa creez aplicatia calculator de buzunar (pt calcule matematice) si nu stiu cum sa procedez. Daca cineva ma poate ajuta cu ceva detalii referitor la ce script sa folosesc va multumesc anticipat
MarPlo Mesaje: 4343
Salut
In primul rand se creaza butoanele pentru numere si operatorii matematici (+, - * /).
Iar cu JavaScript adaugi intr-o caseta valorile de la acele butoane, retii operatorul de calcul, iar la click pe un anume buton aplici eval() la ce s-a adaugat in caseta si operator, pt. a evalua expesia ca sa calculeze rezultatul si-l afiseaza intr-un element html.
Iata un exemplu de mini-calculator pe care-l poti dezvolta si cu alte functii si operatori:

Cod: Selectaţi tot

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mini-Calc</title>
<style>
#minicalc {
  margin: 1em auto;
  width: 200px;
  background: #fefefe;
  border: 2px solid blue;
  line-height: 155%;
  padding: 3px;
  text-align: center;
}
#minicalc #total {
  font-weight: 700;
  color: #0000ed;
}
#minicalc #oprsee {
  font-size: 18px;
  font-weight: 800;
}
#minicalc .nrs {
  margin: 3px 5px;
  border: 1px solid #bbb;
  border-radius: 6px;
  padding: 0 3px;
  cursor: pointer;
}
#minicalc .nrs:hover {
  background: #efef00;
}
</style>
</head>
<body>

<div id="minicalc">
  Total: <span id="total">0</span><br>
  <span id="oprsee"></span>
  <input type="text" id="val" /><br><br>
  <span class="nrs">0</span>
  <span class="nrs">1</span>
  <span class="nrs">2</span>
  <span class="nrs">3</span>
  <span class="nrs">4</span><br>
  <span class="nrs">5</span>
  <span class="nrs">6</span>
  <span class="nrs">7</span>
  <span class="nrs">8</span>
  <span class="nrs">9</span><br>
  <span class="nrs">.</span><br><br>
  <button class="opr">+</button>
  <button class="opr">-</button>
  <button class="opr">*</button>
  <button class="opr">/</button><br><br>
  <button id="calc">Calc</button>
  <button id="clear">Clear</button>
</div>

<script>
function miniCalc(){
  /* Example mini-calc ( https://coursesweb.net/ ) */
  var opr = '';  // keep current operator
  var total = document.getElementById('total');
  var val = document.getElementById('val');
  var oprsee = document.getElementById('oprsee');
  var nrs = document.querySelectorAll('#minicalc .nrs');
  var oprs = document.querySelectorAll('#minicalc .opr');

  // add /calculate value iin #val, when press .nrs
  var calculate = function(tval){
    var valn = (val.value == '') ? 0 : val.value *1;

    return eval(tval + opr + valn);
  }

  // when click .nrs
  for(var i=0; i<nrs.length; i++) nrs[i].addEventListener('click', function(){
    val.value += this.innerHTML;
  });

  // when click .opr
  for(var i=0; i<oprs.length; i++) oprs[i].addEventListener('click', function(){
    opr = this.innerHTML;
    oprsee.innerHTML = opr;
  });

  // when click #calc
  document.getElementById('calc').addEventListener('click', function(){
    total.innerHTML = calculate(total.innerHTML *1);
    val.value = '';
  });

  // when click #clear
  document.getElementById('clear').addEventListener('click', function(){
    total.innerHTML = 0;
    val.value = '';
    oprsee.innerHTML = '';
    opr = '';
  });
}
miniCalc();
</script>
</body>
</html>
Rezultat:
Total: 0


0 1 2 3 4
5 6 7 8 9
.



alexzheng Mesaje: 2
Iti multumesc frumos pentru ajutor,si in acelasi timp felicitari pentru site e SUPER.Grazie ancora!!!

Subiecte similare