javascript模擬實(shí)現(xiàn)計(jì)算器
本文實(shí)例為大家分享了javascript模擬實(shí)現(xiàn)計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下
功能:
1、實(shí)現(xiàn)單擊按鈕錄入數(shù)字2、實(shí)現(xiàn)基礎(chǔ)四則運(yùn)算功能，并添加必要的異常處理。3、實(shí)現(xiàn)小數(shù)點(diǎn)功能并添加異常處理：小數(shù)點(diǎn)只能出現(xiàn)一次4、實(shí)現(xiàn)正負(fù)號功能5、實(shí)現(xiàn)退位功能，已經(jīng)是最后一位時(shí)，顯示框顯示為06、AC清屏功能
使用的知識(shí)點(diǎn):
1、利用大量的自定義函數(shù)實(shí)現(xiàn)業(yè)務(wù)邏輯2、靈活運(yùn)用事件及事件處理3、培養(yǎng)異常處理的編程方法4、培養(yǎng)并實(shí)踐利用不同思路實(shí)現(xiàn)編程
綜合練習(xí)的目的:
1、將css,html和js有效的進(jìn)行技術(shù)組合，實(shí)現(xiàn)業(yè)務(wù)功能2、鍛煉和培養(yǎng)編程思想，解決問題的能力和方法3、鍛煉和培養(yǎng)利用多種編程思路，完成預(yù)先設(shè)定的目標(biāo)
而且最近剛上手js，感覺特別有趣，學(xué)習(xí)java基礎(chǔ)的時(shí)候沒有那么大的興趣。感覺剛一上手js感覺特別好玩有趣，在這里把一個(gè)簡單的計(jì)算器源碼展示出來：
html頁面：
<!DOCTYPE html><html><head> <title>js計(jì)算器</title><link rel='stylesheet' type='text/css'href='http://www.leifengta.com.cn/bcjs/index.css' ><script type='text/javascript' src='http://www.leifengta.com.cn/bcjs/index.js'></script></head><body onload='init()'> <!-- 1個(gè)文本框10個(gè)數(shù)字....20個(gè)按鈕 --><div id='div1'> <form action=''> <div id='div2'> <input type='text' name='num' disabled='disabled' value='0'> </div> </form> <div id='div3'> <input type='button' name='' value='C' id='baidu'> <input type='button' name='' value='←' id=''> <input type='button' name='' value='+/-' id=''> <input type='button' name='' value='/' id=''> <input type='button' name='' value='7' id=''> <input type='button' name='' value='8' id=''> <input type='button' name='' value='9' id=''> <input type='button' name='' value='*' id=''> <input type='button' name='' value='4' id=''> <input type='button' name='' value='5' id=''> <input type='button' name='' value='6' id=''> <input type='button' name='' value='-' id=''> <input type='button' name='' value='1' id='' > <input type='button' name='' value='2' id='' > <input type='button' name='' value='3' id='' > <input type='button' name='' value='+' id=''> <input type='button' name='' value='0' id=''> <input type='button' name='' value='=' id=''> <input type='button' name='' value='.' id=''> <input type='button' name='' value='AC' id=''> </div></div></body></html>
js頁面：
function init(){ var num=document.getElementById('num'); num.value=0; var btn_num1; var fh; num.disabled='disabled'; // var n1=document.getElementById('n1'); // n1.οnclick=function(){ // } var oButton=document.getElementsByTagName('input'); for(var i=0;i<oButton.length;i++){ oButton[i].onclick=function(){ if(isnumber(this.value)){ //num.value=(num.value+this.value)*1;//把默認(rèn)0消除 if(isNull(num.value)){ num.value=this.value; }else{ num.value=num.value+this.value; } }else{ //測試功能是否正確 // alert('bushishuzi') var btn_num=this.value; //測試功能是否正確（彈窗） // alert(btn_num); switch(btn_num){ case '+': // alert(11); btn_num1=num.value*1;//=parseInt(num.value)這個(gè)也可以,后面的話需要改為number num.value=0; fh='+'; break; case '-': btn_num1=num.value*1; num.value=0; fh='-'; break; case '*': btn_num1=num.value*1; num.value=0; fh='*'; break; case '/': btn_num1=num.value*1; num.value=0; fh='/'; break; case '.': num.value=dec_number(num.value); break; case '←': num.value=back(num.value); break; case '+/-': num.value=sign(num.value); break; case 'AC': num.value='0'; break; case 'C': init_baidu(); break; case '=': switch(fh){ case'+': num.value=btn_num1+num.value*1; break; case'-': num.value=btn_num1-num.value*1; break; case'*': num.value=btn_num1*num.value*1; break; case'/': if(num.value==0){ num.value=0; alert('除數(shù)不能為0'); }else{ num.value=btn_num1/num.value*1; } break; } break; } } } }}//小數(shù)點(diǎn)的功能function dec_number(n){ if(n.indexOf('.')==-1){ n=n+'.'; } return n;}//驗(yàn)證文本框是否為空或者為0function isNull(n){ if(n*1==0||n.length==0){ return true; }else{ return false; }}//退位鍵function back(n){ n=n.substr(0,n.length-1); if(isNull(n)){ n='0'; } return n;}//正負(fù)號+/-function sign(n){ if(n.indexOf('-')==-1){ n='-'+n; }else{ n=n.substr(1,n.length); } return n;}//isNaN:不能轉(zhuǎn)換成數(shù)字：true,可以轉(zhuǎn)換成數(shù)字是falsefunction isnumber(n){ return !isNaN(n); } //C按鈕使用一個(gè)超級鏈接，鏈接到百度，這個(gè)可以隨便發(fā)揮function init_baidu(){ window.location.;}
css頁面：
*{ margin:0px; padding:0px;}div{ width:170px;}#div1{ top:60px; left: 100px; position:absolute;}input[type='button']{ width:30px; margin-right: 5px;}input[type='text']{ width:147px; text-align: right; background-color:white; border:1px solid; padding-right:1px; box-sizing:content-box;}input[type='button']:hover{/*//偽類和按鈕的使用*/ background-color:white; border:1px solid;}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP新手必備的基礎(chǔ)知識(shí)2. asp文件用什么軟件編輯3. PHP基礎(chǔ)之生成器4——比較生成器和迭代器對象4. CentOS郵箱服務(wù)器搭建系列——SMTP服務(wù)器的構(gòu)建（ Postfix ）5. 通過IEAD+Maven快速搭建SSM項(xiàng)目的過程(Spring + Spring MVC + Mybatis)6. js實(shí)現(xiàn)計(jì)算器功能7. Vue axios獲取token臨時(shí)令牌封裝案例8. 利用CSS制作3D動(dòng)畫9. golang中json小談之字符串轉(zhuǎn)浮點(diǎn)數(shù)的操作10. JS中6個(gè)對象數(shù)組去重的方法
網(wǎng)公網(wǎng)安備