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

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

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

3.具体代码如下所示

<!DOCTYPE html><html><head>    <title>数字递增组件</title>    <!--引入jquery-->    <script type="text/javascript" src="jquery-1.8.3.js"></script></head><body>    <!--做一个播放控件-->    <div id="movie">        <!--定义滑块组件-->        <input type="range" id="slider" min="0" max="1000" step="1" value="0" οnchange="print()" />        <!--显示滑块组件的当前值-->        <p>当前值为:<span id="print">0</span></p>        <!--控制按钮-->        <button id="start" οnclick="start()">播放</button>        <button id="stop" οnclick="stop()">停止</button>    </div>    </body></html><script type="text/javascript">    //定义一个标识符,用于判断用户点击开始按钮或暂停按钮    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;    }</script>

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

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