计数器归零后显示重置按钮

Question

我想在计数器达到零时隐藏然后显示 "Reset" 按钮。

Index.html:

<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">   
</script>
<script type="text/javascript" src="countdown.js"></script>
</head>
<body>
    <input type="text" id="timer">
    <script type="text/javascript">
        timer = new Countdown();
        timer.init();
     </script>
        <button id="reset">Reset</button>
       <script type="text/javascript">
        $("#reset").click(function(){
        //timer = new Countdown();  
        timer.reset();
        });
        </script>
</body>

</html>

请参阅 http://jsfiddle.net/orokusaki/o4ak8wzs/1/ countdown.js

Answer 1

在此 jsFiddle 中，您将找到更新的代码以及如何添加该行为。

我还稍微改进了您的代码。写 Countdown.prototype = { init: function() {...}, ...} 比写 Countdown.prototype.init = function() {...}

更容易

我也将你的 setInterval 更改为 setTimeout 并且每秒开始一个新的超时。这更容易，你不需要在最后清除间隔。此外，您的间隔回调函数似乎有点奇怪，可能无法正常工作。

您可以像这样在倒计时对象的 init 方法中添加点击处理程序 $('#start').click(this.start.bind(this)); .bind(this) 用于将点击处理程序内的上下文更改为当前使用的对象。那么处理程序内部就是您的对象，您可以使用 this.

访问所有内容

为了在开始时隐藏重置按钮，我使用了 css display: none;，如果您处于零，则使用 $('#reset').fadeIn('slow'); 或 $('#reset').show(); 显示按钮，如果你不想要动画。

2015 年 3 月 13 日更新

如评论中所述，我改进了代码，现在我使用的是 jQuery Countdown plugin。

请查看此jsFiddle中的最新版本。

我认为它比其他代码好得多。

(function () {

    function Countdown() {
        this.start_time = "00:30";
        this.target_id = "#timer";
        //this.name = "timer";
    }

    Countdown.prototype = {
        init: function () {
            console.log('init called');
            this.reset();
            $('#start').click(this.start.bind(this));
            $('#reset').click(this.reset.bind(this));
        },
        reset: function () {
            time = this.start_time.split(":");
            //this.minutes = parseInt(time[0]);
            this.seconds = parseInt(time[1]);
            this.update_target();
        },
        tick: function () {
            if (this.seconds > 0) //|| this.minutes > 0)
            {
                if (this.seconds == 0) {
                    // this.minutes = this.minutes - 1;
                    this.seconds = 59
                } else {
                    this.seconds = this.seconds - 1;
                }
                this.start();
            }
            else {
                // show reset button
                $('#reset').fadeIn('slow');
            }
            this.update_target();
        },
        start: function() {
            console.log('start called');
            //setTimeout(this.name + '.tick()', 1000);
            setTimeout(this.tick.bind(this), 1000);
        },
        update_target: function () {
            seconds = this.seconds;
            if (seconds < 10) seconds = "" + seconds;
            $(this.target_id).val(this.seconds);
        }
    };

    var counter = new Countdown();
    counter.init();

})();

#reset {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="timer">
<button id="start">Start</button>
<button id="reset">Reset</button>

Answer 2

AWolf 的回答比我的更奇葩，他们对你的代码提出了一些好的观点，但我尽量让我的代码保持简单，并尽量不对你的原始代码进行太多更改。

您的 init() 函数现在将隐藏重置按钮，我让 update_target() 函数在计时器到期时显示重置按钮。

Fiddle: http://jsfiddle.net/rgutierrez1014/o4ak8wzs/4/

计数器归零后显示重置按钮

Show reset button after counter reaches zero

javascript

jquery

countdown