时间:2021-05-26
用JS实现简易计算器,供大家参考,具体内容如下
首先创建结构和样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin:0; padding:0; background-color: #abcdef; } .cal{ width:560px; height:100px; margin:0 auto; padding-top:300px; } </style></head><body> <div class="cal"> <p> <input type="text" class="num1" value="1"> <span class="sign">+</span> <input type="text" class="num2" value="1"> <span>=</span> <span class="res">2</span> </p> <p> <input type="button" value="+"> <input type="button" value="-"> <input type="button" value="*"> <input type="button" value="/"> </p> </div><script></script></body></html>然后添加Java script
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin:0; padding:0; background-color: #abcdef; } .cal{ width:560px; height:100px; margin:0 auto; padding-top:300px; } </style></head><body> <div class="cal"> <p> <input type="text" class="num1" value="1"> <span class="sign">+</span> <input type="text" class="num2" value="1"> <span>=</span> <span class="res">2</span> </p> <p> <input type="button" value="+" class="btn"> <input type="button" value="-" class="btn"> <input type="button" value="*" class="btn"> <input type="button" value="/" class="btn"> </p> </div><script> var cal=document.querySelector(".cal"); var num1=cal.querySelector(".num1"); var num2=cal.querySelector(".num2"); var sign=cal.querySelector(".sign"); var res=cal.querySelector(".res"); var btns=cal.querySelectorAll(".btn"); btns[0].onclick=add; btns[1].onclick=subtract; btns[2].onclick=multiply; btns[3].onclick=divide; function add(){ sign.innerHTML="+"; //由于DOM获取到的值都是字符串形式,因此进行操作时需要先转为number类型 res.innerHTML=Number(num1.value)+Number(num2.value); } function subtract(){ sign.innerHTML="-"; res.innerHTML=Number(num1.value)-Number(num2.value); } function multiply(){ sign.innerHTML="*"; res.innerHTML=Number(num1.value)*Number(num2.value); } function divide(){ sign.innerHTML="/"; res.innerHTML=Number(num1.value)/Number(num2.value); }</script></body></html>代码的优化:
循环实现绑定
给一个外部接口,用于新增运算
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin:0; padding:0; background-color: #abcdef; } .cal{ width:560px; height:100px; margin:0 auto; padding-top:300px; } </style></head><body> <div class="cal"> <p> <input type="text" class="num1" value="1"> <span class="sign">+</span> <input type="text" class="num2" value="1"> <span>=</span> <span class="res">2</span> </p> <p> <input type="button" value="+" class="btn" title="add"> <input type="button" value="-" class="btn" title="subtract"> <input type="button" value="*" class="btn" title="multiply"> <input type="button" value="/" class="btn" title="divide"> <input type="button" value="%" class="btn" title="mod"> </p> </div><script> var cal=document.querySelector(".cal"); var num1=cal.querySelector(".num1"); var num2=cal.querySelector(".num2"); var sign=cal.querySelector(".sign"); var res=cal.querySelector(".res"); var btns=cal.querySelectorAll(".btn"); //给每个按钮绑定事件 for(var i=0;i<btns.length;i++){ operate(i); } //运算函数 function operate(i){ var op=btns[i].value;//获取运算 var opName=btns[i].title;//获取运算名 //绑定事件 btns[i].onclick=function(){ sign.innerHTML=op; res.innerHTML=operation[opName](Number(num1.value),Number(num2.value)); } } var operation={ add:function(n1,n2){ return n1+n2; }, subtract:function(n1,n2){ return n1-n2; }, multiply:function(n1,n2){ return n1*n2; }, divide:function(n1,n2){ return n1/n2; }, //给一个新增运算的接口 addOperation:function(name,fn){ //如果该运算不存在 if(!this.name){ this[name]=fn; } } } //新增取余运算 operation.addOperation("mod",function(n1,n2){ return n1%n2; });</script></body></html>这样就圆满完成咯
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了js实现简易计算器的具体代码,供大家参考,具体内容如下Documentulli{list-style:none;line-height:50
使用html+css+js实现简易计算器,效果图如下:html代码如下calculatorDocumentCSS代码如下:*{border:none;font-
本文实例为大家分享了JS实现简易计算器的具体代码,供大家参考,具体内容如下简易计算器:1)选择需要运算的类型,输入对应的数字2)输入需要参与运算的数字3)输入“
Javascript实现计算器:系列文章:JS实现计算器详解及实例代码(一)Javascript实现计算器时间功能详解及实例(二)小型JavaScript计算器
本文实例为大家分享了js简易计算器的具体代码,供大家参考,具体内容如下代码如下简易计算器*{margin:0;padding:0;}.content{width