一点一滴打造我们自己的web开发框架系列3【web进度条的开发（上）】

　　【概述】几乎每个企业都有自己的核心东西或说是框架性的东西，框架的好处是将我们经常要使用的功能，控件等包装一个个
易于使用的单元，就算是初学者也极其容易上手，减少项目的开发成本。因此框架的重要性和好处是不言而喻的。在我的这个系列
(一点一滴打造我们自己的web开发框架系列 )当中，我将自己在开发过程中用到的一些东西陆续公布出来，和大家一起交流学习。

　　这次我们接着本框架系统的开发进展，开发一个web页面上的滚动条。常常在我们的系统中，当我们需要长时间加载数据的时候，

我们希望有个滚动条，或者是弹出一个loading...的窗口，来提示用户你请求的数据正在加载，从而为用户带来较好的用户体验。我们

这次的开发任务正如我的标题一样，开发一个滚动条。至于窗口，我们放在我的系列的下下篇文章中和大家一起来开发。

　　我们先探讨一下，滚动条的开发需求。当然我们需要一个构造函数，然后我们需要show和hide两个主要的方法来显示和隐藏滚动条，

同时我们还需要几个辅助方法_createProgressBar来创建滚动条div的容器及对后面页面的遮罩效果。我们还需要_getIntervalTick
根据你设定的滚动条的存活时间来算出每次interval时间激发的时间间隔。另外，滚动条递增的宽度可能是小数，这时我们需要一个
_round函数来取整数，最后我们需要dispose来释放一些占用的资源。因为一个页面一个滚动条就够了，因此我们用window.Progress
来存储这个唯一的滚动条。

　　接下来我们一个个方法来实现

　　构造函数：

function ProgressBar(aliveSeconds,width,height,tickWidth) {
    this.Timer = null;
    this.Width = typeof (width) == 'undefined' ? 360 : width;
    this.Height = typeof (height) == 'undefined' ? 60 : height;
    this.AliveSeconds = typeof (aliveSeconds) == 'undefined' ? 10 : aliveSeconds;
    this.TickWidth = typeof (tickWidth) == 'undefined' ? 2 : tickWidth;
    this.CompleteEvent = null;
    this.TipMessage = "数据正在加载中......";
    this._outer = null;
    this._inner=null;
    this._progrss = null;
    this._innerDown = null;
    this._mark = null;
}

其他方法：

