第原生JS實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能的具體代碼，供大家參考，具體內(nèi)容如下

使用html和css寫出計(jì)算器的基本結(jié)構(gòu)和樣式，用原生JS實(shí)現(xiàn)計(jì)算器的加減乘除運(yùn)算功能，只能計(jì)算簡(jiǎn)單的兩位數(shù)的運(yùn)算，不支持三個(gè)數(shù)連加或者連乘等等。一次計(jì)算完成之后再進(jìn)行下一次運(yùn)算不需要clear，可以直接進(jìn)行下次運(yùn)算。具體實(shí)現(xiàn)如下：

html結(jié)構(gòu)：

divid="box"

!--文本框要禁止用戶輸入，只能通過代碼中的input.value來修改--

inputid="display"type="text"value="0"disabled

div1/div

div2/div

div3/div

div+/div

div4/div

div5/div

div6/div

div-/div

div7/div

div8/div

div9/div

div*/div

divC/div

div0/div

div=/div

div//div

/div

css樣式：

#box{

width:500px;

height:600px;

border:1pxsolid#000000;

}

#display{

width:460px;

height:60px;

margin:15px;

text-align:right;

font-size:60px;

line-height:60px;

overflow:hidden;

/*overflow:hidden;

溢出隱藏*/

/*text-overflow:ellipsis;

文本溢出時(shí)顯示省略號(hào)

*/

/*word-wrap:none;

強(qiáng)制不換行*/

background:#ffffff;

}

.btn{

width:100px;

height:100px;

border:1pxsolid#000000;

float:left;

margin:10px11px;

font-size:40px;

line-height:100px;

text-align:center;

user-select:none;

}

JS代碼：

firstValue這個(gè)全局變量存儲(chǔ)第一次輸入的數(shù)，input的input.value屬性也是一個(gè)變量，這個(gè)值既作為頁(yè)面上顯示的內(nèi)容，也是輸入的數(shù)值。讓這兩個(gè)值進(jìn)行運(yùn)算，結(jié)果再顯示到輸入框中即可。bool變量作用：當(dāng)一次運(yùn)算完成之后所有數(shù)值清零。

如果要實(shí)現(xiàn)用上一次的結(jié)果繼續(xù)參與運(yùn)算這個(gè)功能，可以再設(shè)置一個(gè)全局變量result來存儲(chǔ)每次運(yùn)算后的結(jié)果，當(dāng)下次輸入運(yùn)算符號(hào)時(shí)，判斷firstValue和result，再?zèng)Q定用哪個(gè)值計(jì)算。當(dāng)點(diǎn)擊C按鈕時(shí)，所有值清空，返回初始狀態(tài)。

varinput=document.getElementById("display");

varbtnCollection=document.getElementsByClassName("btn");

vartype;

varfirstValue=0;

varbool=false;

for(vari=0;ibtnCollection.length;i++){

//獲取到每個(gè)按鍵并添加點(diǎn)擊事件。點(diǎn)擊后會(huì)觸發(fā)function中代碼執(zhí)行。

btnCollection[i].onclick=function(){

if(bool){

input.value="0";

firstValue=0;

type=undefined;

bool=false;

}

//input.value=this.innerHTML;

//顯示點(diǎn)擊的數(shù)字在文本框內(nèi)

if(!isNaN(Number(this.innerHTML))){

input.value=Number(input.value+this.innerHTML).toString();

}elseif(this.innerHTML!=="C"this.innerHTML!=="="){

firstValue=Number(input.value);

type=this.innerHTML;

input.value=0;

}elseif(this.innerHTML==="C"){

firstValue=0;

type=undefined;

input.value="0";

}else{

switch(type){

case"+":

input.value=(Number(input.value)+firstValue).toString();

break;

case"-":

input.value=(firstValue-Number(input.value)).toString();

break;

case"*":

input.value=(Number(input.value)*firstValue).toString();

break;

case"/":

input.value=(firstValue/Number(input.value)).to