用html通过键盘输入两个数,输出两个数大小比较的结果;
时间: 2024-09-08 08:02:31 浏览: 41
当然,我们可以使用HTML、JavaScript来创建一个简单的交互式页面,让用户直接在网页上输入两个数字并进行比较。以下是一个基本的示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Number Comparison</title>
<style>
input[type=number] {
width: 50px;
}
button {
margin-top: 10px;
}
</style>
</head>
<body>
<label for="num1">Enter the first number:</label>
<input type="number" id="num1">
<br><br>
<label for="num2">Enter the second number:</label>
<input type="number" id="num2">
<br><br>
<button onclick="compareNumbers()">Compare</button>
<p id="result"></p>
<script>
function compareNumbers() {
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num1').value); // 注意这里应该是num2,不是num1
if (num1 < num2) {
document.getElementById('result').textContent = "The first number is smaller.";
} else if (num1 > num2) {
document.getElementById('result').textContent = "The first number is larger.";
} else {
document.getElementById('result').textContent = "Both numbers are equal.";
}
}
</script>
</body>
</html>
```
在这个例子中,我们创建了两个输入框(`<input type="number">`)用于接收用户的输入,然后添加了一个按钮,当点击时会触发`compareNumbers`函数。这个函数获取输入的两个数值,进行比较,并根据结果更新页面上的结果显示。