html5range显示数字

作者：管理员

发布时间：2021/6/21 18:29:05

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=4983

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


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


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


　　3.具体代码如下所示


　　数字递增组件


　　当前值为：0


　　播放


　　停止


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


　　var choose=true;


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


　　function print（）{


　　//获取信息


　　var value=parseFloat（$（"#slider"）。val（））;


　　//将信息显示


　　$（"#print"）。text（value）;


　　}


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


　　function changeVal（）{


　　//使用纯js实现


　　//使用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;


　　}


　　总结






关键字：jquery