倒计时

原生js倒计时

<html>

<head>
    <title>count_down</title>
    <script type="text/javascript">
    var countDown = {
        flag: true,
        hour: 0,
        minutes: 0,
        minutesNew: 0,
        seconds: 0,
        show: 0,
        current: 0,
        length: 0,
        showTagId: null,
        // callback: null, 
        countDownInner: function(vTimeLength) {
            if (!this.flag) {
                return;
            }
            var that = this;
            this.current = vTimeLength;
            minutes = Math.floor(vTimeLength / 60);
            seconds = Math.floor(vTimeLength % 60);
            if (minutes >= 60) {
                hour = Math.floor(minutes / 60);
                minutesNew = Math.floor(minutes % 60);
                if (hour < 10) {
                    hour = "0" + hour;
                }
                if (minutesNew < 10) {
                    minutesNew = "0" + minutesNew;
                }
                if (seconds < 10) {
                    seconds = "0" + seconds;
                }
                show = hour + ":" + minutesNew + ":" + seconds;

            } else {
                if (minutes < 10) {
                    minutes = "0" + minutes;
                }
                if (seconds < 10) {
                    seconds = "0" + seconds;
                }
                show = minutes + ":" + seconds;
            }
            document.getElementById(this.showTagId).innerHTML = show;
            vTimeLength = vTimeLength - 1;
            if (vTimeLength > 0) {
                setTimeout(function() { that.countDownInner(vTimeLength); }, 1000);
            } else {
                setTimeout(function() { that.callback(); }, 1000);
            }
        },
        run: function(vTimeLength, showTagId, callback) {
            if (!this.flag) {
                this.flag = true;
                this.countDownInner(this.current);
            } else if (showTagId) {
                this.length = vTimeLength;
                this.showTagId = showTagId;
                this.callback = callback;
                this.countDownInner(vTimeLength);
            }
        },
        stop: function() {
            this.flag = false;
        },
        restart: function() {
            this.flag = true;
            this.countDownInner(this.length);
        }
    };

    function countDownStart() {
        countDown.run();
    }

    function countDownStop() {
        countDown.stop();
    }
    </script>
</head>

<body>
    <div id="div_countDown"></div>
    <script type="text/javascript">
    //参数 1.倒计时的秒数   2.控件的id    3.时间到了执行的方法
    countDown.run(100, 'div_countDown', function() { alert('12') });
    </script>
    <span> 
      <button onclick="countDownStart();">start</button> 
      <button onclick="countDownStop();">stop</button> 
    </span>
</body>

</html>

 

posted @ 2017-10-26 10:06  松歌  阅读(174)  评论(0)    收藏  举报