用HTML写一个计算器功能的网页
时间: 2023-04-01 10:02:19 浏览: 115
用 js+html 实现一个网页计算器
5星 · 资源好评率100%
好的,我可以回答这个问题。要实现一个计算器功能的网页,可以使用HTML、CSS和JavaScript来完成。HTML用于构建页面结构,CSS用于美化页面样式,JavaScript用于实现计算器的功能。以下是一个简单的HTML计算器示例:
```
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.container {
margin: 50px auto;
width: 300px;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 10px rgba(,,,.2);
}
input[type="button"] {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px;
width: 100%;
margin-bottom: 10px;
border-radius: 5px;
cursor: pointer;
}
input[type="text"] {
padding: 10px;
width: 100%;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="result" placeholder="" readonly>
<input type="button" value="1" onclick="addToResult('1')">
<input type="button" value="2" onclick="addToResult('2')">
<input type="button" value="3" onclick="addToResult('3')">
<input type="button" value="+" onclick="addToResult('+')">
<input type="button" value="4" onclick="addToResult('4')">
<input type="button" value="5" onclick="addToResult('5')">
<input type="button" value="6" onclick="addToResult('6')">
<input type="button" value="-" onclick="addToResult('-')">
<input type="button" value="7" onclick="addToResult('7')">
<input type="button" value="8" onclick="addToResult('8')">
<input type="button" value="9" onclick="addToResult('9')">
<input type="button" value="*" onclick="addToResult('*')">
<input type="button" value="" onclick="addToResult('')">
<input type="button" value="." onclick="addToResult('.')">
<input type="button" value="/" onclick="addToResult('/')">
<input type="button" value="C" onclick="clearResult()">
<input type="button" value="=" onclick="calculateResult()">
</div>
<script>
function addToResult(value) {
document.getElementById("result").value += value;
}
function clearResult() {
document.getElementById("result").value = "";
}
function calculateResult() {
var result = eval(document.getElementById("result").value);
document.getElementById("result").value = result;
}
</script>
</body>
</html>
```
这个计算器可以进行加、减、乘、除四则运算,也支持小数点和清空功能。
阅读全文