本篇内容介绍了“javascript怎么实现简易的计算器功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
javascript实现简易计算器，只有两个input输入框，简单实现加减乘除：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>简易计算器</title> </head> <style> body{ border: 2px #00FFFF; } </style> <body background="img/2.jpg" > <p> <h2>简易计算器</h2> <input type="text" id="num1" width="50px" /> <select id="select"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="num2" width="50px"/> <br /> <input type="button" value="计算" onclick="cal()" /> <input id="result"></input> </p> </body> <script type="text/javascript"> function cal(){ var num1=document.getElementById("num1").value; var num2=document.getElementById("num2").value; var c = 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输入框：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>简易计算器</title> </head> <body background="img/2.jpg" > <h2>简易计算器</h2> <p> <input type="text" id="num1"/> <input type="button" value="计算" onclick="cal()" /> </p> <p> <span id="result" >计算结果：</span> </p> </body> <script type="text/javascript"> function cal(){ var num1=document.getElementById("num1").value; var result=document.getElementById("result"); try{ //有值就计算 var res=eval("("+num1+")"); result.innerHTML=res; }catch(e){ console.log(e); result.innerHTML="表达式异常"; } } </script></html>实现效果：
body里面的背景图片设置：
background-repeat: no-repeat;图片原大小
background-size:100%; 图片全铺满
“javascript怎么实现简易的计算器功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
