Jquery moving bar and stopping 0-100_问答_开发者

开发者 https://www.devze.com 2022-12-16 19:58 出处：网络

I am trying to find the right way to go 开发者_运维技巧about this i am trying to get a bar that move from 0 - 100 and you got a stop button and when you press it the bar will stop and display a number

相关专题：jquery

Make use of jQuery.animate() and jQuery.stop(). Here's an SSCCE, just copy'n'paste'n'run it.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2058493</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#progress .bar').animate({ width: '100%' }, 5000);
                $('#stop').click(function() { 
                    $('#count').text($('#progress .bar').stop().width());
                });
            });
        </script>
        <style>
            #progress {
                width: 100px;
                height: 20px;
                border: 1px black solid;
            }
            .bar {
                width: 0%;
                height: 20px;
                background: #00c;
            }
        </style>
    </head>
    <body>
        <div id="progress"><div class="bar"></div></div>
        <button id="stop">stop</button>
        <span id="count"></span>
    </body>
</html>

Note that the width is in pixels. If you change the bar's width in CSS, then you'll need to do some basic math to get it in percents in the span.