Question

我想隐藏然后显示＆＃34;重置＆＃34;计数器到达零时按钮。

的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()功能显示重置按钮。

小提琴：http://jsfiddle.net/rgutierrez1014/o4ak8wzs/4/

计数器到达零后显示重置按钮

2 个答案: