用HTML设计简易加法计算器
时间: 2023-09-09 20:07:25 浏览: 110
制作一个简单加法计算器
好的,下面是一个简单的 HTML 加法计算器的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>加法计算器</title>
</head>
<body>
<h1>加法计算器</h1>
<form>
<label for="num1">第一个数字:</label>
<input type="number" id="num1" name="num1"><br><br>
<label for="num2">第二个数字:</label>
<input type="number" id="num2" name="num2"><br><br>
<button type="button" onclick="add()">计算</button><br><br>
<label for="result">计算结果:</label>
<input type="text" id="result" name="result" disabled>
</form>
<script>
function add() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
</script>
</body>
</html>
```
解释一下代码:
- `<!DOCTYPE html>` 声明文档类型为 HTML。
- `<html>` 标签表示 HTML 文档的根元素。
- `<head>` 标签包含了文档的元(meta)数据,如标题、链接到外部样式表等。
- `<title>` 标签定义文档的标题。
- `<body>` 标签包含了可见的页面内容。
- `<h1>` 标签定义了一个大标题。
- `<form>` 标签定义了一个用于用户输入的表单。
- `<label>` 标签定义了一个表单元素的标签。
- `<input>` 标签定义了一个表单元素,如文本框、单选框、复选框等。
- `type="number"` 表示输入框只允许输入数字。
- `type="text"` 表示输出框只显示文本。
- `disabled` 属性表示禁用该输入框,避免用户修改输出结果。
- `<button>` 标签定义了一个可点击的按钮。
- `onclick="add()"` 表示点击按钮时执行 `add()` 函数。
- `parseInt()` 函数将输入框的值转化为整数。
- `document.getElementById()` 函数获取指定 ID 的元素。
- `value` 属性获取输入框的值。
- `document.getElementById().value` 表示获取输入框的值。
- `document.getElementById().value = result` 表示将计算结果赋值给输出框。
阅读全文