最近在學習jquery框架，寫了好多小demo，這個案例講的就是jquery簡易版計算器。
本人目前承接各類小demo和作業，類型有HTML+CSS+JS/部分前端框架/JAVA/Android/PHP/高等數學，有意請私聊！
效果圖片如下：
第一張是剛運行在網頁時的效果圖。
第二張是輸入運算數和運算符時的效果圖。
第三張是錯誤輸入的運算符。
整體代碼如下：
<html> <head> <meta charset="utf-8" /> <title>jquery計算器</title> <!-- window.eval() --> <script type="text/javascript" src="jquery-3.3.1.js"></script> <style type="text/css"> .panel { margin: 0 auto; width: 275px; height: 310px; border: 2px solid #bbb; } #screen { width: 200px; height: 40px; border: 1px solid #bbb; margin: 7px 0px 0px 7px; float: left; } input { font-size: 20px; width: 50px; height: 50px; margin: 6px; } </style> <script> $(function() { /* 思路一：將點擊了input的選項的值傳到input上 思路二：利用原生的eval()函數計算結果，並進行賦值操作 思路三：清空按鈕特別處理一下 */ // 點擊按鈕 var clickBtn = ""; // count判斷是否是第一次點擊 var count = 0; //假如報錯 if (window.onerror) { return $("#screen").text("您的操作有誤哦！"); } $(":button").click(function() { // 選擇了清零按鈕 if ($(this).val() == 'C') { count = 0; return $("#screen").text(""); } // 選擇了相等按鈕 if ($(this).val() == '=') { try { var inputText = $("#screen").text(); clickBtn = window.eval(inputText); return $("#screen").text(window.eval(inputText)); } catch (err) { count = 0; return $("#screen").text("您的操作有誤哦！"); } } if (count == 0) { $("#screen").text(""); clickBtn = $(this).val(); } else { clickBtn += $(this).val(); } count++; return $("#screen").text(clickBtn); }); }); </script> </head> <body> <div class="panel"> <div> <p id="screen"></p> <input type="button" value="C" /> </div> <div> <input type="button" value="7" /> <input type="button" value="8" /> <input type="button" value="9" /> <input type="button" value="/" /> <input type="button" value="4" /> <input type="button" value="5" /> <input type="button" value="6" /> <input type="button" value="*" /> <input type="button" value="1" /> <input type="button" value="2" /> <input type="button" value="3" /> <input type="button" value="-" /> <input type="button" value="0" /> <input type="button" value="." /> <input type="button" value="=" /> <input type="button" value="+" /> </div> </div> </body> </html>重難點講解如下：
1.count在這裏起的具體作用是什麼？
count是一個計數器。
如果count爲0，它的意思是要麼我第一次打開這個頁面，要麼我點擊了清零（C）按鈕，即我下一步不管是點擊了運算符還是運算數，都是一個全新的操作。
它出現在三個地方，①第一次打開網頁運行這個計算器，②點擊了清零按鈕，③運算報錯出現“您的操作有誤”字樣。
2.clickBtn如何取值？
它主要是利用jquery的val()方法取input輸入框的value值，它結合count這個計數器可以實現一個比較巧妙的結果。
判斷是否是第一個使用這個運算器，如果不是第一次的話。你執行完一步操作，按下等號後出現了一個值，只要沒有報錯，這個值就可以作爲下一個運算的第一個運算數。
最後如果你對這個代碼有任何疑問，歡迎在下文給我評論留言，只要我看到了就一定會回覆噠！~~
