原生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. JS中6個(gè)對(duì)象數(shù)組去重的方法2. 一文帶你徹底理解Java序列化和反序列化3. python中文本字符處理的簡單方法記錄4. 資深程序員：給Python軟件開發(fā)測試的25個(gè)忠告！5. Python使用Selenium自動(dòng)進(jìn)行百度搜索的實(shí)現(xiàn)6. PHP laravel實(shí)現(xiàn)導(dǎo)出PDF功能7. Java commons-httpclient如果實(shí)現(xiàn)get及post請(qǐng)求8. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法9. Python基于requests庫爬取網(wǎng)站信息10. PHP利用curl發(fā)送HTTP請(qǐng)求的實(shí)例代碼
網(wǎng)公網(wǎng)安備