ProgressBar.prototype = {
    initialize: function() {

    },
    _createProgressBar: function() {
        var outer = document.createElement("DIV");
        var inner = document.createElement("DIV");
        var innerDown = document.createElement("DIV");
        var prs = document.createElement("DIV");
        var mask = document.createElement("DIV");

        prs.style.backgroundColor = "#467ef0";
        prs.style.width = "10px";
        prs.style.padding = "0px 0px 0px 0px";
        prs.style.margin = "0px 0px 0px 0px";

        outer.style.width = this.Width + "px";
        outer.style.height = this.Height + "px";
        outer.style.backgroundColor = "#E7FDFE";
        outer.style.border = "solid #022B2D 1px";
        outer.style.position = "absolute";
        outer.style.zIndex = "1000";
        outer.style.padding = "0px 0px 0px 0px";
        outer.style.margin = "0px 0px 0px 0px";
        outer.style.left = (document.documentElement.clientWidth - this.Width) / 2 + "px";
        outer.style.top = (document.documentElement.clientHeight - this.Height) / 2 + "px";
        outer.style.filter = "Alpha(opacity=95)";

        inner.style.width = (this.Width - 20) + "px";
        inner.style.height = "23px";
        inner.style.padding = "0px 0px 0px 0px";
        inner.style.margin = "10px 10px 0px 10px";
        inner.style.backgroundColor = "#ffffff";
        inner.style.border = "solid #022B2D 1px";

        innerDown.style.width = inner.style.width;
        innerDown.style.height = "23px";
        innerDown.style.padding = "0px 0px 0px 0px";
        innerDown.style.margin = "3px auto";
        innerDown.style.textAlign = "center";
        innerDown.style.fontSize = "14px";
        innerDown.style.fontWeight = "bold";
        innerDown.style.color = "#710425";
        prs.style.height = inner.style.height;

        mask.style.width = document.documentElement.clientWidth + "px";
        mask.style.height = document.documentElement.clientHeight + "px";
        mask.style.backgroundColor = "#000000";
        mask.style.position = "absolute";
        mask.style.zIndex = "500";
        mask.style.padding = "0px 0px 0px 0px";
        mask.style.margin = "0px 0px 0px 0px";
        mask.style.left = "0px";
        mask.style.top = "0px";
        mask.style.filter = "Alpha(opacity=65)";
        mask.style.display = "none";

        inner.appendChild(prs);
        outer.appendChild(inner);
        outer.appendChild(innerDown);
        document.body.appendChild(outer);
        document.body.appendChild(mask);

        this._outer = outer;
        this._inner = inner;
        this._progrss = prs;
        this._innerDown = innerDown;
        this._mark = mask;

        window.Progress = this;
        var tick = this._getIntervalTick();
        this.Timer = setInterval(this._graduallyChanging, tick);
    },

    _getIntervalTick: function() {
        var totalWidth = this._inner.style.pixelWidth;
        var currentWidth = this._progrss.style.pixelWidth;
        var tick = this._round(this.AliveSeconds * 1000 * this.TickWidth / (totalWidth - currentWidth), 0);
        return tick;
    },

    _graduallyChanging: function() {
        var totalWidth = window.Progress._inner.style.pixelWidth;
        var currentWidth = window.Progress._progrss.style.pixelWidth;
        var percent = window.Progress._round(currentWidth * 100 / totalWidth, 0);
        if (currentWidth < totalWidth) {
            window.Progress._progrss.style.width = currentWidth + window.Progress.TickWidth + "px";
            window.Progress._innerDown.innerText = window.Progress.TipMessage + percent + "%";
            window.Progress._mark.style.display = "block";
        }
        else {
            if (window.Progress.CompleteEvent != null) {
                if (typeof window.Progress.CompleteEvent == 'function')
                    window.Progress.CompleteEvent.call();
                else
                    eval(window.Progress.CompleteEvent);
            }
            window.Progress._mark.style.display = "none";
        }
    },

    _round: function(number, pos) {
        var n = new Number(number);
        var s = Math.pow(10, pos) * n;
        var t = Math.round(s);
        return t / Math.pow(10, pos);
    },

    show: function() {
        if (window.Progress != null) {
            window.Progress.hide();
        }
        this._createProgressBar();
    },

    hide: function() {
        if (this._outer != null) {
            if (this._outer.parentNode != null) {
                this._outer.parentNode.removeChild(this._outer);
            }
        }
        if (this._mark != null) {
            if (this._mark.parentNode != null) {
                this._mark.parentNode.removeChild(this._mark);
            }
        }
        this.dispose();
    },
    dispose: function() {
        clearInterval(this.Timer);
        this.Timer = null;
        this._outer = null;
        this._inner = null;
    }
};

写好后，我们在页面上实际测试一下：

包含我们刚写的progressbar.js,

<script type="text/javascript" src="Scripts/ProgressBar.js"></script>

测试的html：

<div>
    <input type="button" value="显示滚动条" onclick="sh()" />
    <input type="button" value="隐藏滚动条" onclick="hide()" />
</div>

添加相关JavaScript事件：

<script type="text/javascript">
    var progress = new ProgressBar();
    
    function sh() {
        progress.AliveSeconds = 2;
        progress.CompleteEvent = hide;
        progress.show();
    }

    function hide() {
        progress.hide();
    }
</script>

最后我们来帖个图，看看实际运行的效果：

在我的下一篇文章中，我们将把它包装成服务器控件，方便大家的使用，欢迎关注与指正！（不提供源码下载，要学东西就勤快一点吧）