以下是一个简单的例子，演示如何在 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="rangeInput">选择范围 (1-100):</label>
<input type="range" id="rangeInput" min="1" max="100" value="50" step="1">
<p id="rangeValue">当前值: 50</p>
<script>
// 获取范围输入框和显示值的元素
var rangeInput = document.getElementById('rangeInput');
var rangeValueDisplay = document.getElementById('rangeValue');
// 在滑块值变化时更新显示的值
rangeInput.addEventListener('input', function() {
rangeValueDisplay.textContent = '当前值: ' + rangeInput.value;
});
// 通过按钮显示当前值
function displayCurrentValue() {
alert('当前值是: ' + rangeInput.value);
}
</script>
<button onclick="displayCurrentValue()">显示当前值</button>
</body>
</html>
在这个例子中，我们创建了一个包含范围输入框、一个显示当前值的元素和一个按钮的简单 HTML 页面。用户可以通过滑块选择一个值，并且在滑块值变化时，JavaScript 中的事件监听器会更新显示的当前值。
请注意，type="range" 的输入框可以设置 min、max、value 和 step 属性，以定义范围、初始值和步长。在实际应用中，你可以根据需要添加更多的验证和处理逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/6215/JavaScript 和 HTML DOM