<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
}
.box{
width:100%;
height: 100%;
background:rgb(170, 212, 157);
overflow: hidden;
}
.b_center{
width: 400px;
height: 400px;
margin:80px auto 0 auto;
background: rgb(141, 199, 216);
}
.b_center p{
font-size:28px;
color: bisque;
line-height: 40px;
}
.calc{
width: 260px;
height: 180px;
margin: 80px auto 0 auto;
}
#result{
width: 260px;
height: 28px;
font-size: 24px;
line-height: 28px;
color: black;
}
#btn{
padding: 0;
border:0;
box-sizing:border-box;
width: 59px;
height: 36px;
margin: 4px 2px 4px 0px;
font-size: 20px;
color: #fff;
background: rgb(93, 145, 158);
}
#btn:nth-of-type(4n){
width: 62px;
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="b_center">
<p>我的计算器</p>
<div class="calc">
<!-- 将结果输出的文本框,也可以在其他标签中输出,但当用到h5中的各种标签时,
传入数字不能用value传入,而应该用innerHtml传入 -->
<input id="result" value="0">
<!-- 计算器上的所有数字都通过按钮进行输入,并设置其对应的value值,方便以后的操作,
当发生onclick点击事件时,调用say()函数 -->
<button id="btn" value="7" onclick="say('7')">7</button>
<button id="btn" value="8" onclick="say('8')">8</button>
<button id="btn" value="9" onclick="say('9')">9</button>
<button id="btn" value="+" onclick="say('+')">+</button>
<button id="btn" value="4" onclick="say('4')">4</button>
<button id="btn" value="5" onclick="say('5')">5</button>
<button id="btn" value="6" onclick="say('6')">6</button>
<button id="btn" value="-" onclick="say('-')">-</button>
<button id="btn" value="1" onclick="say('1')">1</button>
<button id="btn" value="2" onclick="say('2')">2</button>
<button id="btn" value="3" onclick="say('3')">3</button>
<button id="btn" value="*" onclick="say('*')">*</button>
<button id="btn" value="0" onclick="say('0')">0</button>
<button id="btn" value="C" onclick="say('C')">C</button>
<button id="btn" value="=" onclick="say('=')">=</button>
<button id="btn" value="/" onclick="say('/')">/</button>
</div>
</div>
</body>
<script>
//在js中找到id名为result的标签,方便以后通过value对其赋值
var resultInput=document.getElementById("result")
//立一个旗帜用于使数字可以连续输入,所以应当只有当键入为0-9时起作用
var isContinue=false;
//用来接收计算时运算符之前的值
var beforeName="";
//用来接收运算符
var opt="";
function say(value){
//根据所按按钮的value值,找到switch对应的case值,并进行相应操作
switch(value){
case "+":
case "-":
case "*":
case "/":
//当所按的是运算符时,opt接收运算符,并将之前的键入的数字值resultInput.value
//传到beforeName中接收
opt=value;
beforeName=resultInput.value;
isContinue=false;
break;
case "=":
//当所按的是=时,调用calc函数进行计算,参数分别为第一次传入的数,第二次传入的数和运算符,
//并将结果通过value使文本框获取最终结果
resultInput.value=calc(beforeName,resultInput.value,opt);
isContinue=false;
break;
case "C":
//当所按的是清零时,之前传入的数,运算符,第二次传入的数都应该进行清空
beforeName="";
opt="";
resultInput.value="";
isContinue=false;
break;
default:
//default代表其他情况,此时只剩下0-9
//当第一次进入此处时,flag一定为false,所以一定进入else语句中,使
//其通过赋值使文本框传入当前的value值,然后 isContinue旗帜为true
//如果下一次再次按数字进入此处,则进入isContinue==true语句,进行字
//符的拼接,并显现出来
if(isContinue==true){
resultInput.value+=value;
}else{
resultInput.value=value;
}
isContinue=true;
break;
}
}
//两数进行计算的函数
function calc(num1,num2,opt){
var result=0;
//因为计算的值都是从h5标签中传入的,所以得到的都是字符串类型的数字,
//可以通过Number进行强制转换变成数字型.-,/,*可以不用强制转化,因为
//它们具有隐式装换,使其自动变为数字型,而+却不行
switch(opt){
case "+":
result= Number(num1)+Number(num2);
break;
case "-":
result= Number(num1)-Number(num2);
break;
case "*":
result= Number(num1)*Number(num2);
break;
case "/":
result= Number(num1)/Number(num2);
break;
}
return result;
}
</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
<me
阅读背景：
使用JavaScript实现简易计算器_huhuhuja
来源：互联网
分享到：
