JS實現加減乘除
這節課，將會繼續使用到if判斷，會讓同學們再看到一個新的，else if判斷語句，意思是：否則如果，是基於if下的判斷語句，就是說，if不成立則再來判斷else if，可以這樣，假如a=1,if(a=2){我是2}else if(a=1){我是1}else{我是3}，就是這樣的關聯，但有的同學問，直接用if一直判斷就好了，不需要用else if，是這樣的，程序運行，else if是基於if的對吧，那么它就是一條語句，如果相同的判斷語句多了，全用if，程序就會一個一個去執行，量就會加大，就會影響程序速度。
這節課其實最難的是，“正則表達式”，它特別厲害哦，它可以很簡單的來做，手機、IP、驗證碼、密碼、用戶名、地址等操作，可以節省更多的代碼和思維，它的特點就是，開頭和結尾都是用一根 / 斜杠的，里面則是正則內容，用做判斷特別給力。
上代碼，老師做一個初學者能看到的加減乘除法：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JS實現一個加減乘除</title> </head> <body> <h3>加減乘除法</h3> <input placeholder="第一個數字" id="num1" type="text"/> <select name="fuhao" id="fuhao"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input placeholder="第二個數字" id="num2" type="text"/> <button onclick="yunsuan()">運算</button> <input placeholder="得出結果" id="num3" type="text"/> <script> function yunsuan(){ //點擊事件運行后，獲取相關的所有元素id var num1 = document.getElementById("num1"); var num2 = document.getElementById("num2"); var num3 = document.getElementById("num3"); var fuhao = document.getElementById("fuhao"); // 下面這個是正則表達式，下面這個意思則是，只能輸入數字，字數必須有一個及以上 var zhengze = /^[0-9]{1,}$/; //這里面則是用判斷，使用正則的格式，來判斷 num1 和num2格式是否正確 if(!zhengze.test(num1.value)){ //老師判斷力用了一個 !(嘆號)，意思是取相反，它本身成立則會變成不成立 alert('只能輸入整數,數字喲'); //判斷如果不成立，彈出提示並讓代碼停止運行，就不往下面走了 return false; }else if(!zhengze.test(num2.value)){ //else if意思是 否則如果，是在if下面使用的一個判斷語句 alert('只能輸入整數,數字喲'); return false; } //先用判斷，判斷它的運算符號 //value 是獲取它的文本框里的值 select是下拉列表，也可以當做是文本框哦 if(fuhao.value == '+'){ //一個等號是賦值，兩個等號才是平常我們作比較說的“等於” //在JS里，+號不是兩個數字相加，而是‘拼接’，將兩個數字或者字符串拼接在一起 //這里我們做數字運算，就要用到parseInt方法，就它轉化成數字才能相加得出結果 num3.value = parseInt(num1.value)+parseInt(num2.value); }else if(fuhao.value == '-'){ num3.value = parseInt(num1.value)-parseInt(num2.value); }else if(fuhao.value == '*'){ num3.value = parseInt(num1.value)*parseInt(num2.value); }else if(fuhao.value == '/'){ num3.value = parseInt(num1.value)/parseInt(num2.value); } } </body> </html>
這里面的代碼還可以再節省一點，但老師先做出這樣，讓入門的同學更加看得懂。那么怎么節省呢，有興趣的同學自己去想一下咯！
這里老師只用了支持整數，還有小數呢...
這里老師每一個運算符一行代碼，就是4行，再加上判斷if就又是幾行，數學運算符不止這四個，那么我們就再一直無線延伸下去寫代碼嗎？那就太費事了，有辦法能做到，直接獲取運算符，然后得出結果，老師不吹牛，一行代碼直接搞定，那么有興趣的同學，自己去開發咯！