上一篇我们完成了简易计算器的界面布置，这一节我们来完成内部的运算逻辑，让计算器真正"跑起来”。
首先，我们要来做准备工作，也就是各种封装（这是完成整个项目使做的整理工作，让代码看上去更简洁，这里我把封装放到上面，方便理解下面的代码）
下面就是核心代码：
是判断代码执行的前置条件，用来处理不同的输入问题让代码更强壮。
下面是计算代码：主要将不同的符号情况区分开
代码：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jisuanqi</title>
<link rel="stylesheet" href="text.css">
<script>
window.onload=function(){
function Q(classname){
return document.querySelector(classname);
}
function G(IDname){
return document.getElementById(IDname);
}
function panduan(vstr){
if(vstr.charAt(0)=='.'){
return true;}
}
var v1=Q(".v1");
var v2=Q(".v2");
var v3=Q(".v3");
var btn=G("fuhao");
var res=Q(".res");
var num;
v1.addEventListener('input',calculateSum);
v3.addEventListener('input',calculateSum);
v2.addEventListener('input',calculateSum);
function calculateSum(){
if(panduan(v1.value)||panduan(v3.value)){
num=0;
}else if(v1.value.charAt(0)<'0'||v1.value.charAt(0)>'9'){
num=0;
}else if(v3.value.charAt(0)<'0'||v3.value.charAt(0)>'9'){
num=0;
} else{
if(v1.value==""||v3.value==""){
num=0;
}else{
if(v2.value=="+"){
num=parseFloat(v1.value)+parseFloat(v3.value);
res.innerHTML = num;
}else if(v2.value=="-"){
num=parseFloat(v1.value)-parseFloat(v3.value);
res.innerHTML = num;
}else if(v2.value=="*"){
num=parseFloat(v1.value)*parseFloat(v3.value);
res.innerHTML = num;
}else if(v2.value=="/"){
num=parseFloat(v1.value)/parseFloat(v3.value);
res.innerHTML = num;
}
}}
}
btn.onclick=function(){
v1.value="";
v2.value="";
v3.value="";
G("music").play();
}
}
</script>
</head>
<body>
<input type="text" class="v1">
<input type="text" class="v2">
<input type="text" class="v3">
<input type="button" id="fuhao" value="=">
<div class="res">0</div>
<audio src="../muyu/keymusic.wav" id="music"></audio>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
input.v1{
width: 100px;
height: 100px;
margin-left: 100px;
font-size:50px;
margin-top: 50px;
}
.v2{
width: 100px;
height: 100px;
margin-left: 50px;
text-align:center;
font-size:50px;
border-radius:50px;
}
.v3{
width: 100px;
height: 100px;
margin-left: 50px;
font-size:50px;
}
#fuhao{
width: 100px;
height: 100px;
margin-left: 50px;
border-radius:50px;
font-size:50px;
}
.res{
width: 100px;
height: 100px;
font-size:50px ;
margin-left: 750px;
margin-top: -80px;
border-radius:50px;
}
#fuhao:hover{
cursor: pointer}
原文链接: https://blog.csdn.net/daibadetianshi/article/details/138162598