全国服务热线:4008-888-888

技术知识

html5完成滑块作用之type="range"特性

html5完成滑块作用之type="range"特性

1.html5中加上了有关滑块的标识,实际上际是拓展了input标识,type特性值为range。

2.觉得挺成心思,就做了1个有关滑块的动漫的事例,能够根据刚开始和完毕按钮来操纵滑块的拖动和终止,有点相近视頻的全自动播发和中止,另外还时刻显示信息了该滑块的值。

3.实际编码以下所示

<!DOCTYPE html>
<html>
<head>
    <title>数据递增组件</title>
    <!--引进jquery-->
    <script type="text/javascript" src="jquery⑴.8.3.js"></script>
</head>
<body>
    <!--做1个播发控制-->
    <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">
    //界定1个标志符,用于分辨客户点一下刚开始按钮或中止按钮
    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"特性,期待对大伙儿有一定的协助,也十分谢谢大伙儿对脚本制作之家网站的适用!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服