快捷導(dǎo)航

JavaScript實(shí)現(xiàn)簡易計(jì)算器案例

更新時(shí)間：2022年07月29日 14:25:10 作者：ZJQ12334

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡易計(jì)算器案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下<BR>

本文實(shí)例為大家分享了JavaScript模仿windows計(jì)算器，供大家參考，具體內(nèi)容如下

功能：

1、實(shí)現(xiàn)單機(jī)按鈕錄入數(shù)字
2、實(shí)現(xiàn)基礎(chǔ)四則運(yùn)算功能，并添加必要的異常處理，例如，除數(shù)為0
3、實(shí)現(xiàn)小數(shù)點(diǎn)功能并添加異常處理：小數(shù)點(diǎn)只能出現(xiàn)一次
4、實(shí)現(xiàn)正負(fù)號功能
5、實(shí)現(xiàn)退位功能，已經(jīng)是最后一位時(shí)，顯示框顯示為0
6、清屏功能

項(xiàng)目原型

<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <title>Document</title>
? <link rel="stylesheet" type="text/css" href="../index.css/index.css" >
? <script type="text/javascript" src="../index.js/index.js"></script>
? <script type="text/javascript" src="../index.js/index1.js"></script>
</head>
<body onload="jiazai(),o()">
? <div class="div1">
? ? <div class="div2">
? ? ? <input type="text" name="num" id="num">
? ? </div>
? ? <div class="div3">
? ? ? <input type="button" value="c">
? ? ? <input type="button" value="←">
? ? ? <input type="button" value="+/-">
? ? ? <input type="button" value="/">
? ? ? <input type="button" value="1">
? ? ? <input type="button" value="2">
? ? ? <input type="button" value="3">
? ? ? <input type="button" value="*">
? ? ? <input type="button" value="4">
? ? ? <input type="button" value="5">
? ? ? <input type="button" value="6">
? ? ? <input type="button" value="-">
? ? ? <input type="button" value="7">
? ? ? <input type="button" value="8">
? ? ? <input type="button" value="9">
? ? ? <input type="button" value="+">
? ? ? <input type="button" value="0">
? ? ? <input type="button" value=".">
? ? ? <input type="button" value="=">
? ? ? <input type="button" value="d" id="baidu">
? ? </div>
? </div>
</body>
</html>

*{
? margin: 0;
}

.div1{
? /*width: 170px;*/
? position: absolute;
? top: 60px;
? left: 200px;
? margin-left: 5px;
}

.div1 .div2 input{
? width: 170px;
? text-align: right;
? background-color: white;
? border:1px solid black;?
? padding-right: 10px;
? box-sizing: border-box;
}

.div1 .div3 input{
? width: 35px;
? margin-right: 5px;
? margin-top: 5px;
??
}
.div1 .div3{
? width: 190px;
}

.div1 .div3 input:hover{
? background-color: #abcdef;
? border:1px solid black;
? border-radius: 5px;
}

小數(shù)點(diǎn)功能的實(shí)現(xiàn)

1、小數(shù)點(diǎn)只能出現(xiàn)一次
2、再小數(shù)點(diǎn)case這里直接函數(shù)調(diào)用
3、技術(shù)點(diǎn)：indexof()，查找字符是否存在，存在的話返回大于0，不存在的話返回-1

//小數(shù)點(diǎn)
function xiaoshu(n){
? if (n.indexOf('.')==-1) {
? ? num.value=n+'.';
? }else{
? ? num.value=n;
? }
}

? ? case '.':
? ? xiaoshu(num.value);
? ? break; ?
1

進(jìn)行非數(shù)字和數(shù)字的判斷

回退鍵的實(shí)現(xiàn)

需求：將文本框中的最后一個字符刪掉后，保留文本框中的其他內(nèi)容
1、文本框里面有123，按下退位鍵保留12 ，再次按下保留1
2、當(dāng)文本框內(nèi)只剩下1的時(shí)候，再次按下退位鍵，文本框恢復(fù)到默認(rèn)狀態(tài)0

正負(fù)號

1、輸入123，第一次單機(jī)添加 “-” ，再次單機(jī)顯示+
2、如果數(shù)字前面有符號那就取消，沒有符號就加上，類似開關(guān)按鈕

JS代碼

