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

最新推荐文章于 2024-03-10 13:55:43 发布

choumoyin5005

最新推荐文章于 2024-03-10 13:55:43 发布

阅读量1.3w

点赞数 8

文章标签： javascript 前端 ViewUI

原文链接：https://my.oschina.net/marina1216/blog/776295

版权

一个滑动条的实时显示：

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

转载于:https://my.oschina.net/marina1216/blog/776295

choumoyin5005

关注

8
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
html5自带滑动条(input type=range)实现实时显示滑动值

一个滑动条的实时显示：方法一：javascript原生代码实现 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> &...
复制链接

扫一扫