js计算器代码加减乘除_如何用jQuery做一个简易版计算器
生活随笔
收集整理的這篇文章主要介紹了
js计算器代码加减乘除_如何用jQuery做一个简易版计算器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
經過幾個小時地敲敲打打，終于把這一部分的代碼完成了。
這類問題的難點不在于布局，而是如何恰當地使用jQuery達成計算、交互的目的，比如儲存、顯示數值，數據類型的轉換等。
在聽老師講課之前的我，思路是混亂的，明明只是最簡單的加減乘除，卻無從下手。
在做表格時，我一開始用的是嵌套的button標簽，但過于繁瑣就舍棄了，改用td:hover來提示模塊。
如果搭建框架是實現簡易版計算器的第一步，那么第二步就是將每一個表格中的數據傳輸到儲存它的變量中，也就是下面js代碼中的equ變量，這里要用到$('#options').find('td').click(function(){...}）函數，以及構造equ+=val字符串數組。
最后，在js代碼上出現了一些問題，最好還是單獨建一個js文件，方便查錯和修改。
代碼塊附上：
<!DOCTYPE html> <html> <head><title>calculator</title><style type="text/css">th,td{width: 60px;height: 40px;text-align: center;border: 2px solid crimson;font-size: 20px;}table{border-collapse: collapse; }td:hover{background-color: antiquewhite;}#exp,#res{text-align: right;padding: 0px 10px 0px;}</style><script src="lib/jquery-3.4.1.min.js" ></script> </head> <body><h2>jquery實現四則運算</h2><hr><table id="options"><tr><th id="exp" colspan="4"></th></tr><tr><th id="res" colspan="4"></th></tr><tr><td>9</td><td>8</td><td>7</td><td id="cls">C</td></tr><tr><td>6</td><td>5</td><td>4</td><td>+</td></tr><tr><td>3</td><td>2</td><td>1</td><td>-</td></tr><tr><td>0</td><td>=</td><td>*</td><td>/</td></tr></table> </body> </html> <script src="js.js"></script>下面是js代碼
$(document).ready(function(){var equ='';$('#options').find('td').click(function(){var val=$(this).text(); equ+=val;$('#exp').text(equ);var num1=equ[0];var num2=equ[2];var operator=equ[1];if(operator=='+'){$('#res').text(parseInt(num1)+parseInt(num2));}else if(operator=='-'){$('#res').text(num1-num2);}else if(operator=='*'){$('#res').text(num1*num2);}else if(operator=='/'){$('#res').text(num1/num2);}})$('#cls').click(function(){equ='';$('#res').text(''); $('#exp').text('');}) })另外，這個計算器存在很大的缺陷，比如無法進行多位數計算或者更加復雜的計算，有待改進的地方還有很多，希望通過日后的學習能夠實現。
總結
以上是生活随笔為你收集整理的js计算器代码加减乘除_如何用jQuery做一个简易版计算器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 内存速度决定电脑效率，慢了会卡成翔
- 下一篇： AMD锐龙处理器内存条选择指南，这三点你