function jiazai(){
? //獲取文本框的ID
? var num = document.getElementById('num');
? //在腳本中設(shè)置input文本框的value值為0
? num.value = '0';
? //設(shè)置input文本框?yàn)椴豢蛇x中狀態(tài)
? num.disabled = 'disabled';
? //獲取標(biāo)簽名為input的所有標(biāo)簽
? var btn = document.getElementsByTagName('input');
? var xin;//定義一個接受新的值
? var bb;//定義一個符號判斷給=，具體用來+-*/
? for(var i=0;i<btn.length;i++){
? ? //給input所有按鈕綁定 onclick事件
? ? btn[i].onclick = function(){
? ? ? //判斷如過是數(shù)字
? ? ? if (isNumber(this.value)) {
? ? ? ? if (isNull(num.value)) {
? ? ? ? ? num.value = this.value;
? ? ? ? }else{
? ? ? ? ? num.value = num.value+this.value;
? ? ? ? }
? ? ? }//否則，如果是非數(shù)字的話
? ? ? else{
? ? ? ? //獲取非數(shù)字
? ? ? ? var feishuzi = this.value;
? ? ? ? //多條件分支判斷
? ? ? ? switch(feishuzi){
? ? ? ? ? case '+':
? ? ? ? ? xin = Number(num.value);
? ? ? ? ? num.value = 0;
? ? ? ? ? bb ='+';
? ? ? ? ? break;
? ? ? ? ? case '-':
? ? ? ? ? xin = Number(num.value);
? ? ? ? ? num.value = 0;
? ? ? ? ? bb ='-';
? ? ? ? ? break;
? ? ? ? ? case '*':
? ? ? ? ? xin = Number(num.value);
? ? ? ? ? num.value = 0;
? ? ? ? ? bb ='*';
? ? ? ? ? break;
? ? ? ? ? case '/':
? ? ? ? ? xin = Number(num.value);
? ? ? ? ? num.value = 0;
? ? ? ? ? bb ='/';
? ? ? ? ? break;
? ? ? ? ? case 'c':
? ? ? ? ? num.value = 0;
? ? ? ? ? break;
? ? ? ? ? case '←':
? ? ? ? ? num.value = fn(num.value);
? ? ? ? ? break;
? ? ? ? ? case '+/-':
? ? ? ? ? num.value =sign(num.value);
? ? ? ? ? break;
? ? ? ? ? case '.':
? ? ? ? ? xiaoshu(num.value);
? ? ? ? ? break;
? ? ? ? ? case '=':
? ? ? ? ? switch(bb){
? ? ? ? ? ? case '+':
? ? ? ? ? ? num.value = xin+Number(num.value);
? ? ? ? ? ? break;
? ? ? ? ? ? case '-':
? ? ? ? ? ? num.value = xin-Number(num.value);
? ? ? ? ? ? break;
? ? ? ? ? ? case '*':
? ? ? ? ? ? num.value = xin*Number(num.value);
? ? ? ? ? ? break;
? ? ? ? ? ? case '/':
? ? ? ? ? ? if (Number(num.value)==0) {
? ? ? ? ? ? ? alert('除數(shù)不能為0');
? ? ? ? ? ? ? num.value = 0;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? num.value = xin/Number(num.value);
? ? ? ? ? ? }
? ? ? ? ? ? break;
? ? ? ? ? }
? ? ? ? ? break;
? ? ? ? }?
? ? ? }
? ? }
? }
}


//判斷是否是數(shù)字，或者非數(shù)字
function isNumber(n){
? if (!isNaN(n)) {
? ? return true;
? }else{
? ? return false;
? }

}

var ?btn = document.getElementsByTagName('input');
//判斷內(nèi)容是否為空
function isNull(n){
? if (n=='0' || n.length==0) {
? ? return true;
? }else{
? ? return false;
? }
}


//回退鍵定義函數(shù)
function fn(c){
? c=c.substr(0,c.length-1)
? if (isNull(c)) {
? ? c= 0;
? }
? return c;
}


//正負(fù)號定義函數(shù)
function sign(n){
? n=Number(n)*(-1);
? return n;
}


//小數(shù)點(diǎn)
function xiaoshu(n){
? if (n.indexOf('.')==-1) {
? ? num.value=n+'.';
? }else{
? ? num.value=n;
? }
}