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

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"属性，希望对大家有所帮助，也非常感谢大家对网站的支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！