Rechner von JavaScript und jQuery

-1

.calculator-body{ 
 
\t padding-top: 20px; 
 
} 
 

 
.calculator-monitor{ 
 
    border-radius: 5px; 
 
    background-color: rgba(128, 128, 128, 0.09); 
 
\t margin-bottom: 10px; 
 
\t text-align-last: right; 
 
\t padding: 10px; 
 
} 
 

 
.btn{ 
 
\t width: 40px; 
 
\t height: 40px; 
 
\t margin: 2px 1px; 
 
\t padding: 5px 15px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>cALCULATOR</title> 
 
\t <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
\t <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
\t <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
\t <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> 
 
\t <script type="text/javascript" src="js/js.js"></script> 
 
</head> 
 
<body> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t <div class="container"> 
 
\t \t <div class="row text-center"> 
 
\t \t \t <div class="col-xs-12 col-sm-6 col-sm-offset-3 bg main-block" id="mainBlock"> 
 
\t \t \t \t <div class="calculator-body"> 
 
\t \t \t \t \t <div class="row calculator-screen-row"> 
 
\t \t \t \t \t \t <input type="text" name="" class="calculator-monitor" placeholder="0"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="7">7</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="8">8</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="9">9</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">/</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="4">4</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="5">5</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="6">6</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">x</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="1">1</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="2">2</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="3">3</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">-</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="0">0</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">.</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">+</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">=</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

Hallo allerseits, Eigentlich bin ich neu in Codierung und vor allem in JS. Jetzt muss ich einen einfachen Rechner mit mehreren Operationen machen. Ich habe mehrere Möglichkeiten ausprobiert, aber keiner von ihnen war richtig. Ich muss auf einige Zahlen klicken, der Wert der Eingabe wurde auf den Wert der Schaltfläche (Nummer) geändert. Wie kann ich es verwalten, ich bin froh, die Antwort zu sehen, indem Sie jQuery verwenden.

Quelle

2016-12-14 Aghasi Grigoryan

http://codepen.io/simonja2/pen/QbGYbR –

Mit diesem Code, den Sie auf dem Monitor so einstellen, die Zahlen, die Sie drücken, wird der Vorgang später ausgearbeitet werden, aber das ist, wie es funktionieren soll :

$(function(){ 
 
    $('.number-button').click(function(data){ 
 
    var temp = $('.calculator-monitor').val(); 
 
    $('.calculator-monitor').val(temp + $(this).attr("value")); 
 
    }); 
 
});

.calculator-body{ 
 
\t padding-top: 20px; 
 
} 
 

 
.calculator-monitor{ 
 
    border-radius: 5px; 
 
    background-color: rgba(128, 128, 128, 0.09); 
 
\t margin-bottom: 10px; 
 
\t text-align-last: right; 
 
\t padding: 10px; 
 
} 
 

 
.btn{ 
 
\t width: 40px; 
 
\t height: 40px; 
 
\t margin: 2px 1px; 
 
\t padding: 5px 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>cALCULATOR</title> 
 
\t <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
\t <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
\t <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
\t <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> 
 
\t <script type="text/javascript" src="js/js.js"></script> 
 
</head> 
 
<body> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t <div class="container"> 
 
\t \t <div class="row text-center"> 
 
\t \t \t <div class="col-xs-12 col-sm-6 col-sm-offset-3 bg main-block" id="mainBlock"> 
 
\t \t \t \t <div class="calculator-body"> 
 
\t \t \t \t \t <div class="row calculator-screen-row"> 
 
\t \t \t \t \t \t <input type="text" name="" class="calculator-monitor" placeholder="0"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="7">7</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="8">8</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="9">9</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">/</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="4">4</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="5">5</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="6">6</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">x</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="1">1</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="2">2</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="3">3</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">-</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="0">0</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">.</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">+</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">=</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

Quelle

2016-12-14 10:37:41

Dieses folgende Skript:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('.calculator-button').click(function(){ 
     var val = $(this).text(); 
     $('.calculator-monitor').val(val); 
    }); 
    }); 
</script>

Quelle

2016-12-14 10:34:24 Taniya

Versuchen:

$("button").on("click", function() { 
$('.calculator-monitor').val($(this).text()); 
});

Hinweis: Code innerhalb document.ready sein muss.

// Shorthand for $(document).ready() 
$(function() { 

});

Quelle

2016-12-14 10:34:56

Ich habe ein Inline-Script-Tag hier hinzugefügt, wo man sehen kann, dass ich den Wert der Schaltfläche erhalten unter Verwendung eines auf Click-Ereignis, dann wird der Bildschirm Wert erhalten auf 0 vorbelegt ich dann die Nummer auf die anhängen Computer-Bildschirm.

