用JS实现简易计算器
首先创建结构和样式
<!DOCTYPE html> <html lang="en"head> Meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1.0"title>Document</style> body{ margin:0; padding background-color #abcdef; } .cal width560px height100px0 auto padding-top300px} body> div class="cal"> p> input type="text" class="num1" value="1"span ="sign">+span="num2">=="res">2="button"="+"="-"="*"="/"> divscript> > html>
="+"="btn"="-"="*"="/"> var cal=document.querySelector(".cal); num1cal.querySelector(.num1 num2.num2 sign.sign res.res); btnscal.querySelectorAll(.btn); btns[].onclickadd; btns[1subtract; btns[2multiply; btns[3divide; function add(){ sign.innerHTML+; //由于DOM获取到的值都是字符串形式，因此进行操作时需要先转为number类型 res.innerHTMLNumber(num1.value)Number(num2.value); } subtract(){ sign.innerHTML-; res.innerHTML multiply(){ sign.innerHTML*Number(num2.value); } divide(){ sign.innerHTML/Number(num2.value); } >
代码的优化：
循环实现绑定
给一个外部接口，用于新增运算
="btn" title="add"="subtract"="multiply"="divide"="%"="mod"给每个按钮绑定事件 for( i;i<btns.length;i++){ operate(i); } 运算函数 operate(i){ opbtns[i].value;获取运算 opNamebtns[i].title;获取运算名 绑定事件 btns[i].onclick(){ sign.innerHTMLop; res.innerHTMLoperation[opName](Number(num1.value),Number(num2.value)); } } operation{ add:(n1,n2){ return n1n2; },subtract:n2; },给一个新增运算的接口 addOperation:(name,fn){ 如果该运算不存在 if!this.name){ [name]fn; } } } 新增取余运算 operation.addOperation(mod,n2){ %n2; }); >
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
