显示进度条

本文写的进度条比较简单，可以通过绑定数据库数据来自动定位进度长度，也可以自定义点击某个点来显示进度长度

前端：
                 <div class="demo">

        <div class="progressBar blue stripes">
            <span></span>
        </div>
        <div class="grade">
            <span class="begin">普通会员</span> <span class="end">VIP会员</span>
        </div>

        <span id="Consumed" style="display: none">70</span> 

        <span id="VIPPrice" style="display: none">100</span>

    </div>

JS代码：

 <script src="../JS/jquery-1.7.min.js" type="text/javascript"></script>

<script type="text/javascript">
        $(function () {
            try {
                MyDemo.Init();
            } catch (err) { }
        });


        var MyDemo = {
            Init: function () {
                var consumed = parseInt($("#Consumed").text());
                var vipPrice = parseInt($("#VIPPrice").text());
                var result = (consumed / vipPrice) * 100;


                if (result < 100) {
                    $(".progressBar span").css("width", result + "%");
                } else {
                    $(".progressBar span").css("width", 100 + "%");
                }


                //                //点击设置进度条位置
                //                        $(".begin").click(function () {
                //                            $(this).parent().prev().children("span").css("width", "25%");
                //                        });


                //                        $(".end").click(function () {
                //                            $(this).parent().prev().children("span").css("width", "100%");
                //                        });
            }
        }

    </script>

CSS样式：

 <style type="text/css">
        .grade .end
        {
            margin-left: 218px;
        }
        /*进度条*/
        .progressBar
        {
            border: 1px solid orange;
            background-color: #fafafa;
            height: 10px;
            width: 24%;
            margin: 50px 0 20px 0;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -woz-box-shadow: 0 1px 5px #000 inset,0 1px 0 #444;
            -webkit-box-shadow: :0 1px 5px #000 inset,0 1px 0 #444;
            box-shadow: :0 1px 5px #000 inset,0 1px 0 #444;
            margin-top: 115px;
            margin-bottom: 6px;
        }
        
        /*进度条默认长度*/
        .progressBar span
        {
            display: inline-block;
            height: 100%;
            background-color: #777;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            -moz-box-shadow: 0 1px 0 rgba(255,255,255,5) inset;
            -webkit-box-shadow: 0 1px 0 rgba(255,255,255,5) inset;
            box-shadow: 0 1px 0 rgba(255,255,255,5) inset;
            -moz-transition: width 0.4s ease-in-out;
            -webkit-transition: width 0.4s ease-in-out;
            -ms-transition: width 0.4s ease-in-out;
            -o-transition: width 0.4s ease-in-out;
            transition: width 0.4s ease-in-out;
        }
        
        /*进度条颜色*/
        .blue span
        {
            background-color: #34c2e3;
        }
    </style>