原生js實(shí)現(xiàn)簡易計(jì)算器
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡易計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下
最近，博主閑來無聊，就沒事用js寫了個(gè)簡易計(jì)算器（博主是搞后端的，不是前端>_<）。其實(shí)，感覺搞前端的很幸福，自己弄出點(diǎn)東西很有成就感，話不多說，附上源碼。
<!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;'>在線簡易計(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)行延伸。有什么想法或者是建議，可以和博主交流哦。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. python 寫一個(gè)文件分發(fā)小程序2. python調(diào)用百度API實(shí)現(xiàn)人臉識(shí)別3. 如何基于Python和Flask編寫Prometheus監(jiān)控4. Python Selenium破解滑塊驗(yàn)證碼最新版(GEETEST95%以上通過率)5. Python中Anaconda3 安裝gdal庫的方法6. 用python對(duì)oracle進(jìn)行簡單性能測(cè)試7. Python自動(dòng)化之定位方法大殺器xpath8. Vue3中使用this的詳細(xì)教程9. Python QT組件庫qtwidgets的使用10. Python 利用flask搭建一個(gè)共享服務(wù)器的步驟
網(wǎng)公網(wǎng)安備