1,效果图
2,代码如下:
<style>
.wrapper {
width: 200px;
padding: 8px;
background-color: #ffd859;
}
#box {
width: 200px;
height: 50px;
border: 1px solid gray;
background-color: #fff;
}
.main {
width: 200px;
text-align: center;
}
button {
width: 45px;
margin: 4px 0;
}
</style>
<body>
<div class="wrapper">
<div id="box"> </div>
<div class="main">
<button onclick="dj(1)">1</button>
<button onclick="dj(2)">2</button>
<button onclick="dj(3)">3</button>
<button onclick="dj(4)">4</button>
<button onclick="dj(5)">5</button>
<button onclick="dj(6)">6</button>
<button onclick="dj(7)">7</button>
<button onclick="dj(8)">8</button>
<button onclick="dj(9)">9</button>
<button onclick="dj(0)">0</button>
<button onclick="dj('+')">+</button>
<button onclick="dj('-')">-</button>
<button onclick="dj('*')">x</button>
<button onclick="dj('/')">/</button>
<button onclick="res()">=</button>
<button onclick="res2()">c</button>
</div>
</div>
<script>
let str = '';
let _box = document.getElementById('box');
function dj(add) {
str += add;
_box.innerHTML = str;
}
function res() {
let sum = eval(str);
_box.innerHTML = sum;
str = '';
}
function res2() {
_box.innerHTML = ''
str = ''
}
</script>
</body>