怎么用html写一个简易的计算机
时间: 2024-01-01 13:06:59 浏览: 23
可以使用HTML和JavaScript来编写一个简易的计算器。
首先,我们需要创建一个HTML页面,包含两个输入框和一些按钮,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>简易计算器</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="text" id="num1">
<input type="text" id="num2">
<br>
<button onclick="add()">加</button>
<button onclick="sub()">减</button>
<button onclick="mul()">乘</button>
<button onclick="div()">除</button>
<br>
<p id="result"></p>
<script src="calculator.js"></script>
</body>
</html>
```
然后,我们需要编写一个JavaScript文件,来实现计算器的功能。以下是一个简单的实现:
```javascript
function add() {
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").innerHTML = result;
}
function sub() {
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
var result = num1 - num2;
document.getElementById("result").innerHTML = result;
}
function mul() {
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
var result = num1 * num2;
document.getElementById("result").innerHTML = result;
}
function div() {
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
var result = num1 / num2;
document.getElementById("result").innerHTML = result;
}
```
以上代码中,我们定义了四个函数,分别实现加、减、乘、除四种运算。每个函数首先获取输入框中的数字,然后执行对应的运算,并将结果显示在页面上。
最后,我们需要将以上两个文件放在同一个目录下,并将HTML文件中的`<script>`标签中的`src`属性指向JavaScript文件的路径。
完成以上步骤后,我们就可以在浏览器中打开HTML文件,使用简易计算器了。