用HTML写一个计算器功能的网页
时间: 2023-09-25 08:12:04 浏览: 41
好的,以下是用 HTML、CSS 和 JavaScript 写的一个简单的计算器网页示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
body {
background-color: #f7f7f7;
font-family: Arial, sans-serif;
}
.container {
margin: 50px auto;
width: 300px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
}
button {
font-size: 16px;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}
input {
width: 100%;
font-size: 20px;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="result" readonly>
<button onclick="clearResult()">清除</button>
<button onclick="calculate('+')">+</button>
<button onclick="calculate('-')">-</button>
<button onclick="calculate('*')">*</button>
<button onclick="calculate('/')">/</button>
<button onclick="calculate('%')">%</button>
<button onclick="calculate('=')">=</button>
<button onclick="addToResult('7')">7</button>
<button onclick="addToResult('8')">8</button>
<button onclick="addToResult('9')">9</button>
<button onclick="addToResult('4')">4</button>
<button onclick="addToResult('5')">5</button>
<button onclick="addToResult('6')">6</button>
<button onclick="addToResult('1')">1</button>
<button onclick="addToResult('2')">2</button>
<button onclick="addToResult('3')">3</button>
<button onclick="addToResult('0')">0</button>
<button onclick="addToResult('.')">.</button>
</div>
<script>
let result = document.getElementById('result');
function addToResult(value) {
result.value += value;
}
function clearResult() {
result.value = '';
}
function calculate(operator) {
try {
result.value = eval(result.value);
} catch (error) {
result.value = '错误';
}
if (operator) {
result.value += operator;
}
}
</script>
</body>
</html>
```
这个计算器支持加、减、乘、除、取模和小数点运算,也可以清除结果。用户可以通过点击按钮来输入数字和操作符。在输入完表达式后,点击等号按钮即可得到计算结果。