javascript怎么实现计算器
2个回答
展开全部
JavaScript计算器源代码：
HTML部分：
<div id="result" style="width:280px;height:30px;text-align:right;font-size:20px;font-weight:bold;padding-left:10px;">0</div>
<div id="panel" style="width:280px;height:220px;padding:10px 0 0 10px;">
<input type="button" value="7" onclick="setValue(7)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="8" onclick="setValue(8)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="9" onclick="setValue(9)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="*" onclick="setValue('*')" style="width:60px;height:50px;font-size:20px;font-weight:bold;" /><br/>
<input type="button" value="4" onclick="setValue(4)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="5" onclick="setValue(5)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="6" onclick="setValue(6)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="/" onclick="setValue('/')" style="width:60px;height:50px;font-size:20px;font-weight:bold;" /><br/>
<input type="button" value="1" onclick="setValue(1)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="2" onclick="setValue(2)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="3" onclick="setValue(3)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="+" onclick="setValue('+')" style="width:60px;height:50px;font-size:20px;font-weight:bold;" /><br/>
<input type="button" value="." onclick="setValue('.')" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="0" onclick="setValue(0)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="-" onclick="setValue('-')" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="=" onclick="setValue('=')" style="width:60px;height:50px;font-size:20px;font-weight:bold;" /><br/>
</div>
Js功能实现部分：
<script type="text/javascript">
var result=0;//存储计算器结果的变量
var isBegin=true;//表明显示的是结果（true）还是运算中的变量
var resultPanel=document.getElementById("result");
function setValue(val)
{
if(val=="=")
{
eval("result="+resultPanel.innerHTML);
resultPanel.innerHTML=result;
isBegin=true;
}else{
if(!isBegin){
resultPanel.innerHTML+=val;
}else{
resultPanel.innerHTML=val;
isBegin=false;
}
}
}
</script>
HTML部分：
<div id="result" style="width:280px;height:30px;text-align:right;font-size:20px;font-weight:bold;padding-left:10px;">0</div>
<div id="panel" style="width:280px;height:220px;padding:10px 0 0 10px;">
<input type="button" value="7" onclick="setValue(7)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="8" onclick="setValue(8)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="9" onclick="setValue(9)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="*" onclick="setValue('*')" style="width:60px;height:50px;font-size:20px;font-weight:bold;" /><br/>
<input type="button" value="4" onclick="setValue(4)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="5" onclick="setValue(5)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="6" onclick="setValue(6)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="/" onclick="setValue('/')" style="width:60px;height:50px;font-size:20px;font-weight:bold;" /><br/>
<input type="button" value="1" onclick="setValue(1)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="2" onclick="setValue(2)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="3" onclick="setValue(3)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="+" onclick="setValue('+')" style="width:60px;height:50px;font-size:20px;font-weight:bold;" /><br/>
<input type="button" value="." onclick="setValue('.')" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="0" onclick="setValue(0)" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="-" onclick="setValue('-')" style="width:60px;height:50px;font-size:20px;font-weight:bold;" />
<input type="button" value="=" onclick="setValue('=')" style="width:60px;height:50px;font-size:20px;font-weight:bold;" /><br/>
</div>
Js功能实现部分：
<script type="text/javascript">
var result=0;//存储计算器结果的变量
var isBegin=true;//表明显示的是结果（true）还是运算中的变量
var resultPanel=document.getElementById("result");
function setValue(val)
{
if(val=="=")
{
eval("result="+resultPanel.innerHTML);
resultPanel.innerHTML=result;
isBegin=true;
}else{
if(!isBegin){
resultPanel.innerHTML+=val;
}else{
resultPanel.innerHTML=val;
isBegin=false;
}
}
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如下代码仅仅实现了加、减、乘、除四个小功能。
<script>
window.onload=function (){
var oText1=document.getElementById('txt1');
var oText2=document.getElementById('txt2');
var oSel=document.getElementById('sel1');
var oBtn=document.getElementById('btn');
oBtn.onclick=function (){
var n1=parseFloat(oText1.value);
var n2=parseFloat(oText2.value);
var a=oSel.value;
'12+5'
var res=0;
switch (a)
{
case '+':
res=n1+n2;
break;
case '-':
res=n1-n2;
break;
case '*':
res=n1*n2;
break;
case '/':
res=n1/n2;
break;
}
alert(res);
};
};
</script>
</head>
<body>
<input type="text" id="txt1" />
<select id="sel1">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="txt2" />
<input type="button" value="计算" id="btn" />
</body>
定义一个select选择器，进行选择计算方式。点击按钮计算，将计算出结果。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
