您的位置：首页 > Web前端 > HTML5

html5自带滑动条(input type=range)实现实时显示滑动值

2016-10-27 00:00 543 查看

一个滑动条的实时显示：

方法一：javascript原生代码实现

<!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>

方法二：jquery代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1 >实时监测input中值的变化</h1>
<input type="range" id="username" min="0" max="50000" step="10">
<div id="result"></div>
<script type='text/javascript'>
$(function(){

$('#username').bind('input propertychange', function() {
$('#result').html($(this).val());
});

})
</script>
</body>
</html>

多个滑动条的动态显示：下面摘录了一小段从ajax获得数据构造input的代码：

var html="",num=1，inputid=1;
$.each(data, function(i,elem) {
html+="<tr>";
html+="<td rowspan='"+elem.contents.length+"'>"+num+"</td>";
html+="<td rowspan='"+elem.contents.length+"'>"+elem.name+"</td>";
$.each(elem.contents, function(index,e) {
if(index==0) html+="<td>"+e.content+"</td><td>"+e.maxScore+"</td>";
else html+="<tr><td>"+e.content+"</td><td>"+e.maxScore+"</td>";
var maxScore=Number(e.maxScore);
html+="<td><div class='input-group'>";
html+="<input id='input"+inputid+"' class='form-control' type='range' max='"+maxScore+"' min='"+1+"' value='1' style='width: 270px;'/>";
html+="<span class='input-group-btn'><button class='btn btn-default' type='button' style='width:130px;'>滑动以显示数值</button></span></div></td>";
inputid++;
});
num++;
});
html+="<tr><td class='col-lg-1'>建议</td><td class='col-lg-11' colspan='11'><textarea rows='3' cols='80' class='form-control' id='suggest'></textarea></td></tr>"
$("tbody").html(html);

//实时显示滑动条的值
for(var i=1;i<inputid;i++){
$("#input"+i).bind('input propertychange',function () {
var thisButton=$(this).next().children("button");
thisButton.html($(this).val());
});
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航