使用JS實現(xiàn)簡易計算器
使用JS完成簡易計算器，供大家參考，具體內(nèi)容如下
要求：輸入的值只能是數(shù)字，使用正則表達式onchange():值改變時執(zhí)行事件onblur():鼠標移出時執(zhí)行事件
<!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' 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' onkeyup='this.value=this.value.replace(/[^d]/g,’’) '> = <input type='text' 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 // 動態(tài)控制精度長度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方法，調(diào)用起來更加方便。 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>
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. asp(vbs)Rs.Open和Conn.Execute的詳解和區(qū)別及&H0001的說明2. CSS hack用法案例詳解3. ASP 處理JSON數(shù)據(jù)的實現(xiàn)代碼4. PHP設計模式中工廠模式深入詳解5. 用css截取字符的幾種方法詳解（css排版隱藏溢出文本）6. asp中response.write("中文")或者js中文亂碼問題7. 將properties文件的配置設置為整個Web應用的全局變量實現(xiàn)方法8. ThinkPHP5實現(xiàn)JWT Token認證的過程(親測可用)9. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向10. jsp網(wǎng)頁實現(xiàn)貪吃蛇小游戲
網(wǎng)公網(wǎng)安備