以下是一个简单的例子,演示如何在 HTML 和 JavaScript 中使用数字输入框:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字输入框示例</title>
</head>
<body>
<label for="numberInput">输入数字:</label>
<input type="number" id="numberInput" min="1" max="100" step="1">
<button onclick="displayEnteredNumber()">显示输入的数字</button>
<script>
function displayEnteredNumber() {
// 获取数字输入框的值
var numberInput = document.getElementById('numberInput').value;
// 显示输入的数字
alert("输入的数字是: " + numberInput);
}
</script>
</body>
</html>
在这个例子中,我们创建了一个包含数字输入框和一个按钮的简单 HTML 页面。用户可以在输入框中输入数字,而按钮则通过 JavaScript 函数 displayEnteredNumber 获取输入框的值,并通过 alert 函数显示输入的数字。
请注意,type="number" 的输入框可以设置 min、max 和 step 属性,以限制用户输入的范围和步长。在实际应用中,你可以根据需要添加更多的验证和处理逻辑。
转载请注明出处:http://www.zyzy.cn/article/detail/6214/JavaScript 和 HTML DOM