本文详细介绍两种JavaScript简易计算器的实现方式。第一种通过双输入框与switch语句处理加减乘除，适合初学者理解逻辑；第二种利用eval函数解析单输入框表达式，代码更简洁。文章包含完整HTML结构、CSS背景设置及JS交互逻辑，附带效果截图，帮助开发者快速掌握基础前端交互开发。
JavaScript简易计算器实现概述
本文分享了一个使用JavaScript编写的简易计算器示例代码，供读者参考学习。
双输入框基础运算实现
该计算器采用简洁设计，仅包含两个输入框，用于实现基础的加、减、乘、除运算功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
</head>
<style>
body{
border: 2px #00FFFF;
}
</style>
<body background="img/2.jpg" style="background-repeat: no-repeat;margin-left: 10px;">
<p>
<h1>简易计算器</h1>
<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()" style="color: #FF0000;"/>
<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>以下是该计算器运行时的效果截图展示。
基于eval函数的单输入框实现
另一种实现方式是利用JavaScript的eval()函数，该版本仅使用一个输入框来接收用户输入的表达式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
</head>
<body background="img/2.jpg" style="background-repeat: no-repeat;margin-left: 10px;">
<h1>简易计算器</h1>
<p>
<input type="text" id="num1"/>
<input type="button" value="计算" onclick="cal()" />
</p>
<p>
<span id="result" style="color: #FF0000;">计算结果：</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>以下是eval()函数实现方式的运行效果截图。
界面背景样式设置
在HTML的body标签中，可以设置背景图片以美化界面。
背景图片的CSS属性设置包括：background-repeat: no-repeat; 用于保持图片原始大小，以及background-size:100%; 用于使图片铺满整个背景。
以上就是本文的全部内容，希望这些代码示例能对您的学习有所帮助，同时也欢迎大家继续支持本站。