很高兴能够为您提供帮助！下面是一个
HTML+CSS+JS 的
大学期末作业范例，供您参考：
题目：制作一个简单的计算器
要求：
1. 界面简洁美观，符合人机工程学原理；
2. 能够进行加、减、乘、除四则运算；
3. 能够清空当前输入的数字。
实现步骤：
1. 编写
HTML 文件，包含一个计算器界面和几个按钮，如下所示：
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="UTF
-8">
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="result" value="0">
<div>
<button onclick="clearResult()">清空</button>
<button onclick="calculate('+')">+</button>
<button onclick="calculate('
-')">
-</button>
<button onclick="calculate('*')">*</button>
<button onclick="calculate('/')">/</button>
<button onclick="getResult()">=</button>
</div>
<div>
<button onclick="inputNumber('7')">7</button>
<button onclick="inputNumber('8')">8</button>
<button onclick="inputNumber('9')">9</button>
</div>
<div>
<button onclick="inputNumber('4')">4</button>
<button onclick="inputNumber('5')">5</button>
<button onclick="inputNumber('6')">6</button>
</div>
<div>
<button onclick="inputNumber('1')">1</button>
<button onclick="inputNumber('2')">2</button>
<button onclick="inputNumber('3')">3</button>
</div>
<div>
<button onclick="inputNumber('0')">0</button>
<button onclick="inputNumber('.')">.</button>
</div>
</div>
<script src="script.js"></script>
</body>
</
html>
```
2. 编写 CSS 文件，样式可以根据自己的喜好进行调整，如下所示：
```css
.calculator {
width: 200px;
margin: 50px auto;
border: 1px solid #ccc;
padding: 10px;
text
-align: center;
}
input[type="text"] {
width: 100%;
height: 30px;
margin
-bottom: 10px;
text
-align: right;
font
-size: 20px;
}
button {
width: 50px;
height: 30px;
margin: 5px;
font
-size: 16px;
background
-color: #ccc;
border: none;
border
-radius: 5px;
cursor: pointer;
}
button:hover {
background
-color: #aaa;
}
```
3. 编写 JS 文件，实现计算器的功能，如下所示：
```js
var result = document.getElementById("result");
function inputNumber(number) {
var value = result.value;
if (value == "0") {
result.value = number;
} else {
result.value += number;
}
}
function calculate(operator) {
var value = result.value;
if (value.indexOf(operator) ==
-1) {
result.value += operator;
}
}
function getResult() {
var value = result.value;
if (value.indexOf("+") !=
-1) {
var numbers = value.split("+");
result.value = parseFloat(numbers[0]) + parseFloat(numbers[1]);
} else if (value.indexOf("
-") !=
-1) {
var numbers = value.split("
-");
result.value = parseFloat(numbers[0])
- parseFloat(numbers[1]);
} else if (value.indexOf("*") !=
-1) {
var numbers = value.split("*");
result.value = parseFloat(numbers[0]) * parseFloat(numbers[1]);
} else if (value.indexOf("/") !=
-1) {
var numbers = value.split("/");
result.value = parseFloat(numbers[0]) / parseFloat(numbers[1]);
}
}
function clearResult() {
result.value = "0";
}
```
通过以上三步，就能够完成一个简单的计算器了。当然，还有很多功能可以扩展，比如添加括号、支持负数、增加科学计数法等，这些都可以根据自己的需要进行拓展。希望对您有所帮助！
1142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
