进度条

var pro = function (area, pvalue, options) {
    this._init(area, pvalue, options);
};

pro.prototype = {
    _init: function (area, pvalue, options) {
        this.area = $(area);
        this.pvalue = $(pvalue);
        this._setOption(options);
        this.num = 0;
        this.time = null;
        this.aleng = this.area.width(); //总长度
        this.index = this.allTime = this.options.allTime; //总时间
        this.step = Math.ceil(this.aleng / this.allTime);
        this._HH = parseInt(this.allTime / 60 / 60);
        this._MM = parseInt(this.allTime / 60 % 60);
        this._ss = parseInt(this.allTime % 60);
        this._setTime();

    },
    _setOption: function (options) {
        this.options = {
            allTime: 60//单位为秒
        };
        $.extend(this.options, options || {});

    },
    _start: function () {
        var self = this;
        this.time = setInterval(function () {
            self._run(self);
        }, 1000);
    },
    _zt: function () {
        clearInterval(this.time);
    },
    _run: function (e) {
        e.num += e.step;
        this.index--;
        if (this.index <= 0) { e.num = e.aleng; clearInterval(e.time); };
        if (e._ss > 0) {
            e._ss--;
        } else if (e._MM > 0) {
            e._ss = 59;
            e._MM--;
        } else if (e._HH > 0) {
            e._ss = 59;
            e._MM = 59;
            e._HH--;
        }
        e._setTime();
        e.pvalue.css("width", e.num + "px");
    },
    _setTime: function () {
        var _strH = this._HH < 10 ? "0" + this._HH : this._HH;
        var _strM = this._MM < 10 ? "0" + this._MM : this._MM;
        var _strS = this._ss < 10 ? "0" + this._ss : this._ss;
        $$P.log("lg", _strH + ":" + _strM + ":" + _strS);
    }
};

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .pro
        {
            width: 500px;
            height: 15px;
            border: solid 1px #ccc;
        }
        .value
        {
            background-color: #6E96B1;
            width: 0px;
            height: 100%;
        }
    </style>
</head>
<body>
    <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../js/jone.js" type="text/javascript"></script>
    <script src="progress.js" type="text/javascript"></script>
    <div class="pro">
        <div class="value">
        </div>
    </div>
    <div id="lg">
    </div>
    <div id="lg1">
    </div>
    <div id="lg2">
    </div>
    <div id="lg3">
    </div>
    <a href="javascript:;" onclick="proObj._start()">开始</a> <a href="javascript:;" onclick="proObj._zt()">
        暂停</a>
    <script type="text/javascript">
        var proObj = new pro(".pro", ".value", { "allTime": 1 *1175 + 2 });
    </script>
</body>
</html>

posted on 2014-03-27 22:44 朝着阅读(172) 评论(0) 收藏举报