JQ實現計算器功能
- 2019 年 12 月 27 日
- 筆記
下面是計算器的實現方法，主要是使用了JQ，設計原型依據小米手機計算器，實現了基礎的單步驟運算，做了簡單的校驗判斷，實現了加減乘除取余等功能；
實現效果如下圖：
下面是程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>計算器</title> <style> td{ width: 50px; height: 50px; line-height: 50px; text-align: center; border:solid 1px #999; cursor: pointer; } td:hover{ border:solid 1px #005ca9; } #res{ height: 55px; width: 223px; border: solid 1px #999; outline: none; cursor: not-allowed; word-wrap: break-word; } </style> </head> <body> <div id="res"></div> <table> <tbody> <tr> <td>AC</td> <td>刪除</td> <td>%</td> <td>/</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> <td>*</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>-</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>+</td> </tr> <tr> <td></td> <td>0</td> <td>.</td> <td>=</td> </tr> </tbody> </table> <script src="jquery.min.js"></script> <script> //計算時間 $("td").click(function(){ var res = 0; //獲取值 var v = $(this).text(); if(!v){ return true; } var nowVal = $("#res").text(); //計算一次後需要重置 if(nowVal.indexOf('=') > 0){ console.log("重新計算"); $("#res").html(''); } //如果字元串以 符號 開頭需提醒 var mark = ['+','-','*','/','%']; if(mark.indexOf(v) > -1 && v.length == 1 && nowVal.length == 0){ alert("請先輸入分母"); $("#res").html(''); return false; } //如果字元串以 . 開頭需提醒 if(v == '.' && v.length == 1 && nowVal.length == 0){ alert("請先輸入正確數字"); $("#res").html(''); return false; } switch(v){ case 'AC': console.log("全清"); $("#res").html(''); break; case '=': console.log("等於"); $("#res").append('='+eval(nowVal)); break; case '刪除': console.log("刪除"); $("#res").html(nowVal.substr(0,nowVal.length-1)); break; default: console.log("寫入"); $("#res").append(v); } }); </script> </body> </html>
