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

原创
2016/10/27 09:34
阅读数 8.8K

一个滑动条的实时显示:

方法一: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());
	});
}

 

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部