Hoffe, dass hilft! (Dies ist mein erster SO Antwort!)

.calculator-body{ 
 
\t padding-top: 20px; 
 
} 
 

 
.calculator-monitor{ 
 
    border-radius: 5px; 
 
    background-color: rgba(128, 128, 128, 0.09); 
 
\t margin-bottom: 10px; 
 
\t text-align-last: right; 
 
\t padding: 10px; 
 
} 
 

 
.btn{ 
 
\t width: 40px; 
 
\t height: 40px; 
 
\t margin: 2px 1px; 
 
\t padding: 5px 15px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>cALCULATOR</title> 
 
\t <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
\t <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
\t <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
\t <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> 
 
\t <script type="text/javascript" src="js/js.js"></script> 
 
</head> 
 
<body> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t <div class="container"> 
 
\t \t <div class="row text-center"> 
 
\t \t \t <div class="col-xs-12 col-sm-6 col-sm-offset-3 bg main-block" id="mainBlock"> 
 
\t \t \t \t <div class="calculator-body"> 
 
\t \t \t \t \t <div class="row calculator-screen-row"> 
 
\t \t \t \t \t \t <input type="text" name="" class="calculator-monitor" placeholder="0"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="7">7</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="8">8</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="9">9</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">/</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="4">4</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="5">5</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="6">6</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">x</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="1">1</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="2">2</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="3">3</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">-</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="0">0</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">.</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">+</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">=</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 
<script type="text/javascript"> 
 
    jQuery(function($){ 
 
     $('.calculator-button').click(function(){ 
 
      var btnVal = $(this).text(); 
 
      var currentScreen = $('.calculator-monitor').val(); 
 
      if (!currentScreen || currentScreen == "") { 
 
       currentScreen = ''; 
 
      } 
 
      $('.calculator-monitor').val(currentScreen+''+btnVal); 
 
     }); 
 
    }); 
 
</script> 
 
</body> 
 
</html>

Quelle

2016-12-14 10:36:49 Craig

var arry = []; 
 
var elem = document.getElementsByClassName("number-button"); 
 
for(i = 0 ;i < elem.length ; i++) 
 
    { 
 
    elem[i].addEventListener("click" , function(){ 
 
     //alert(this.value); 
 
     //document.getElementById("opscreen").value = this.value; 
 
     arry = arry + this.value; 
 
     document.getElementById("opscreen").value = arry; 
 
     
 
    }); 
 
    var operatr = document.getElementsByClassName("operator"); 
 
    button"); 
 
for(i = 0 ;i < elem.length ; i++) 
 
    { 
 
    elem[i].addEventListener("click" , function(){ 
 
     //alert(this.value); 
 
     //document.getElementById("opscreen").value = this.value; 
 
     arry = arry + this.value; 
 
     document.getElementById("opscreen").value = arry; 
 
     
 
    }); 
 
    
 
          }

.calculator-body{ 
 
\t padding-top: 20px; 
 
} 
 

 
.calculator-monitor{ 
 
    border-radius: 5px; 
 
    background-color: rgba(128, 128, 128, 0.09); 
 
\t margin-bottom: 10px; 
 
\t text-align-last: right; 
 
\t padding: 10px; 
 
} 
 

 
.btn{ 
 
\t width: 40px; 
 
\t height: 40px; 
 
\t margin: 2px 1px; 
 
\t padding: 5px 15px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>cALCULATOR</title> 
 
\t <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
\t <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
\t <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
\t <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> 
 
\t <script type="text/javascript" src="js/js.js"></script> 
 
</head> 
 
<body> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t <div class="container"> 
 
\t \t <div class="row text-center"> 
 
\t \t \t <div class="col-xs-12 col-sm-6 col-sm-offset-3 bg main-block" id="mainBlock"> 
 
\t \t \t \t <div class="calculator-body"> 
 
\t \t \t \t \t <div class="row calculator-screen-row"> 
 
\t \t \t \t \t \t <input type="text" name="" class="calculator-monitor" placeholder="0" id="opscreen"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="7">7</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="8">8</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="9">9</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">/</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="4">4</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="5">5</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="6">6</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button operator">x</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="1">1</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="2">2</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="3">3</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">-</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row buttons-row first-buttons-row"> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button number-button" value="0">0</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">.</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">+</button> 
 
\t \t \t \t \t \t <button class="btn btn-default calculator-button">=</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

Quelle

2016-12-14 10:46:37

Rechner von JavaScript und jQuery

Antwort

Verwandte Themen