使用JS實現簡易計算器
使用JS完成簡易計算器,供大傢參考,具體內容如下
要求:輸入的值隻能是數字,使用正則表達式
onchange():值改變時執行事件
onblur():鼠標移出時執行事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>計算器</title> </head> <body> <div style="text-align: center;"> <input type="text" id="1" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " > <select name="select" id="select"> <option value="null">請選擇</option> <option value="0">+</option> <option value="1">-</option> <option value="2">*</option> <option value="3">/</option> </select> <input type="text" id="2" onkeyup="this.value=this.value.replace(/[^\d]/g,'') "> = <input type="text" id="3" onkeyup="this.value=this.value.replace(/[^\d]/g,'') "><br><br> </div> <div style="text-align: center;"> <input type="button" id="button"value="計算"> </div> <script> function accAdd(arg1,arg2){ var r1,r2,m; try{ r1=arg1.toString().split(".")[1].length }catch(e){ r1=0 } try{ r2=arg2.toString().split(".")[1].length }catch(e){ r2=0 } m=Math.pow(10,Math.max(r1,r2)) return (arg1*m+arg2*m)/m } Number.prototype.add = function (arg){ return accAdd(arg,this); } function Subtr(arg1,arg2){ var r1,r2,m,n; try{ r1=arg1.toString().split(".")[1].length }catch(e){ r1=0 } try{ r2=arg2.toString().split(".")[1].length }catch(e){ r2=0 } m=Math.pow(10,Math.max(r1,r2)); // last modify by deeka // 動態控制精度長度 n=(r1>=r2)?r1:r2; return ((arg1*m-arg2*m)/m).toFixed(n); } function accMul(arg1,arg2) //乘法 { var m=0,s1=arg1.toString(),s2=arg2.toString(); try{ m+=s1.split(".")[1].length }catch(e){} try{ m+=s2.split(".")[1].length }catch(e){} return Number(s1.replace(".",""))*Number(s2.replace(".","")) / Math.pow(10,m) } //給Number類型增加一個mul方法,調用起來更加方便。 Number.prototype.mul = function (arg){ return accMul(arg, this); } function accDiv(arg1,arg2){ var t1=0,t2=0,r1,r2; try{ t1=arg1.toString().split(".")[1].length }catch(e){} try{ t2=arg2.toString().split(".")[1].length }catch(e){} with(Math){ r1=Number(arg1.toString().replace(".","")) r2=Number(arg2.toString().replace(".","")) return (r1/r2)*pow(10,t2-t1); } } Number.prototype.div = function (arg){ return accDiv(this, arg); } document.getElementById('button').onclick=function(){ var num1 =document.getElementById('1').value; var num2 =document.getElementById('2').value; var num3; var op =document.getElementById('select').value; switch(op){ case '0': num3= accAdd(num1,num2); break; case '1': num3= Subtr(num1,num2) ; break; case '2': num3=accMul(num1,num2) ; break; case '3': num3=accDiv(num1,num2) ; break; } document.getElementById('3').value=num3; } </script> </body> </html>
效果圖:
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- JavaScript實現下拉列表選擇框
- JavaScript實現簡易計算器案例
- JavaScript仿windows計算器功能
- JS實現時間選擇器
- 使用原生JS獲取select元素選中的value和text值