用js代码做一个简易计算器

越简单越好，只是能够实现加减乘除就行，代码不要太复杂了，请把完整代码弄出来，谢谢！！... 越简单越好，只是能够实现加减乘除就行，代码不要太复杂了，请把完整代码弄出来，谢谢！！展开

 我来答

4个回答

#热议# 应届生在签三方时要注意什么？

暗晓之夜
推荐于2017-09-17 · TA获得超过385个赞

知道小有建树答主

回答量：267

采纳率：0%

帮助的人：178万

我也去答题访问个人页

关注

展开全部

function test(){
     var txt1 = document.getElementById("txt1"),
         txt2 = document.getElementById("txt2"),
         txt3 = document.getElementById("txt3"),
         opt  = document.getElementById("sel");
     txt3.value =  eval(txt1.value + opt.value + txt2.value);//eval函数可计算某个字符串，并执行其中的的js代码
}

<input type="text" id="txt1" />
<select id="sel">
     <option value="+">+</option>
     <option value="-">-</option>
     <option value="*">*</option>
     <option value="/">/</option>
</select>
<input type="text" id="txt2" />
=
<input type="text" id="txt3" />
<input type="button" id="btn" value="计算" onclick="test()"/>

已赞过 已踩过<

评论收起

xiangyuecn
2013-12-15 · TA获得超过336个赞

知道小有建树答主

回答量：408

采纳率：0%

帮助的人：307万

我也去答题访问个人页

关注

展开全部

输入表达式【如：(1+1)*2+Math.pow(2,3)】：<input type="text" style="width:300px" />
<input type="button" value="计算" />结果：<span></span>
<script>
var span=document.querySelector("span");
document.querySelector("input[type=button]").addEventListener("click",function(){
    try{
        span.innerHTML=eval(document.querySelector("input[type=text]").value)||0;
    }catch(e){
        span.innerHTML="表达式不正确！";
    };
});
</script>

高端大气上档次，原理、输入简单，功能强大，输入Math.pow(2,3)计算2^3，不单单四则运算

已赞过 已踩过<

评论收起

鄞临娄溶溶
2020-04-05 · TA获得超过3721个赞

知道大有可为答主

回答量：3169

采纳率：25%

帮助的人：471万

我也去答题访问个人页

关注

展开全部

1234567function test(){ var txt1 = document.getElementById("txt1"), txt2 = document.getElementById("txt2"), txt3 = document.getElementById("txt3"), opt = document.getElementById("sel"); txt3.value = eval(txt1.value + opt.value + txt2.value);//eval函数可计算某个字符串，并执行其中的的js代码}1234567891011<input type="text" id="txt1" /><select id="sel"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option></select><input type="text" id="txt2" />=<input type="text" id="txt3" /><input type="button" id="btn" value="计算" onclick="test()"/>

已赞过 已踩过<

评论收起

单身Mvp
2013-12-14 · TA获得超过245个赞

知道小有建树答主

回答量：240

采纳率：100%

帮助的人：151万

我也去答题访问个人页

关注

展开全部

全部代码：
首先是css代码：命名为mycalculator.css

@charset "utf-8";
/* CSS Document */
.btn{
width:70px;
height:70px;
font-size:24px;
}
.btn1{
width:120px;
height:70px;
font-size:24px;
color:#F00;
}

下面是html代码：命名为mycalculator.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="mycalculator.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div style="text-align:center;background-color:#CCC;">
<form id="form1" name="form1" method="post" action="">
<table width="297" height="270" border="1" style="margin:opx;padding:opx;">
<tr>
<td height="52" colspan="4"><input name="result" type="text" id="result" value="" style="width:100%;height:100%;" disabled="true"/></td>
</tr>
<tr>
<td width="75"><input type="button" value="1" onclick="getNum(this)" id=
"1" class="btn"/></td>
<td width="75"><input type="button" value="2" onclick="getNum(this)" id="2" class="btn"/></td>
<td width="75"><input type="button" value="3" onclick="getNum(this)" id="3" class="btn"/></td>
<td width="75" height="75"><input type="button" value="+" onclick="yunsuan(this)" id="+" class="btn" style="color:#F00;"/></td>
</tr>
<tr>
<td width="75"><input type="button" value="4" onclick="getNum(this)" id=
"4" class="btn"/></td>
<td width="75"><input type="button" value="5" onclick="getNum(this)" id="5" class="btn"/></td>
<td width="75"><input type="button" value="6" onclick="getNum(this)" id="6" class="btn"/></td>
<td width="75" height="75"><input type="button" value="-" onclick="yunsuan(this)" id="-" class="btn" style="color:#F00;"/></td>
</tr>
<tr>
<td width="75"><input type="button" value="7" onclick="getNum(this)" id=
"7" class="btn"/></td>
<td width="75"><input type="button" value="8" onclick="getNum(this)" id="8" class="btn"/></td>
<td width="75"><input type="button" value="9" onclick="getNum(this)" id="9" class="btn"/></td>
<td width="75" height="75"><input type="button" value="*" onclick="yunsuan(this)" id="*" class="btn" style="color:#F00;"/></td>
</tr>
<tr >
<td width="75"><input type="button" value="back" onclick="backspace()" id=
"back" class="btn" style="color:#F00;"/></td>
<td width="75" height="75"><input type="button" value="clear" onclick="clearresult()" id="clear" class="btn" style="color:#F00;"/></td>
<td colspan="2" width="75" height="75" style="text-align:center;"><input type="button" value="=" onclick="resultNum()" id="btn1" class="btn1" /></td>
<td colspan="2" width="75" height="75" style="text-align:center;"> </td>
</tr>
</table>
</form>
</div>
<script language="javascript">
//运算表达式
var flag=0;
var first="";
//tem是临时变量
var tem="";

function clearresult(){
document.getElementById("result").value="";
first="";
document.getElementById("+").disabled=false;
document.getElementById("-").disabled=false;
document.getElementById("*").disabled=false;
tem="";
first="";
flag="";
}
//退格函数
function backspace(){
if(tem=="")
{
return null;
}
else
{
var m=document.getElementById("result").value;
var m1=m.substring(0,m.length-1);
document.getElementById("result").value=m1;
tem=m1;
}
}

function resultNum(){
var second=parseInt(document.getElementById("result").value);
if(flag==0)
{
document.getElementById("result").value="";
}
else if(flag==1)
{
document.getElementById("result").value=first+second;
}
else if(flag==2)
{
document.getElementById("result").value=first-second;
}
else if(flag==3){
document.getElementById("result").value=first*second;
}
first="";
tem=document.getElementById("result").value;
flag=0;
document.getElementById("+").disabled=false;
document.getElementById("-").disabled=false;
document.getElementById("*").disabled=false;
}

function getNum(event){
var tmp=document.getElementById(event.id).value;
tem=tem+tmp;
document.getElementById("result").value=tem;
}
//函数运算
function yunsuan(event){
var sign=document.getElementById(event.id).value;
if(tem=="")
{
return null;
}
else{

if(sign=="+")
{
flag=1;
}else if(sign=="-")
{
flag=2;
}
else{
flag=3;
}
//用first保存第一个参数值
first=parseInt(document.getElementById("result").value);
document.getElementById("result").value="";
//临时变量清空
tem="";
document.getElementById("+").disabled=true;
document.getElementById("-").disabled=true;
document.getElementById("*").disabled=true;
}
}
</script>
</body>
</html>

已赞过 已踩过<

评论收起

1条折叠回答

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

javascript学习-全方位讲解，覆盖9大类面试问题

coding.imooc.com

用js代码做一个简易计算器

您可能关注的内容

其他类似问题

为你推荐：