javascript怎么实现简易的计算器功能

魁首哥

作者

javascript怎么实现简易的计算器功能

本篇内容介绍了“javascript怎么实现简易的计算器功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

javascript实现简易计算器，只有两个input输入框，简单实现加减乘除：

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>简易计算器</title></head><style>body{border:2px#00FFFF;}</style><bodybackground="img/2.jpg"><p><h2>简易计算器</h2><inputtype="text"id="num1"width="50px"/><selectid="select"><optionvalue="+">+</option><optionvalue="-">-</option><optionvalue="*">*</option><optionvalue="/">/</option></select><inputtype="text"id="num2"width="50px"/><br/><inputtype="button"value="计算"onclick="cal()"/><inputid="result"></input></p></body><scripttype="text/javascript">functioncal(){varnum1=document.getElementById("num1").value;varnum2=document.getElementById("num2").value;varc=document.getElementById("select").value;num1=parseFloat(num1);num2=parseFloat(num2);switch(c){case"+":document.getElementById("result").value=parseInt(num1)+parseInt(num2);break;case"-":document.getElementById("result").value=parseInt(num1)-parseInt(num2);break;case"*":document.getElementById("result").value=parseInt(num1)-parseInt(num2);break;case"/":document.getElementById("result").value=parseInt(num1)/parseInt(num2);break;}}</script></html>

效果截图：

JavaScript eval() 函数实现计算器：只有一个input输入框：

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>简易计算器</title></head><bodybackground="img/2.jpg"><h2>简易计算器</h2><p><inputtype="text"id="num1"/><inputtype="button"value="计算"onclick="cal()"/></p><p><spanid="result">计算结果：</span></p></body><scripttype="text/javascript">functioncal(){varnum1=document.getElementById("num1").value;varresult=document.getElementById("result");try{//有值就计算varres=eval("("+num1+")");result.innerHTML=res;}catch(e){console.log(e);result.innerHTML="表达式异常";}}</script></html>

实现效果：