今天分享一个计算器的代码实现效果
可以实现加,减,乘,除的简单运算
也是用js写的,喜欢的可以拿去玩玩,
有什么写得不好的,下面评论,我也好修改
这是HTML的效果图:
下面是一些代码的展示
这是HTML的代码
<h1>简易计算器</h1>
<div id="display" style="height: 80px;width: 400px;background-color: aquamarine;font-size: 30pt"></div>
<br/>
<input type="button" value="1" onclick="numberClick(1)" style="width: 90px;height: 50px"/>
<input type="button" value="2" onclick="numberClick(2)" style="width: 90px;height: 50px"/>
<input type="button" value="3" onclick="numberClick(3)" style="width: 90px;height: 50px"/>
<input type="button" value="+" onclick="setOperate('+')" style="width: 90px;height: 50px"/>
<br/><br/><br/>
<input type="button" value="4" onclick="numberClick(4)" style="width: 90px;height: 50px"/>
<input type="button" value="5" onclick="numberClick(5)" style="width: 90px;height: 50px"/>
<input type="button" value="6" onclick="numberClick(6)" style="width: 90px;height: 50px"/>
<input type="button" value="-" onclick="setOperate('-')" style="width: 90px;height: 50px"/>
<br/><br/><br/>
<input type="button" value="7" onclick="numberClick(7)" style="width: 90px;height: 50px"/>
<input type="button" value="8" onclick="numberClick(8)" style="width: 90px;height: 50px"/>
<input type="button" value="9" onclick="numberClick(9)" style="width: 90px;height: 50px"/>
<input type="button" value="*" onclick="setOperate('*')" style="width: 90px;height: 50px"/>
<br/><br/><br/>
<input type="button" value="0" onclick="numberClick(0)" style="width: 90px;height: 50px"/>
<input type="button" value="/" onclick="setOperate('/')" style="width: 90px;height: 50px"/>
<input type="button" value="%" onclick="setOperate('%')" style="width: 90px;height: 50px"/>
<input type="button" value="=" onclick="getResult()" style="width: 90px;height: 50px"/>
<br/><br/><br/>
<input type="button" value="清空" onclick="kong()" style="width: 90px;height: 50px"/>
<input type="button" value="回退" onclick="tui" style="width: 90px;height: 50px"/>
下面这是js的代码展示,两段代码直接复制下来就可以用
主要难点:数字的点击事件/显示按钮点击的内容/记录操作符/获取结果
<script type="text/javascript">
var number1 = "";
var number2 = "";
var opt = "";
//数字的点击事件
function numberClick(a){
if (opt == ""){
document.getElementById("display").innerText = "";
number1+=a;
} else {
number2+=a;
}
showStr();
}
//显示按钮的点击内容
function showStr() {
document.getElementById("display").innerText = "";
document.getElementById("display").innerText = number1+opt+number2;
}
//记录操作符
function setOperate(o){
opt = o;
showStr();
}
//获取结果
function getResult(){
var result = 0;
switch (opt){
case "+":
result = parseInt(number1)+parseInt(number2);
break;
case "-":
result = parseInt(number1)-parseInt(number2);
break;
case "*":
result = parseInt(number1)*parseInt(number2);
break;
case "/":
result = parseInt(number1)/parseInt(number2);
break;
case "%":
result = parseInt(number1)%parseInt(number2);
break;
default :
alert("非法操作!!!");
}
dispialStr("="+result);
opt = "";
}
var s="";
//结果显示
function dispialStr(str){
s = document.getElementById("display").innerText;
document.getElementById("display").innerText = (s+str);
}
//清空div
function kong(){
var number1 = "";
var number2 = "";
var opt = "";
s="";
document.getElementById("display").innerText=s;
}
</script>