js计算器代码加减乘除_如何用jQuery做一个简易版计算器
經(jīng)過幾個(gè)小時(shí)地敲敲打打，終于把這一部分的代碼完成了。
這類問題的難點(diǎn)不在于布局，而是如何恰當(dāng)?shù)厥褂胘Query達(dá)成計(jì)算、交互的目的，比如儲(chǔ)存、顯示數(shù)值，數(shù)據(jù)類型的轉(zhuǎn)換等。
在聽老師講課之前的我，思路是混亂的，明明只是最簡(jiǎn)單的加減乘除，卻無從下手。
在做表格時(shí)，我一開始用的是嵌套的button標(biāo)簽，但過于繁瑣就舍棄了，改用td:hover來提示模塊。
如果搭建框架是實(shí)現(xiàn)簡(jiǎn)易版計(jì)算器的第一步，那么第二步就是將每一個(gè)表格中的數(shù)據(jù)傳輸?shù)絻?chǔ)存它的變量中，也就是下面js代碼中的equ變量，這里要用到$('#options').find('td').click(function(){...}）函數(shù)，以及構(gòu)造equ+=val字符串?dāng)?shù)組。
最后，在js代碼上出現(xiàn)了一些問題，最好還是單獨(dú)建一個(gè)js文件，方便查錯(cuò)和修改。
代碼塊附上：
<!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實(shí)現(xiàn)四則運(yùn)算</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('');}) })另外，這個(gè)計(jì)算器存在很大的缺陷，比如無法進(jìn)行多位數(shù)計(jì)算或者更加復(fù)雜的計(jì)算，有待改進(jìn)的地方還有很多，希望通過日后的學(xué)習(xí)能夠?qū)崿F(xiàn)。
總結(jié)
以上是生活随笔為你收集整理的js计算器代码加减乘除_如何用jQuery做一个简易版计算器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 内存速度决定电脑效率，慢了会卡成翔
- 下一篇： AMD锐龙处理器内存条选择指南，这三点你