原生js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下
最近，博主閑來(lái)無(wú)聊，就沒事用js寫了個(gè)簡(jiǎn)易計(jì)算器（博主是搞后端的，不是前端>_<）。其實(shí)，感覺搞前端的很幸福，自己弄出點(diǎn)東西很有成就感，話不多說(shuō)，附上源碼。
<!DOCTYPE html><html> <head><meta charset='utf-8'><title>計(jì)算器</title><style> #b1{text-align: center;background-color: lightblue;width: 650px;height: 650px;border: 1px solid black;margin-left: 400px;border-radius: 18px; } #b2{text-align: center;width: 300px;height: 80px;margin-top: 30px;font-family: '微軟雅黑';font-size: 20px;border-radius: 8px;outline:none; } ul{list-style-type: none; } li{float: left;margin-left: 40px;margin-top: 30px; } li input{width: 100px;height: 50px;border-radius: 8px;font-family: '微軟雅黑';font-size: 20px;outline:none; }li input:hover{background-color:red ; }</style><script>var beforeNum=0;function addNum(a){ beforeNum=document.getElementById('b2').value; var nowNum=beforeNum; if(beforeNum!=0){ nowNum=beforeNum+a;}else{if(beforeNum.substring(beforeNum.length-2,beforeNum.length-1)=='.'){ nowNum=beforeNum+a; } if(a!='+'&&a!='-'&&a!='*'&&a!='/'&&(beforeNum.substring(beforeNum.length-2,beforeNum.length-1)!='.')){ nowNum=a; } } document.getElementById('b2').value=nowNum;}function jisuan(){ document.getElementById('b2').value=eval(document.getElementById('b2').value);}function clearNum(){ document.getElementById('b2').value=0;}function backAgain(){ beforeNum=document.getElementById('b2').value; if(beforeNum.length!=1){ document.getElementById('b2').value=beforeNum.substring(0,beforeNum.length-1); }else if(beforeNum.length==1){document.getElementById('b2').value=0; }}function addPoint(b){ beforeNum=document.getElementById('b2').value; if((beforeNum.indexOf('.')!=beforeNum.length-1)){document.getElementById('b2').value=beforeNum+b; }}function offCl(){ document.getElementById('b2').value='';}</script> </head> <body><div id='b1'> <p style='font-size: 20px;'>在線簡(jiǎn)易計(jì)算器</p> <div><input name='wenben' value='0'/></div> <div><ul> <li><input type='button' value='1' onclick='addNum(this.value);'/></li> <li><input type='button' value='2' onclick='addNum(this.value);'/></li> <li><input type='button' value='3' onclick='addNum(this.value);'/></li> <li><input type='button' value='4' onclick='addNum(this.value);'/></li> </ul><ul> <li><input type='button' value='5' onclick='addNum(this.value);'/></li> <li><input type='button' value='6' onclick='addNum(this.value);'/></li> <li><input type='button' value='7' onclick='addNum(this.value);'/></li> <li><input type='button' value='8' onclick='addNum(this.value);'/></li> </ul><ul> <li><input type='button' value='9' onclick='addNum(this.value);'/></li> <li><input type='button' value='0' onclick='addNum(this.value);'/></li> <li><input type='button' value='+' onclick='addNum(this.value);'/></li> <li><input type='button' value='-' onclick='addNum(this.value);'/></li></ul> <ul> <li><input type='button' value='*' onclick='addNum(this.value);'/></li> <li><input type='button' value='/' onclick='addNum(this.value);'/></li> <li><input type='button' value='.' onclick='addPoint(this.value);'/></li> <li><input type='button' value='=' onclick='jisuan();'/></li></ul></ul> <ul> <li><input type='button' value='回退' onclick='backAgain();'/></li> <li><input type='button' value='清除' onclick='clearNum();'/></li> <li><input type='button' value='關(guān)機(jī)' onclick='offCl();'/></li></ul> </div></div> </body></html>
代碼運(yùn)行的效果圖。
另外，博主在寫js函數(shù)的時(shí)候進(jìn)行一系列的算法判斷，對(duì)一些不規(guī)范的算法進(jìn)行篩選，大家如果感興趣的話，可以對(duì)這些算法校驗(yàn)再進(jìn)行延伸。有什么想法或者是建議，可以和博主交流哦。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向2. windows服務(wù)器使用IIS時(shí)thinkphp搜索中文無(wú)效問題3. PHP設(shè)計(jì)模式中工廠模式深入詳解4. 淺談python出錯(cuò)時(shí)traceback的解讀5. .NET中l(wèi)ambda表達(dá)式合并問題及解決方法6. Python importlib動(dòng)態(tài)導(dǎo)入模塊實(shí)現(xiàn)代碼7. python matplotlib:plt.scatter() 大小和顏色參數(shù)詳解8. Ajax實(shí)現(xiàn)表格中信息不刷新頁(yè)面進(jìn)行更新數(shù)據(jù)9. 利用promise及參數(shù)解構(gòu)封裝ajax請(qǐng)求的方法10. JSP數(shù)據(jù)交互實(shí)現(xiàn)過(guò)程解析
網(wǎng)公網(wǎng)安備