計算器由JavaScript和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>

大家好，其實我是新編碼中，尤其是在JS。現在我需要用一些操作來製作一個簡單的計算器。我嘗試了幾種方法，但沒有一個是正確的。我需要onclick的一些數字，輸入的值被更改爲按鈕（數字）的值。我該如何管理它，我會很高興看到使用jQuery的答案。

來源

2016-12-14 Aghasi Grigoryan

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

有了這個代碼，你的顯示器，你按的數字，該操作將在後面詳細闡述了設置，但是這是它應該如何工作：

$(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>

來源

2016-12-14 10:37:41

添加此以下腳本：

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

來源

2016-12-14 10:34:24 Taniya

嘗試：

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

注意：代碼必須是內部的document.ready。

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

});

來源

2016-12-14 10:34:56

我已經添加了一個內嵌腳本標籤在這裏，你可以看到，我得到使用上的點擊事件，然後拿到屏幕值默認爲0。然後我數追加到該按鈕的值顯示屏。

希望有幫助！（這是我第一次這樣，請回答！）

.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>

來源

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>

來源

2016-12-14 10:46:37

計算器由JavaScript和jQuery

回答

相關問題