jquery 手動進度條如何設定

1

百度搜尋jquery，找到jquery官網，下載最新的jquery Js檔案，並新增到專案中。

2

新建html頁面，並將jquery Js檔案新增引入到頁面中，在vs2015，可以直接將js拖拽到頁面，會自動生成：<script src="Scripts/jquery.min.3.4.1.js"></script>標籤

3

宣告進度條的外邊框及進度條的元素，這裡我們統一使用div來實現。

 <div id="box">

        <div id="bg">

            <div id="bgcolor"></div>

        </div>

        <div id="bt"></div>

    </div>

    <div id="text"></div>

4

為了使進度條看起來更加美觀，我們編寫進度條的樣式，以及拖拽點的樣式。我們在頁面頭部，新增<style type="text/css"> </style>標籤，在其內部新增如下css：

 <style type="text/css">

        #box { position: relative; width: 200px; height: 50px; border: 1px solid #eee; margin: 50px auto 0; }

        #bg { height: 10px; margin-top: 19px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; }

        #bgcolor { background: #5889B2; width: 0; height: 10px; border-radius: 5px; }

        #bt { width: 20px; height: 20px; background-color: blue; border-radius: 10px; overflow: hidden; position: absolute; left: 0px; margin-left: -10px; top: 13px; cursor: pointer; }

        #text { width: 200px; margin: 0 auto; font-size: 16px; line-height: 2em; }

    </style>

5

樣式增加完成後，我們的進度條就很好看了，為了能使進度條拖動，我們還需要使用jquery來編寫js，使其能夠支援動態拖動。我們在頁面的地步增加<script>標籤，在其內部，編寫如下程式碼：

<script type="text/javascript">

    (function ($)

    {

        var $box = $('#box');

        var $bg = $('#bg');

        var $bgcolor = $('#bgcolor');

        var $btn = $('#bt');

        var $text = $('#text');

        var statu = false;

        var ox = 0;

        var lx = 0;

        var left = 0;

        var bgleft = 0;

        $btn.mousedown(function (e)

        {

            lx = $btn.offset().left;

            ox = e.pageX - left;

            statu = true;

        });

        $(document).mouseup(function ()

        {

            statu = false;

        });

        $box.mousemove(function (e)

        {

            if (statu)

            {

                left = e.pageX - ox;

                if (left < 0)

                {

                    left = 0;

                }

                if (left > 200)

                {

                    left = 200;

                }

                $btn.css('left', left);

                $bgcolor.width(left);

                $text.html('進度:' + parseInt(left / 2) + '%');

            }

        });

        $bg.click(function (e)

        {

            if (!statu)

            {

                bgleft = $bg.offset().left;

                left = e.pageX - bgleft;

                if (left < 0)

                {

                    left = 0;

                }

                if (left > 200)

                {

                    left = 200;

                }

                $btn.css('left', left);

                $bgcolor.stop().animate({ width: left }, 200);

                $text.html('進度:' + parseInt(left / 2) + '%');

            }

        });

    })(jQuery);

</script>

6

到這裡我們就完成了使用jquery製作手動進度條的功能，我們把頁面儲存一下，然後，右鍵頁面執行，最終的效果如圖：