HTML5 range元素取值怎么获取
最新回答
梦里花落
2024-09-29 01:15:13
input { font-size: 14px; font-weight: bold; }
input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}
output {
display: block;
font-size: 5.5em;
font-weight: bold;
}
HTML代码：
<form method="post">
<h4>音量控制</h4>
<input type="range" name="range" min="0" max="10" step="1" value="" />
<output name="result"> </output>
</form>
JS代码：
(function() {
var f = document.forms[0],
range = f['range'],
result = f['result'],
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;
// 检测浏览器是否是足够酷
// 识别range input.
var o = document.createElement('input');
o.type = 'range';
if ( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。');
// 设置初始值
// 无论是否本地存储了，都设置值为5
range.value = cachedRangeValue;
result.value = cachedRangeValue;
// 当用户选择了个值，更新本地存储
range.addEventListener("mouseup", function() {
alert("你选择的值是：" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。");
localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。");
}, false);
// 滑动时显示选择的值
range.addEventListener("change", function() {
result.value = range.value;
}, false);
})();
http://www.zhangxinxu.com/study/201008/html5-range-input.html
橘萝卜蹲
2024-09-29 02:56:52
<script>
//表示滑动条以显示值互相等于
function slider_range(range,slider) {
document.getElementsByName(range.replace(2,1))[0].value = slider;
}
function range_slider(range,slider) {
document.getElementsByName(range.replace(1,2))[0].value = slider;
}
</script>
<input name="demo1" type="number" width="60px" onchange="range_slider(this.name,this.value)" value="100">
<input name="demo2" type="range" onchange="slider_range(this.name,this.value)" max="1000" min="0" value="100" step="1" >
逼啵逼啵
2024-09-29 02:26:28
<input type="range" id='r1'>
r=document.getElementById('r1');
s=r.value; //取值
热门标签
