<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style type="text/css">
.box{
width: 500px;
height: 750px;
background: #ff7623;
border-radius: 10px;
margin: 50px auto;
overflow: hidden;
}
.screen{
width: 470px;
height: 200px;
float: left;
margin-left: 15px;
margin-top: 15px;
background: #98cdee;
border-radius: 7px;
font-size: 60px;
text-align:right;
}
.control{
width: 470px;
height: 500px;
float: left;
margin-top: 15px;
margin-left: 15px;
background: #c1c1c1;
border-radius: 7px;
}
.btn{
width: 120px;
height: 120px;
border-radius: 50%;
background: #fff;
color: #333;
float: left;
margin-left: 5px;
margin-top: 5px;
text-align: center;
line-height: 120px;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}
.btn1{
width: 80px;
height: 80px;
line-height: 80px;
margin-left: 2px;
margin-top: 17px;
}
.num{
float: left;
width: 380px;
}
.count{
width: 90px;
float: right;
}
</style>
<script type="text/javascript">
window.onload=function () {
function $(x) {return document.querySelector(x);}
function $s(y) {return document.querySelectorAll(y);}
var screen = $(‘.screen‘);
var btn = $s(‘.num .btn‘);
var oBtn = $s(‘.btn1‘);
var result;
var X1;
var Y1;
var onOff;
var onOff1 =false;
function sum(x,y) {return x+y;}
function minus(x,y) {return x-y;}
function times(x,y) {return x*y;}
function divide(x,y) {return x/y;}
for (var i = 0; i < btn.length-2; i++) {
btn[i].index=i;
btn[i].onclick=function () {
if (onOff1==true) {screen.innerHTML=‘‘;onOff1=false;}
if (screen.innerHTML==‘0‘) {screen.innerHTML=‘‘}
screen.innerHTML+=btn[this.index].innerHTML}
}
//.的js效果要单独拿出来
btn[10].onclick=function () {
if (onOff1==true) {screen.innerHTML=‘‘;onOff1=false;}
if (screen.innerHTML==‘0‘) {screen.innerHTML=‘0‘}
screen.innerHTML+=‘.‘}
btn[11].onclick=function () {
screen.innerHTML=0
}
//onOff是作为一个判断依据，告诉计算器，现在进行的是什么运算
oBtn[0].onclick=function () {
X1=screen.innerHTML;
onOff=0;
onOff1 =true;
}
oBtn[1].onclick=function () {
X1=screen.innerHTML;
onOff=1;
onOff1 =true;
}
oBtn[2].onclick=function () {
X1=screen.innerHTML;
onOff=2;
onOff1 =true;
}
oBtn[3].onclick=function () {
X1=screen.innerHTML;
onOff=3;
onOff1 =true;
}
oBtn[4].onclick=function () {
if (onOff==0) {
Y1 = screen.innerHTML;
screen.innerHTML = sum(Number(X1),Number(Y1));
}
else if (onOff==1) {
Y1 = screen.innerHTML;
screen.innerHTML = minus(Number(X1),Number(Y1));
}
else if (onOff==2) {
Y1 = screen.innerHTML;
screen.innerHTML = times(Number(X1),Number(Y1));
}
else if(onOff==3) {
Y1 = screen.innerHTML;
screen.innerHTML = divide(Number(X1),Number(Y1));
}
//等号在运算后不添加新的Y1就不会进行任何事件
onOff=4;
}
}
</script>
</head>
<body>
<div class="box">
<div class="screen">0</div>
<div class="control">
<div class="num">
<div class="btn">9</div>
<div class="btn">8</div>
<div class="btn">7</div>
<div class="btn">6</div>
<div class="btn">5</div>
<div class="btn">4</div>
<div class="btn">3</div>
<div class="btn">2</div>
<div class="btn">1</div>
<div class="btn">0</div>
<div class="btn">.</div>
<div class="btn">c</div>
</div>
<div class="count">
<div class="btn btn1">+</div>
<div class="btn btn1">-</div>
<div class="btn btn1">x</div>
<div class="btn btn1">÷</div>
<div class="btn btn1">=</div>
</div>
</div>
</div>
</body>
</html>
一个简洁的计算器