html5 range 样式怎么设置起始结束

html5 range 样式怎么设置起始结束,第1张

CSS代码

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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6206040.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-18
下一篇 2023-03-18

发表评论

登录后才能评论

评论列表(0条)

保存