input { font-size: 14pxfont-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)
})()
是只会影响到第三个么？？还是每两个都影响到另外一个
只跟第三个相关的：
<input class="range1" type="range" min="1" max="100"><input class="range2" type="range" min="1" max="100">
<input class="range3" type="range" min="1" max="100">
<script>
$(function(){
var r1 = $('.range1'),
r2 = $('.range2'),
r3 = $('.range3')
var v1=0,v2=0,v3=0
r1.val(0)
r2.val(0)
r3.val(0)
r1.change(function(){
v1 = $(this).val()
r3.val(100-v2-v1)
})
r2.change(function(){
v2 = $(this).val()
r3.val(100-v2-v1)
})
r3.change(function(){
v3 = $(this).val()
})
})
</script>
获取range的值就行了，然后将其显示出来，你实时改变range的值，显示的就会实时改变
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="range" type="range" min="0" max="50000" value="5"step="10" oninput="change()" onchange="change()">
<span id="value">0</span>
<script type='text/javascript'>
function change() {
var value = document.getElementById('range').value
document.getElementById('value').innerHTML = value
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）