原生js實現簡易計算器
本文實例為大家分享了js實現簡易計算器的具體代碼，供大家參考，具體內容如下
最近，博主閑來無聊，就沒事用js寫了個簡易計算器（博主是搞后端的，不是前端>_<）。其實，感覺搞前端的很幸福，自己弄出點東西很有成就感，話不多說，附上源碼。
<!DOCTYPE html><html> <head><meta charset='utf-8'><title>計算器</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;'>在線簡易計算器</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='關機' onclick='offCl();'/></li></ul> </div></div> </body></html>
代碼運行的效果圖。
另外，博主在寫js函數的時候進行一系列的算法判斷，對一些不規范的算法進行篩選，大家如果感興趣的話，可以對這些算法校驗再進行延伸。有什么想法或者是建議，可以和博主交流哦。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備