如何用js做一个简易计算器
发布网友
发布时间：2022-04-27 09:30
共3个回答
懂视网
时间：2022-04-29 12:04
效果图：
首先，我们在body中制作页面需要的这些元素
<body> <input type="text" id="ipt1"> <select name="" id="slt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="ipt2"> <button id="btn">=</button> <input type="text" id="ipt3"> </body>
上面的id你可随意起，好用就行。
（推荐教程：javascript教程）
javascript代码：
<body>
<script>
//获取页面标签的元素
var inpt1 = document.getElementById("ipt1");
var inpt2 = document.getElementById("ipt2");
var inpt3 = document.getElementById("ipt3");
var selt = document.getElementById("slt");
var butn = document.getElementById("btn");
//给等于按钮添加点击事件
butn.onclick = function(){
//将三个输入框的value值分别赋给变量t1,t2,t3中
var t1 = parseFloat(ipt1.value);
var t2 = parseFloat(ipt2.value);
var t3 = parseFloat(ipt3.value);
//定义一个结果变量用于存放结果
var endValue;
//用switch语句来写运算语句
switch(slt.value){
case "+":
endValue = t1 + t2;
break;
case "-":
endValue = t1 - t2;
break;
case "*":
endValue = t1 * t2;
break;
case "/":
endValue = t1 / t2;
break;
default:
endValue = t1 + t2;
break;
}
//将结果放入结果输入框的value值中，在页面上显示
inpt3.value = endValue;
}
</script>
</body>相关视频教程推荐：javascript视频教程
热心网友
时间：2022-04-29 09:12
js做一个简易计算器具体如下：
<html>
<head>
<title>js运算</title>
<boby>
<table>
<tr>
<td>第一个数</td>
<td><input type="text" id="onesum"></td>
</tr>
<tr>
<td>运算符号</td>
<td><input type="text" id="fh"></td>
</tr>
<tr>
<td>第二个数</td>
<td><input type="text" id="twosum"></td>
</tr>
<tr>
<td>计算结果</td>
<td><input type="text" id="sum"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value=" 计算 " onclick="js()"></td>
</tr>
<table>
<script>
function js(){
var num1=document.getElementById("onesum").value;
var num2=document.getElementById("twosum").value;
var fh=document.getElementById("fh").value;
var sum=0;
nu
m1=Number(num1);
num2=Number(num2);
if(fh=='+')
{
sum=num1+num2;
}
else if(fh=='-')
{
sum=num1-num2;
}else if(fh=='*')
{
sum=num1*num2;
}else if(fh=='/')
{
sum=num1/num2;
}
//alert(sum);
document.getElementById("sum").value=sum;
}
</script>
</boby>
</html>
JavaScript 教程 JavaScript 是属于网络的脚本语言！ JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
热心网友
时间：2022-04-29 10:30
你这计算器.....为每个button添加单击事件，很浪费内存
<input type="text" id="num1"/><select id="cal">
<option value="1">+</option>
<option value="2">-</option>
<option value="3">*</option>
<option value="4">/</option>
</select>
<input type="text" id="num2" />
<input type="button" id="btn" value="计算"/>
<h2 id="result"></h2>
<script>
document.getElementById("btn").onclick=function(){
/*
判断输入是否为空(略)，为空则return
*/
//获取输入的值和运算符
var a=parseFloat(document.getElementById('num1').value);
var b=parseFloat(document.getElementById('num2').value);
var k=document.getElementById('cal').value;
console.log(a,b,k);
//运算符的值设置了1，2，3，4，option的value，即cal的value
switch(k){
case "1":
document.getElementById('result').innerHTML=a+b;
break;
case "2":
document.getElementById('result').innerHTML=a-b;
break;
case "3":
document.getElementById('result').innerHTML=a*b;
break;
case "4":
if(b==0){
alert("除数不能为0");
return;
}
else{
document.getElementById('result').innerHTML=a/b;
}
break;
}
}
</script>
