Javascript教程：模拟metro UI的等待进度条案例_Javascript教程(3)_H5之家

        };
    </script>
</head>
<body>
<div id="pic">
<div class="point" style="top:10px;left:10px;"></div>
</div>
    <p id="CenterLine">
    </p>
    <div>
        <div class="runLineBox" style="margin-left: 5px">
        </div>
        <div class="runLineBox" style="margin-left: 20px">
        </div>
        <div class="runLineBox" style="margin-left: 35px">
        </div>
        <div class="runLineBox" style="margin-left: 50px">
        </div>
    </div>
    <br />
    <br />
    <div id="contore">
    </div>
</body>
</html>

JS模拟metro UI的等待进度条，圆圈转转转的等待通用性比较差吧，下面我们一起来看看下面的实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
    <title>主页面</title>
    <style>
    *
{
    margin:0px;
    padding :0px;
    border:0px;
    }
#CenterLine
{
    width:100%;
    height:5px;
    background-color:Blue;
    margin-top:20%;
    }
    .runLineBox
    {
        width:8px;
        height:8px;
        background-color:Blue;
        float:left;
        margin:5px;
        position:absolute;

        }
.point
{
    width:1px;
    height:1px;
    background-color:Black;
    position:absolute;
    }
    </style>
    <script type="text/javascript">
        Array.prototype.remove = function (x) {
            if (isNaN(x) || x > this.length) { return false; }
            for (var i = 0, n = 0; i < this.length; i++) {
                if (this[i] != this[x]) {
                    this[n++] = this[i]
                }
            }
            this.length -= 1
        }
        var MAX = 0