Html+javascript實現一個簡單的計算器，可繼續計算
阿新 • • 發佈：2019-01-04
先展示出計算器的大致樣子
<body> <div id="main"> <table frame="box" rules="all"> <tr> <td colspan="5" ><input type="text" id="content" readonly="readonly"/></td> </tr> <tr> <td colspan="5"><button class="long" onclick="equal()">=</button></td> </tr> <tr> <td><button onclick="onClick(this)">1</button></td> <td><button onclick="onClick(this)">2</button></td> <td><button onclick="onClick(this)">3</button></td> <td><button onclick="onClick(this)">4</button></td> <td><button onclick="onClick(this)">5</button></td> </tr> <tr> <td><button onclick="onClick(this)">6</button></td> <td><button onclick="onClick(this)">7</button></td> <td><button onclick="onClick(this)">8</button></td> <td><button onclick="onClick(this)">9</button></td> <td><button onclick="onClick(this)">0</button></td> </tr> <tr> <td><button onclick="onClick(this)">.</button></td> <td><button onclick="onClick(this)">+</button></td> <td><button onclick="onClick(this)">-</button></td> <td><button onclick="onClick(this)">*</button></td> <td><button onclick="onClick(this)">/</button></td> </tr> <tr> <td colspan="5"><button class="long" onclick="changNull()">MR</button></td> </tr> </table> </div> </body>
使用CSS修飾
<style type="text/css"> #main{ width: 521px; height: 622px; margin: auto; } .long{ width: 517px; font-size: 50px; } #content{ width: 513px; height: 100px; font-size: 30px; } button{ width: 101px; height: 100px; font-size: 50px; } </style>
以下為script程式碼
首先看一下全域性變數
var data = []; //存放點選的數字與運算子
var str = ""; //將data陣列轉換為string，用於顯示
var curIndex = 0; //data[]當前的下標
var isCal = 0; //是否計算過，用於二次繼續計算
isCal用於記錄是否運算過，它幫助我們在結果後繼續進行運算，這裡設0為第一次計算
1為之前有過一次計算；
然後是點選數字和運算子，用this來獲得點選的button值
//點選數字或運算子 function onClick(v){ if(isCal==0){ //判斷是否是第一次計算 inputCount(v); } else{ data.length=1; //存入結果的長度 curIndex = 1; data[0] = document.getElementById("content").value;//在data[0]存入結果 inputCount (v); } }
在上面我們看到了 inputCount(v)這個函式
//顯示點選的資料
function inputCount (v) {
data[curIndex] = v.innerHTML;
str = data.join("");
curIndex++;
document.getElementById("content").value=str;
}
運算結果，必備的，核心函式是eval();
要考慮除數是0時的結果；
//運算結果
function equal(){
var result = eval( document.getElementById("content").value);
if(result.toString()=="Infinity"){ //不可將0作為除數
alert("除數不可以為0,結果為Infinity");
changNull();
}
else{
document.getElementById("content").value=result.toString();
isCal=1;
}
}
最後要有清空顯示欄
不僅要將顯示欄的value變為空，還需要將data[]的長度變為0，當前下標置0；
//清除
function changNull(){
document.getElementById("content").value="";
curIndex = 0;
data.length=0;
}
看看效果
繼續計算的功能不好展示，自己試試吧