用div布局画一个计算器
时间: 2023-05-12 09:04:57 浏览: 69
好的,以下是一个简单的用div布局画的计算器:
```html
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
border: 1px solid black;
padding: 10px;
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
margin-bottom: 10px;
}
.button {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 50px;
border: 1px solid black;
margin-right: 10px;
font-size: 20px;
cursor: pointer;
}
.button:hover {
background-color: gray;
}
#result {
display: flex;
justify-content: flex-end;
align-items: center;
height: 50px;
width: 100%;
border: 1px solid black;
margin-bottom: 10px;
padding: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div id="result"></div>
<div class="row">
<div class="button" onclick="addToResult('7')">7</div>
<div class="button" onclick="addToResult('8')">8</div>
<div class="button" onclick="addToResult('9')">9</div>
<div class="button" onclick="addToResult('/')">/</div>
</div>
<div class="row">
<div class="button" onclick="addToResult('4')">4</div>
<div class="button" onclick="addToResult('5')">5</div>
<div class="button" onclick="addToResult('6')">6</div>
<div class="button" onclick="addToResult('*')">*</div>
</div>
<div class="row">
<div class="button" onclick="addToResult('1')">1</div>
<div class="button" onclick="addToResult('2')">2</div>
<div class="button" onclick="addToResult('3')">3</div>
<div class="button" onclick="addToResult('-')">-</div>
</div>
<div class="row">
<div class="button" onclick="addToResult('0')">0</div>
<div class="button" onclick="addToResult('.')">.</div>
<div class="button" onclick="calculate()">=</div>
<div class="button" onclick="addToResult('+')">+</div>
</div>
</div>
<script>
let result = document.getElementById('result');
function addToResult(value) {
result.innerHTML += value;
}
function calculate() {
result.innerHTML = eval(result.innerHTML);
}
</script>
</body>
</html>
```
这个计算器使用了flex布局,将所有按钮和结果框都放在了一个容器中,每一行都是一个row div,每个按钮都是一个button div,通过onclick事件来实现按钮的功能。