您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容介绍了“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怎么实现简易的计算器功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。