HTML5 implements the type = “range” attribute of slider function

Time:2020-4-18

HTML5 implements the type = “range” attribute of slider function

1. HTML 5 adds a tag about the slider, which actually extends the input tag and the value of the type attribute is range.

2. It’s very interesting. I made an example about the animation of the slider. I can control the slider’s slide and stop by the start and end buttons. It’s similar to the video’s auto play and pause, and it also shows the value of the slider at all times.

3. The specific code is as follows

<!DOCTYPE html>
<html>
<head>
    < title > digital incremental component < / Title >
    <! -- introduce jQuery -- >
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
    Make a play control -- >
    <div id="movie">
        <! -- define slider component -- >
        <input type="range" id="slider" min="0" max="1000" step="1" value="0" οnchange="print()" />
        <! -- display the current value of the slider component -- >
        <p>The current value is: < span id = "print" > 0 < / span ></p>
        <! -- control buttons -- >
        < button id = "start" ο nclick = "start()" > play < / button >
        < button id = "stop" ο nclick = "stop()" > stop < / button >
    </div>
    
</body>
</html>

<script type="text/javascript">
    //Define an identifier to judge whether the user clicks the start button or the pause button
    var choose = true;

    //This function displays the current value of the slider
    function print(){
        //Access to information
        var value = parseFloat($("#slider").val());
        //Display information
        $("#print").text(value);
    }

    //This function is responsible for modifying the value of value
    function changeVal(){
        //Using pure JS implementation
        /*var value = parseFloat(document.getElementById("slider").value);
        //Display information
        document.getElementById("print").innerHTML=value;
        if(value==1000){
            return;
        }else{
            document.getElementById("slider").value = value+10;
        }*/

        //Using jQuery implementation
        var value = parseFloat($("#slider").val());
        //Display information
        print();
        //Change the value of the slider
        if(value==1000 || choose == false){
            return;
        }else{
            $("#slider").val(value+1);
        }
    }
    //This function is responsible for the start button
    function start(){
        choose = true;
        setInterval("changeVal()",10);
    }

    //This function takes care of the pause button
    function stop(){
        choose = false;
    }
</script>

summary

The above is the type = “range” attribute of HTML5’s slider function introduced by Xiaobian. I hope it can help you, and thank you very much for your support for the developepaer website!

Recommended Today

The road of high salary, a more complete summary of MySQL high performance optimization in history

preface MySQL for many linux practitioners, is a very difficult problem, most of the cases are because of the database problems and processing ideas are not clear. Before the optimization of MySQL, we must understand the query process of MySQL. In fact, a lot of query optimization work is to follow some principles so that […]