欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-12-02 19:31:30
这篇文章主要介绍了html5实现滑块功能之type="range"属性的相关资料,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下... 20-02-18...

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