html range 显示数字,html5实现滑块功能之type="range"属性

html5实现滑块功能之type="range"属性

1.html5中添加了关于滑块的标签,其实际是扩展了input标签,type属性值为range。

2.感觉挺有意思,就做了一个关于滑块的动画的例子，可以通过开始和结束按钮来控制滑块的滑动和停止，有点类似视频的自动播放和暂停,同时还时时显示了该滑块的值。

3.具体代码如下所示

//定义一个标识符,用于判断用户点击开始按钮或暂停按钮

var choose = true;

//此函数用于显示滑块的当前值

function print(){

//获取信息

var value = parseFloat($("#slider").val());

//将信息显示

$("#print").text(value);

}

//此函数负责修改value的值

function changeVal(){

//使用纯js实现

/*var value = parseFloat(document.getElementById("slider").value);

//显示信息

document.getElementById("print").innerHTML=value;

if(value==1000){

return;

}else{

document.getElementById("slider").value = value+10;

}*/

//使用jquery实现

var value = parseFloat($("#slider").val());

//显示信息

print();

//修改滑块的值

if(value==1000 || choose == false){

return;

}else{

$("#slider").val(value+1);

}

}

//此函数负责开始按钮

function start(){

choose = true;

setInterval("changeVal()",10);

}

//此函数负责暂停按钮

function stop(){

choose = false;

}

总结

以上所述是小编给大家介绍的html5实现滑块功能之type="range"属性，希望对大家有所帮助，也非常感谢大家对脚本之家网站的支持！