大家好，給大家分享一下怎么用javascript做一個(gè)簡(jiǎn)單的計(jì)算器，很多人還不知道這一點(diǎn)。下面詳細(xì)解釋一下?，F(xiàn)在讓我們來看看！
JS實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
頁面布局設(shè)計(jì)（HTML+CSS)
??由于在之前的博客中有對(duì)html和css進(jìn)行詳細(xì)的講解，再次就不多敘述，直接上代碼。因?yàn)閖s中用到了JQuery選擇器所以在html中使用<></>標(biāo)簽引入了JQuery，在html中為每個(gè)按鈕單擊綁定計(jì)算器事件cal()并傳入當(dāng)前點(diǎn)擊對(duì)象thispython for語句用法。
??.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)單計(jì)算器</title>
<link rel="stylesheet" type="text/css" href="./style.css"> <!-- css樣式 -->
< src="https://code.jquery.com/jquery-latest.min.js"></> <!-- 引用JQuery庫 -->
</head>
<body>
<div>
<table>
<tr>
<td colspan="3"><input type="text" value="0"/></td>
</tr>
<tr>
<td><button id="c11" onclick="cal(this)">+</button></td>
<td><button id="c12" onclick="cal(this)">-</button></td>
<td><button id="c13" onclick="cal(this)">×</button></td>
<td><button id="c14" onclick="cal(this)">/</button></td>
</tr>
<tr>
<td><button id="c21" onclick="cal(this)" value="7">7</button></td>
<td><button id="c22" onclick="cal(this)" value="8">8</button></td>
<td><button id="c23" onclick="cal(this)" value="9">9</button></td>
<td rowspan="2"><button id="c24" onclick="cal(this)">C</button></td>
</tr>
<tr>
<td><button id="c31" onclick="cal(this)" value="4">4</button></td>
<td><button id="c32" onclick="cal(this)" value="5">5</button></td>
<td><button id="c33" onclick="cal(this)" value="6">6</button></td>
</tr>
<tr>
<td><button id="c41" onclick="cal(this)" value="1">1</button></td>
<td><button id="c42" onclick="cal(this)" value="2">2</button></td>
<td><button id="c43" onclick="cal(this)" value="3">3</button></td>
<td rowspan="2"><button id="c44" onclick="cal(this)">=</button></td>
</tr>
<tr>
<td colspan="2"><button id="c51" onclick="cal(this)" value="0">0</button></td>
<td><button id="c53" onclick="cal(this)">.</button></td>
</tr>
</table>
</div>
< src = "./calculator.js"></> <!-- js腳本 -->
</body>
</html>
??.css文件：
input{
width: 200px;
height:50px;
margin-bottom: 10px;
padding: 0;
font:18px bold;
}
button{
width: 50px;
height: 40px;
margin-bottom: 10px;
border: 1px dashed black;
background-color: #ffc4cc;
}
#c24{
height: 93px;
}
#c44{
height: 93px;
}
#c51{
width: 122px;
}
#c44,#c24,#c14{
margin-left:10px;
}
??靜態(tài)頁面如圖示：
實(shí)現(xiàn)計(jì)算部分（JS）
1.功能：實(shí)現(xiàn)簡(jiǎn)單的數(shù)值的加減乘除計(jì)算，以及清屏功能
2.操作：例如：123×29；以此點(diǎn)擊1、2、3、，點(diǎn)擊×號(hào)，依次點(diǎn)擊2、9，最后點(diǎn)擊＝，即可計(jì)算出結(jié)果3567
示例如圖：
3.缺點(diǎn)：
- 不能進(jìn)行負(fù)數(shù)的計(jì)算，會(huì)產(chǎn)生NaN錯(cuò)誤；
- 不能進(jìn)行連續(xù)計(jì)算，一次只能進(jìn)行兩個(gè)數(shù)之間的運(yùn)算；如果要在之前結(jié)果上繼續(xù)計(jì)算可以直接按運(yùn)算符號(hào)和下一個(gè)數(shù)；若要開始新的計(jì)算，則需要先清屏。
4.思路展示：
- 文本框顯示：因?yàn)槲谋究蝻@示的內(nèi)容根據(jù)點(diǎn)擊的按鈕實(shí)時(shí)變化，為了修改簡(jiǎn)單，在這里使用JQuery選擇器選中文本框，賦值給一個(gè)全局變量input，之后我們根據(jù)input的val()方法修改它的值就好。
代碼如下：
var input = $("input");
- 按鈕id獲取：因?yàn)楹竺嫖覀円鶕?jù)不同的按鈕進(jìn)行不同的操作，所以在cal()函數(shù)中第一步先獲取按鈕的id，方便后面做判斷用。
代碼如下：
let btn = e.id;
- 數(shù)值輸入：根據(jù)按鈕的id判斷是否為數(shù)字或者小數(shù)點(diǎn)，如果是的話，進(jìn)行數(shù)字輸入操作。先判斷當(dāng)前文本框的值是不是0，如果是0，則用當(dāng)前輸入覆蓋input的值；若非0，則將當(dāng)前輸入連接在input值后面。
代碼如下：
//若input的值為0
input.val(btn_value);
//若input的值非0
input.val(input.val()+btn_value);
- 符號(hào)輸入：根據(jù)按鈕的id判斷是否為運(yùn)算符號(hào)，如果是的話，進(jìn)行符號(hào)輸入操作。不考慮連續(xù)運(yùn)算，則先判斷當(dāng)前文本框的值是否含有+、×、/(不考慮-是因?yàn)橐M(jìn)行減法運(yùn)算)，如果有，則彈出“不支持該運(yùn)算”；若無，則將該運(yùn)算符號(hào)連接在input值后面。
代碼如下：
//若input的值含有+、×、/
alert("連續(xù)運(yùn)算功能未上線!")
//若input的值不含有+、×、/
input.val(input.val()+當(dāng)前運(yùn)算符號(hào));
- 數(shù)值計(jì)算：根據(jù)按鈕的id判斷是否為等號(hào)，如果是的話，進(jìn)行數(shù)值計(jì)算操作。進(jìn)行選擇判斷，使用indexOf()方法判斷input的值中含有+、×、/哪個(gè)標(biāo)點(diǎn)符號(hào)，然后以該符號(hào)位置為分隔，使用substring()方法截取該符號(hào)前面的值強(qiáng)制轉(zhuǎn)化為Float型后賦值給num1，截取該符號(hào)后面的值強(qiáng)制轉(zhuǎn)化為Float型后賦值給num2，進(jìn)行相應(yīng)的計(jì)算。（注意除法時(shí)分母不能為0）
代碼如下：
if(input_value.indexOf("+")!==-1){
pos = input_value.indexOf("+");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1+num2);
}
else if(input_value.indexOf("-")!==-1){
pos = input_value.indexOf("-");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1-num2);
}
else if(input_value.indexOf("×")!==-1){
pos = input_value.indexOf("×");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1*num2);
}
else if(input_value.indexOf("/")!==-1){
pos = input_value.indexOf("/");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
if(num2-0 === 0){
alert("分母不能為0！");
}
else{
input.val(num1/num2);
}
}
- 清屏：根據(jù)按鈕的id判斷是否為符號(hào)C，如果是的話，進(jìn)行清屏操作。
代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-765484.html
input.val(0);
5. JavaScript文件如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-765484.html
"use strict"
var input = $("input");
function cal(e){
let btn = e.id;
//清零
if( btn === "c24"){
input.val(0);
}
//數(shù)值輸入
else if(btn === "c51"||btn === "c41"||btn === "c42"||btn === "c43"
||btn === "c31"||btn === "c32"||btn === "c33"
||btn === "c21"||btn === "c22"||btn === "c23"){
let btn_value = document.getElementById(btn).getAttribute("value");
if( input.val() === "0" ){
input.val(btn_value);
}
else{
input.val(input.val()+btn_value);
}
}
else if(btn === "c11"){
let input_value = input.val();
if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
input.val(input.val()+"+");
}
else{
alert("連續(xù)運(yùn)算功能未上線!")
}
}
else if(btn === "c12"){
let input_value = input.val();
if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
input.val(input.val()+"-");
}
else{
alert("連續(xù)運(yùn)算功能未上線!")
}
}
else if(btn === "c13"){
let input_value = input.val();
if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
input.val(input.val()+"×");
}
else{
alert("連續(xù)運(yùn)算功能未上線!")
}
}
else if(btn === "c14"){
let input_value = input.val();
if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
input.val(input.val()+"/");
}
else{
alert("連續(xù)運(yùn)算功能未上線!")
}
}
else if(btn === "c53"){
input.val(input.val()+".");
}
else if(btn === "c44"){
let pos,num1,num2;
let input_value = input.val();
if(input_value.indexOf("+")!==-1){
pos = input_value.indexOf("+");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1+num2);
}
else if(input_value.indexOf("-")!==-1){
pos = input_value.indexOf("-");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1-num2);
}
else if(input_value.indexOf("×")!==-1){
pos = input_value.indexOf("×");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1*num2);
}
else if(input_value.indexOf("/")!==-1){
pos = input_value.indexOf("/");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
if(num2-0 === 0){
alert("分母不能為0！");
}
else{
input.val(num1/num2);
}
}
}
}
JS實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
頁面布局設(shè)計(jì)（HTML+CSS)
??由于在之前的博客中有對(duì)html和css進(jìn)行詳細(xì)的講解，再次就不多敘述，直接上代碼。因?yàn)閖s中用到了JQuery選擇器所以在html中使用<></>標(biāo)簽引入了JQuery，在html中為每個(gè)按鈕單擊綁定計(jì)算器事件cal()并傳入當(dāng)前點(diǎn)擊對(duì)象thispython for語句用法。
??.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)單計(jì)算器</title>
<link rel="stylesheet" type="text/css" href="./style.css"> <!-- css樣式 -->
< src="https://code.jquery.com/jquery-latest.min.js"></> <!-- 引用JQuery庫 -->
</head>
<body>
<div>
<table>
<tr>
<td colspan="3"><input type="text" value="0"/></td>
</tr>
<tr>
<td><button id="c11" onclick="cal(this)">+</button></td>
<td><button id="c12" onclick="cal(this)">-</button></td>
<td><button id="c13" onclick="cal(this)">×</button></td>
<td><button id="c14" onclick="cal(this)">/</button></td>
</tr>
<tr>
<td><button id="c21" onclick="cal(this)" value="7">7</button></td>
<td><button id="c22" onclick="cal(this)" value="8">8</button></td>
<td><button id="c23" onclick="cal(this)" value="9">9</button></td>
<td rowspan="2"><button id="c24" onclick="cal(this)">C</button></td>
</tr>
<tr>
<td><button id="c31" onclick="cal(this)" value="4">4</button></td>
<td><button id="c32" onclick="cal(this)" value="5">5</button></td>
<td><button id="c33" onclick="cal(this)" value="6">6</button></td>
</tr>
<tr>
<td><button id="c41" onclick="cal(this)" value="1">1</button></td>
<td><button id="c42" onclick="cal(this)" value="2">2</button></td>
<td><button id="c43" onclick="cal(this)" value="3">3</button></td>
<td rowspan="2"><button id="c44" onclick="cal(this)">=</button></td>
</tr>
<tr>
<td colspan="2"><button id="c51" onclick="cal(this)" value="0">0</button></td>
<td><button id="c53" onclick="cal(this)">.</button></td>
</tr>
</table>
</div>
< src = "./calculator.js"></> <!-- js腳本 -->
</body>
</html>
??.css文件：
input{
width: 200px;
height:50px;
margin-bottom: 10px;
padding: 0;
font:18px bold;
}
button{
width: 50px;
height: 40px;
margin-bottom: 10px;
border: 1px dashed black;
background-color: #ffc4cc;
}
#c24{
height: 93px;
}
#c44{
height: 93px;
}
#c51{
width: 122px;
}
#c44,#c24,#c14{
margin-left:10px;
}
??靜態(tài)頁面如圖示：
實(shí)現(xiàn)計(jì)算部分（JS）
1.功能：實(shí)現(xiàn)簡(jiǎn)單的數(shù)值的加減乘除計(jì)算，以及清屏功能
2.操作：例如：123×29；以此點(diǎn)擊1、2、3、，點(diǎn)擊×號(hào)，依次點(diǎn)擊2、9，最后點(diǎn)擊＝，即可計(jì)算出結(jié)果3567
示例如圖：
3.缺點(diǎn)：
- 不能進(jìn)行負(fù)數(shù)的計(jì)算，會(huì)產(chǎn)生NaN錯(cuò)誤；
- 不能進(jìn)行連續(xù)計(jì)算，一次只能進(jìn)行兩個(gè)數(shù)之間的運(yùn)算；如果要在之前結(jié)果上繼續(xù)計(jì)算可以直接按運(yùn)算符號(hào)和下一個(gè)數(shù)；若要開始新的計(jì)算，則需要先清屏。
4.思路展示：
- 文本框顯示：因?yàn)槲谋究蝻@示的內(nèi)容根據(jù)點(diǎn)擊的按鈕實(shí)時(shí)變化，為了修改簡(jiǎn)單，在這里使用JQuery選擇器選中文本框，賦值給一個(gè)全局變量input，之后我們根據(jù)input的val()方法修改它的值就好。
代碼如下：
var input = $("input");
- 按鈕id獲?。阂?yàn)楹竺嫖覀円鶕?jù)不同的按鈕進(jìn)行不同的操作，所以在cal()函數(shù)中第一步先獲取按鈕的id，方便后面做判斷用。
代碼如下：
let btn = e.id;
- 數(shù)值輸入：根據(jù)按鈕的id判斷是否為數(shù)字或者小數(shù)點(diǎn)，如果是的話，進(jìn)行數(shù)字輸入操作。先判斷當(dāng)前文本框的值是不是0，如果是0，則用當(dāng)前輸入覆蓋input的值；若非0，則將當(dāng)前輸入連接在input值后面。
代碼如下：
//若input的值為0
input.val(btn_value);
//若input的值非0
input.val(input.val()+btn_value);
- 符號(hào)輸入：根據(jù)按鈕的id判斷是否為運(yùn)算符號(hào)，如果是的話，進(jìn)行符號(hào)輸入操作。不考慮連續(xù)運(yùn)算，則先判斷當(dāng)前文本框的值是否含有+、×、/(不考慮-是因?yàn)橐M(jìn)行減法運(yùn)算)，如果有，則彈出“不支持該運(yùn)算”；若無，則將該運(yùn)算符號(hào)連接在input值后面。
代碼如下：
//若input的值含有+、×、/
alert("連續(xù)運(yùn)算功能未上線!")
//若input的值不含有+、×、/
input.val(input.val()+當(dāng)前運(yùn)算符號(hào));
- 數(shù)值計(jì)算：根據(jù)按鈕的id判斷是否為等號(hào)，如果是的話，進(jìn)行數(shù)值計(jì)算操作。進(jìn)行選擇判斷，使用indexOf()方法判斷input的值中含有+、×、/哪個(gè)標(biāo)點(diǎn)符號(hào)，然后以該符號(hào)位置為分隔，使用substring()方法截取該符號(hào)前面的值強(qiáng)制轉(zhuǎn)化為Float型后賦值給num1，截取該符號(hào)后面的值強(qiáng)制轉(zhuǎn)化為Float型后賦值給num2，進(jìn)行相應(yīng)的計(jì)算。（注意除法時(shí)分母不能為0）
代碼如下：
if(input_value.indexOf("+")!==-1){
pos = input_value.indexOf("+");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1+num2);
}
else if(input_value.indexOf("-")!==-1){
pos = input_value.indexOf("-");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1-num2);
}
else if(input_value.indexOf("×")!==-1){
pos = input_value.indexOf("×");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1*num2);
}
else if(input_value.indexOf("/")!==-1){
pos = input_value.indexOf("/");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
if(num2-0 === 0){
alert("分母不能為0！");
}
else{
input.val(num1/num2);
}
}
- 清屏：根據(jù)按鈕的id判斷是否為符號(hào)C，如果是的話，進(jìn)行清屏操作。
代碼如下：
input.val(0);
5. JavaScript文件如下：
"use strict"
var input = $("input");
function cal(e){
let btn = e.id;
//清零
if( btn === "c24"){
input.val(0);
}
//數(shù)值輸入
else if(btn === "c51"||btn === "c41"||btn === "c42"||btn === "c43"
||btn === "c31"||btn === "c32"||btn === "c33"
||btn === "c21"||btn === "c22"||btn === "c23"){
let btn_value = document.getElementById(btn).getAttribute("value");
if( input.val() === "0" ){
input.val(btn_value);
}
else{
input.val(input.val()+btn_value);
}
}
else if(btn === "c11"){
let input_value = input.val();
if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
input.val(input.val()+"+");
}
else{
alert("連續(xù)運(yùn)算功能未上線!")
}
}
else if(btn === "c12"){
let input_value = input.val();
if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
input.val(input.val()+"-");
}
else{
alert("連續(xù)運(yùn)算功能未上線!")
}
}
else if(btn === "c13"){
let input_value = input.val();
if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
input.val(input.val()+"×");
}
else{
alert("連續(xù)運(yùn)算功能未上線!")
}
}
else if(btn === "c14"){
let input_value = input.val();
if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
input.val(input.val()+"/");
}
else{
alert("連續(xù)運(yùn)算功能未上線!")
}
}
else if(btn === "c53"){
input.val(input.val()+".");
}
else if(btn === "c44"){
let pos,num1,num2;
let input_value = input.val();
if(input_value.indexOf("+")!==-1){
pos = input_value.indexOf("+");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1+num2);
}
else if(input_value.indexOf("-")!==-1){
pos = input_value.indexOf("-");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1-num2);
}
else if(input_value.indexOf("×")!==-1){
pos = input_value.indexOf("×");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1*num2);
}
else if(input_value.indexOf("/")!==-1){
pos = input_value.indexOf("/");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
if(num2-0 === 0){
alert("分母不能為0！");
}
else{
input.val(num1/num2);
}
}
}
}
到了這里，關(guān)于用javascript做一個(gè)計(jì)算器,用js做一個(gè)計(jì)算器代碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
