分别用javascript和jQuery编写计算器后的总结

1、innerText(),innerHtml()和value()是javascript中获取内容以及设置内容的方法。

    相对应的,在jQuery中,获取内容以及设置内容的方法为:text(),html(),val()。

    至于它们之间的具体区别,可以查看W3school文档。

2、在javascript中,设置点击事件用onclick()方法,即:element.onclick = function() { };

    而在jQuery中,把底层的onclick事件封装成了click()方法,所以设置点击事件时用click()方法,

    即:$("选择器").click(function() { });

3、我们知道javaScript中的浮点数运算精度存在问题,所以这里提供了两种解决javaScript中浮点数运算精度的方案:

    a、parseFloat(num.toFixed(10));

    b、parseFloat(num.toPrecision(12));

    注意:这里的num代表进行浮点数运算后的值。

4、遍历Nodelist对象的三种方法

    NodeList实例对象是一个类似数组的对象,它的成员是节点对象。Node.childNodes、document.querySelectorAll()返回的都是NodeList实例对象。NodeList 对象代表一个有序的节点列表。

    a、for循环遍历

    b、for...of遍历

    c、[].foreach.call(NodeList对象,function() { })

最后,附上计算器例子的链接:https://github.com/wjm1314/Calculator(纯javaScript编写,css部分采用了flex布局)

                                     https://github.com/wjm1314/Calculator_jQuery_version(jQuery编写,css部分采用了flex布局)


可以使用jQuery编写计算器功能。首先,需要在HTML创建一个表单元素来包含计算器的各个按钮和显示结果的区域。然后,在JavaScript编写代码来处理按钮的点击事件和计算结果。下面是一个简单jQuery计算器实现示例: HTML代码: ``` <form> <input type="text" id="result" readonly> <br> <input type="button" value="1" onclick="addNumber(1)"> <input type="button" value="2" onclick="addNumber(2)"> <input type="button" value="3" onclick="addNumber(3)"> <input type="button" value="+" onclick="addOperator('+')"> <br> <input type="button" value="4" onclick="addNumber(4)"> <input type="button" value="5" onclick="addNumber(5)"> <input type="button" value="6" onclick="addNumber(6)"> <input type="button" value="-" onclick="addOperator('-')"> <br> <input type="button" value="7" onclick="addNumber(7)"> <input type="button" value="8" onclick="addNumber(8)"> <input type="button" value="9" onclick="addNumber(9)"> <input type="button" value="*" onclick="addOperator('*')"> <br> <input type="button" value="0" onclick="addNumber(0)"> <input type="button" value="C" onclick="clearResult()"> <input type="button" value="=" onclick="calculate()"> <input type="button" value="/" onclick="addOperator('/')"> </form> ``` JavaScript代码: ``` var operator = ""; var operand1 = 0; var operand2 = 0; function addNumber(number) { $("#result").val($("#result").val() + number); } function addOperator(op) { operator = op; operand1 = $("#result").val(); $("#result").val(""); } function clearResult() { $("#result").val(""); } function calculate() { operand2 = $("#result").val(); var result = eval(operand1 + operator + operand2); $("#result").val(result); } ``` 该计算器实现比较简单,只能处理简单的四则运算,具体效果可见此处:https://codepen.io/chenhj/pen/oNjyqQq。当然,如果需要更加复杂的计算器需求,需要更完善的设计和实现
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值