計算器html5+css3+jQuery實現
阿新 • • 發佈：2018-12-28
下載地址：https://download.csdn.net/download/qq_31674229/10277981
小弟在面試中遇到一個前端的問題，公司採取的是機試，共有三個問題。
- 簡單的排序，敲敲程式碼，就搞定。
- 建立兩個執行緒，分別對資料進行操作。考察的是執行緒的使用。（繼承Thread類和實現Runnable介面）
- 使用html5+css3+jQuery實現一個計算器。設計圖如下：（公司給的沒這個美觀）
由於時間有限，計算器實現了頁面的排版，計算邏輯未實現，回來特別琢磨下，做了一個美觀的出來。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>計算器</title> <link rel="stylesheet" href="css/common.css"/> <link rel="stylesheet" href="css/font-awesome.min.css"/> </head> <body> <div class="wrap" id="wrap"> <div class="wrap_top"> <span class="slider" id="slider"></span> </div> <div class="wrap_center"> <input type="text" readonly id="display1" class="input_control_lg input_light text_right"/> <input type="text" readonly id="display2" class="input_control_lg input_light text_right"/> </div> <div class="wrap_footer"> <div class="div_flex div_justify_content div_row"> <button type="button" id="left_parenthesis" class="operate_group operator_group_light">(</button> <button type="button" id="right_parenthesis" class="operate_group operator_group_light">)</button> <button type="button" id="square_root" class="operate_group operator_group_light">√</button> <button type="button" id="square" class="operate_group operator_group_light">x²</button> </div> <div class="div_flex div_justify_content div_row"> <button type="button" id="clear" class="clear_light">C</button> <button type="button" id="backspace" class="backspace_light">⌫</button> <button type="button" id="ans" class="operand_group operand_group_light">Ans</button> <button type="button" id="divide" class="operate_group operator_group_light">÷</button> </div> <div class="div_flex div_justify_content div_row"> <button type="button" id="seven" class="operand_group operand_group_light">7</button> <button type="button" id="eight" class="operand_group operand_group_light">8</button> <button type="button" id="nine" class="operand_group operand_group_light">9</button> <button type="button" id="multiply" class="operate_group operator_group_light">×</button> </div> <div class="div_flex div_justify_content div_row"> <button type="button" id="four" class="operand_group operand_group_light">4</button> <button type="button" id="five" class="operand_group operand_group_light">5</button> <button type="button" id="six" class="operand_group operand_group_light">6</button> <button type="button" id="subtract" class="operate_group operator_group_light">-</button> </div> <div class="div_flex div_justify_content div_row"> <button type="button" id="one" class="operand_group operand_group_light">1</button> <button type="button" id="two" class="operand_group operand_group_light">2</button> <button type="button" id="three" class="operand_group operand_group_light">3</button> <button type="button" id="add" class="operate_group operator_group_light">+</button> </div> <div class="div_flex div_justify_content div_row"> <button type="button" id="percentage" class="operand_group operand_group_light">%</button> <button type="button" id="zero" class="operand_group operand_group_light">0</button> <button type="button" id="decimal" class="operand_group operand_group_light">.</button> <button type="button" id="equal" class="equal_light">=</button> </div> </div> </div> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/math.min.js"></script> <script type="text/javascript" src="js/common.js"></script> </body> </html>
只給出了前端介面部分，需參考可到下載地址下載全部程式碼。