html [jscript]示例计时器应用程序，带有开始/暂停/停止

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html [jscript]示例计时器应用程序，带有开始/暂停/停止相关的知识，希望对你有一定的参考价值。

var seconds = 0;
var minuteDone = false;
var totalMinutes = 0;
var totalHours = 0;


Function.prototype.scope = function(context) {
    var f = this;
    return function() {
        return f.apply(context, arguments);
    };
};

Timer = function() {
    this.tick = 0;
    this.intervalId = null;
    this.period = 1000; // in ms
    this.isPaused = false;
};

jQuery.extend(Timer.prototype, {

    onTick: function() {
        if (!this.isPaused) {

            this.tick++;

            seconds = this.tick%60;
            minuteDone = (this.tick >= 60 && seconds == 0 ? true : false);

            if (totalHours == 99 && totalMinutes == 59 && minuteDone) {

                    t.stop();
                    
            } else {

                if (minuteDone) {
                    totalMinutes++;
                }
                if (totalMinutes == 60) {
                    totalMinutes = 0;
                    totalHours++;
                }

                $('#seconds').text(pad(seconds));
                $('#minutes').text(pad(totalMinutes));
                $('#hours').text(pad(totalHours));

            }

        }
    },

    start: function() {
        this.isPaused = false; //*** added fix to make pause work
        this.intervalId = setInterval(function() {this.onTick()}.scope(this), this.period);
    },

    pause: function() {
        clearInterval(this.intervalId); //*** added fix to make pause work
        this.isPaused = !this.isPaused;
    },

    stop: function() {
        clearInterval(this.intervalId);

        var result = this.tick;
        this.tick = 0;
        this.isPaused = false;

        resetTimer();

        return result;
    }
});

t = new Timer();


$(document).ready(function () {

    $('#btnStart').bind('click', function () {
        t.start();
    });
    $('#btnPause').bind('click', function () {
        t.pause();
    });
    $('#btnStop').bind('click', function () {
        var totalMiliSecs = t.stop();
        console.log(totalMiliSecs);
    });

});


function resetTimer() {

    seconds = 0;
    minuteDone = false;
    totalMinutes = 0;
    totalHours = 0;

    $('#hours').text('00');
    $('#minutes').text('00');
    $('#seconds').text('00');

}


function pad(val) {
    var valString = val + '';
    if (valString.length < 2) {
        return "0" + valString;
    } else {
        return valString;
    }
}
<html>
<head>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="timer.js"></script>
</head>
<body>
	<input type="button" id="btnStart" value="START" />
	<input type="button" id="btnPause" value="PAUSE" />
	<input type="button" id="btnStop" value="STOP" />
	<br>
	<span id="hours"></span> : <span id="minutes"></span> : <span id="seconds"></span>
</body>
</html>

以上是关于html [jscript]示例计时器应用程序，带有开始/暂停/停止的主要内容，如果未能解决你的问题，请参考以下文章

jscript定时器,一直用的东西，你真的明白吗?

带开始按钮的烹饪倒计时

h5程序员表白页面表白，带计时功能代码

JavaScript--轮播图_带计时器

带计时器的绘图应用程序。绘图时间少于 20 秒后计时器开始滞后

html [jscript]终极iFrame嵌入！