簡単なjs実現の計算機
比較的簡単なので、直接コードを貼ります...
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.11.1.js"></script>
<script>
// ，
var number1 = 0;
var number2 = 0;
// ，
var numberStr1 = "";
var numberStr2 = "";
// ，
var caculator = "";
// ，
var result = "";
// ， flag = false ， flag = true
var flag = false;
$(function(){
//
$(".number").click(function(){
$("#result").html(""); //
//
if(!flag)
addNumber1($(this).val());
else
addNumber2($(this).val());
});
// / * - + =
$(".caculator").click(function(){
if(result == null || result == "") {
alert(" ， ");
return;
}
var caculator = $(this).val();
if(flag && caculator != "=") return; // ，
// ， ， ，
flag = true;
// ， ，
if(caculator == "+"){
addCaculator("+");
}else if(caculator == "/"){
addCaculator("/");
}else if(caculator == "*"){
addCaculator("*");
}else if(caculator == "-"){
addCaculator("-");
}else if(caculator == "="){
//
caculate();
}
});
//
function addNumber1(num){
// + 0， 0
if(number1 == 0){
number1 = num;
}else{
number1 += num;
}
$("#result").html(number1);
result = number1; //
}
//
function addNumber2(num){
if(number2 == 0){
number2 = num;
}else{
number2 += num;
}
result = result + " " + number2;
$("#result").html(result);
}
//
function addCaculator(cal){
caculator = cal;
result = result + " " + caculator
$("#result").html(result);
}
// = ，
function caculate(){
var temp;
if(caculator == "+"){
// + ，
temp = parseInt(number1) + parseInt(number2);
}else if(caculator == "/"){
if(number2 == "0"){
alert(" ， 0");
$("#result").html("");
clear();
return;
}
temp = number1 / number2;
}else if(caculator == "*"){
temp = number1 * number2;
}else if(caculator == "-"){
temp = number1 - number2;
}
$("#result").html(result + " = " + temp);
clear();
}
//
function clear(){
number1 = 0;
number2 = 0;
result = "";
caculator = "";
flag = false;
}
});
</script>
<title> </title>
<style>
body, ul, h1, h2, h3, h4, h5, li, ol, span, p, div{
border:0;
margin:0;
}
button{
display:inline-block;
width:70px;
}
#caculator{
background:grey;
width:450px;
margin:0 auto;
}
#result_container{
width:450px;
margin:0 auto;
}
#result{
border:1px solid black;
height:60px;
}
</style>
</head>
<body>
<div id="caculator_container">
<h1 align="center"> ， 1 + 2 = 3 </h1>
<br>
<br>
<br>
<div id="result_container">
<span> :</span><p id="result"></p>
</div>
<div id="caculator">
<table width="400">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><button value="7" class="number">7</button></td>
<td><button value="8" class="number">8</button></td>
<td><button value="9" class="number">9</button></td>
<td><button class="caculator" value="/">/</button></td>
</tr>
<tr>
<td><button value="4" class="number">4</button></td>
<td><button value="5" class="number">5</button></td>
<td><button value="6" class="number">6</button></td>
<td><button class="caculator" value="*">*</button></td>
</tr>
<tr>
<td><button value="1" class="number">1</button></td>
<td><button value="2" class="number">2</button></td>
<td><button value="3" class="number">3</button></td>
<td><button class="caculator" value="-">-</button></td>
</tr>
<tr>
<td></td>
<td><button value="0" class="number">0</button></td>
<td><button class="caculator" value="=">=</button></td>
<td><button class="caculator" value="+">+</button></td>
</tr>
</table>
</div>
</div>
</body>
</html>