Javascript學習：綜合案例2--網頁計算器
阿新 • • 發佈：2019-02-15
js自學網站推薦：http://www.51zxw.net/study.asp?vip=4857021
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ margin: 20px auto; border: 5px outset orange; } #tab_1,#tab_2,#tab_3{ border: 3px outset rgba(15,10,10,0.3); } td{ height: 30px; background:#ccc; } input{ outline: none; box-shadow: 2px 2px 8px rgba(100,100,100,0.8) inset; } [type=button]{ width:60px; height:40px; border-radius: 5px; background: #fff; box-shadow: 2px 2px 8px rgba(100,100,100,0.8) inset; } #txtnum{ background: #fff; width:100%; height:44px; text-align: right; font-size:22px; } .btnbox{ padding: 5px auto; text-align: center; } </style> </head> <body> <table cellspacing="0"> <tr> <td colspan="2"><input type="text" id="txtnum" value="0"></td> <td class="btnbox"> <input type="button" value="清除" onclick="txtnum.value='0';result=0"> <input type="button" value="退格" onclick="backspace()"> </td> </tr> <tr> <td> <table id="tab_1"> <tr> <td><input type="button" value="sin" onclick="math('sin')"></td> <td><input type="button" value="cos" onclick="math('cos')"></td> <td><input type="button" value="tan" onclick="math('tan')"></td> </tr> <tr> <td><input type="button" value="asin" onclick="math('asin')"></td> <td><input type="button" value="acos" onclick="math('acos')"></td> <td><input type="button" value="atan" onclick="math('atan')"></td> </tr> <tr> <td><input type="button" value="PI" onclick="math('PI')"></td> <td><input type="button" value="1/x" onclick="math('1/x')"></td> <td><input type="button" value="exp" onclick="math('exp')"></td> </tr> <tr> <td><input type="button" value="lnx" onclick="math('lnx')"></td> <td><input type="button" value="lgx" onclick="math('lgx')"></td> <td><input type="button" value="n!" onclick="math('n!')"></td> </tr> </table> </td> <td> <table id="tab_2"> <tr> <td><input type="button" value="7" onclick="num(7)"></td> <td><input type="button" value="8" onclick="num(8)"></td> <td><input type="button" value="9" onclick="num(9)"></td> </tr> <tr> <td><input type="button" value="4" onclick="num(4)"></td> <td><input type="button" value="5" onclick="num(5)"></td> <td><input type="button" value="6" onclick="num(6)"></td> </tr> <tr> <td><input type="button" value="1" onclick="num(1)"></td> <td><input type="button" value="2" onclick="num(2)"></td> <td><input type="button" value="3" onclick="num(3)"></td> </tr> <tr> <td><input type="button" value="0" onclick="num(0)"></td> <td><input type="button" value="." onclick="decimal()"></td> <td><input type="button" value="=" onclick="compute('=')"></td> </tr> </table> </td> <td> <table id="tab_3"> <tr> <td><input type="button" value="+" onclick="compute('+')"></td> <td><input type="button" value="取整" onclick="math('int')"></td> </tr> <tr> <td><input type="button" value="-" onclick="compute('-')"></td> <td><input type="button" value="取餘" onclick="compute('%')"></td> </tr> <tr> <td><input type="button" value="*" onclick="compute('*')"></td> <td><input type="button" value="x^y" onclick="compute('x^y')"></td> </tr> <tr> <td><input type="button" value="/" onclick="compute('/')"></td> <td><input type="button" value="+/-" onclick="plusMinus()"></td> </tr> </table> </td> </tr> </table> <script> var Boo = false; var result = 0 ; var ope; //儲存計算符號的變數 /*自定義通過Id來獲取元素的函式 */ function $(id) { return document.getElementById(id); }; /*輸入小數點*/ function decimal() { var txt = $("txtnum"); //判斷是否按下運算子號,若按下運算子，文字框清0； if(Boo){ txt.value = "0." ; }else{ //indexOf:檢索數值中是否已有小數點 if(txt.value.indexOf(".")==-1){ txt.value += "." ; } } }; /*顯示屏獲取按鍵數字 */ function num(num) { var txt = $("txtnum"); //判斷是否按下運算子號,若按下運算子，文字框清0； if(Boo){ txt.value = num ; Boo=false; }else{ //判斷初始數字是否為0 if(txt.value=="0"){ txt.value = num ; }else{ txt.value += num ; } } Boo=false; } function compute(op) { var onum = $("txtnum").value; if(onum==" "){onum=0}; Boo = true; switch(ope){ case "+" : result += parseFloat(onum);break; case "-" : result -= parseFloat(onum);break; case "*" : result *= parseFloat(onum);break; case "/" : result /= parseFloat(onum);break; case "=" : result = parseFloat(onum);break; case "%" : result %= onum;break; case "x^y" : result =Math.pow(result,onum);break; default: result = parseFloat(onum); } $("txtnum").value = result; ope = op; } //正負鍵：取反 function plusMinus(){ var onum = $("txtnum").value; if(onum==""){ alert("資料不能為空！"); }else{ $("txtnum").value *= -1; }; } //退格鍵 function backspace(){ var txt = $("txtnum"); txt.value = txt.value.substring(0,txt.value.length-1); if(txt.value==""){ txt.value=0; } } function math(op){ var onum = $("txtnum").value; if(onum==""){alert("資料不能為空！");} Boo = true; with(Math){ switch (op){ case "sin": result = sin(onum);break; case "cos": result = cos(onum);break; case "tan": result = tan(onum);break; case "asin": result = asin(onum);break; case "acos": result = acos(onum);break; case "atan": result = atan(onum);break; case "PI": result = PI;break; case "1/x": result = 1/onum;break; case "exp": result = exp(onum);break; case "lnx": result = log(onum);break; case "lgx": result = log(onum)/log(10);break; case "i": result = floor(onum);break; case "int" :result =round(onum);break; //取整（四捨五入） case "n!": result = jc(onum);break; //求階乘 default: result = parseFloat(onum); }; $("txtnum").value = result; }; }; //階乘計算 function jc(a){ if(a==1){ return 1; }else{ return jc(a-1)*a; } } /* * indexOf() 方法可返回某個指定的字串值在字串中首次出現的位置。 * 如果要檢索的字串值沒有出現，則該方法返回 -1。 * * substring() 方法用於提取字串中介於兩個指定下標之間的字元。 * * with 語句用於設定程式碼在特定物件中的作用域。 * * */ </script> </body> </html>
