<!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>
.container {
width: 500px;
margin: 30px auto;
border: 1px solid;
user-select: none;
}
.container nav {
height: 50px;
line-height: 50px;
text-align: center;
border-bottom: 1px solid;
}
.container>div {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.container>input {
width: 99%;
height: 50px;
border: none;
outline: none;
font-size: 30px;
}
.container>div>div {
width: 24%;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid;
border-radius: 5px;
margin-bottom: 5px;
transition: .5s;
/* background-color: ; */
}
</style>
</head>
<body>
<div class="container">
<nav>
<span>计算器</span>
</nav>
<input type="text" id="inp">
<div id="bigdiv">
<div id="ss">%</div>
<div id="fang">平方</div>
<div id="clear">clear</div>
<div id="chu">÷</div>
<div id="">7</div>
<div id="">8</div>
<div id="">9</div>
<div id="cheng">*</div>
<div id="">4</div>
<div id="">5</div>
<div id="">6</div>
<div id="jian">-</div>
<div id="">1</div>
<div id="">2</div>
<div id="">3</div>
<div id="jia">+</div>
<div id="">clear</div>
<div id="">0</div>
<div id="dian">.</div>
<div id="over">=</div>
</div>
</div>
<script>
function $(id) {
return document.getElementById(id);
}
var str = '';
var str1 = '';
var result;
function chuli() {
result = $('inp').value.split(str1);
}
for (var j = 0; j < $('bigdiv').children.length; j++) {
(function (i) {
$('bigdiv').children[i].onclick = function (e) {
for (var j = 0; j < $('bigdiv').children.length; j++) {
$('bigdiv').children[j].style.background = '';
$('bigdiv').children[j].style.color = '';
}
this.style.background = 'black';
this.style.color = 'white';
if (!isNaN(this.innerHTML)) {
str = this.innerHTML;
$('inp').value = $('inp').value + str;
} else if (this.innerHTML === 'clear') {
$('inp').value = '';
str = '';
str1 = '';
result = null;
for (var j = 0; j < $('bigdiv').children.length; j++) {
$('bigdiv').children[j].style.background = '';
$('bigdiv').children[j].style.color = '';
}
} else if (this.id === 'dian') {
if (str !== '.') {
str = this.innerHTML;
$('inp').value = $('inp').value + str;
}
} else if (this.id === 'over') {
chuli();
if (!($('inp').value.indexOf('+') === -1)) {
$('inp').value = Number(result[0]) + Number(result[1]);
} else if (!($('inp').value.indexOf('-') === -1)) {
$('inp').value = Number(result[0]) - Number(result[1]);
} else if (!($('inp').value.indexOf('*') === -1)) {
$('inp').value = Number(result[0]) * Number(result[1]);
} else if (!($('inp').value.indexOf('÷') === -1)) {
$('inp').value = Number(result[0]) / Number(result[1]);
} else if (!($('inp').value.indexOf('%') === -1)) {
$('inp').value = Number(result[0]) % Number(result[1]);
} else if (!($('inp').value.indexOf('平方') === -1)) {
if (!result[1]) {
$('inp').value = Math.pow(Number(result[0]),2);
}else {
$('inp').value = Math.pow(Number(result[0]), Number(result[1]));
}
}
str = $('inp').value;
str1 = '';
result = null;
if ($('inp').value === 'NaN') {
$('inp').value = '请输入正确参数';
}
} else {
// 运算符只能输入一次且不能在开头输入
if (!str1 && str) {
str1 = this.innerHTML;
$('inp').value = $('inp').value + str1;
}
}
}
})(j)
}