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

一个滑动条的实时显示：

方法一：javascript原生代码实现

0

function change() {

var value = document.getElementById('range').value ;

document.getElementById('value').innerHTML = value;

}

方法二：jquery代码实现

实时监测input中值的变化

$(function(){

$('#username').bind('input propertychange', function() {

$('#result').html($(this).val());

});

})

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

var html="",num=1，inputid=1;

$.each(data, function(i,elem) {

html+="

";

html+="

"+num+"";

html+="

"+elem.name+"";

$.each(elem.contents, function(index,e) {

if(index==0) html+="

"+e.content+""+e.maxScore+"";

else html+="

"+e.content+""+e.maxScore+"";

var maxScore=Number(e.maxScore);

html+="

";

html+="";

html+="滑动以显示数值

";

inputid++;

});

num++;

});

html+="

建议"

$("tbody").html(html);

//实时显示滑动条的值

for(var i=1;i

$("#input"+i).bind('input propertychange',function () {

var thisButton=$(this).next().children("button");

thisButton.html($(this).val());

});

}