javascript - 使用 onclick 按钮重新加载 div

Question

我有一个内存游戏，它有一个由重型 jquery 制成的计时器。我还有一个按钮可以重新加载内存游戏。计时器由单个 div 调用。我只想要一个简单的功能，当您单击重置游戏的按钮时重新加载我的“div”计时器。

代码太多无法显示，但这里是显示倒计时 div 的 html。我只想让我的按钮重新加载 div。

<div id="content">
   <div id="countdown"></div>
     <table id="gameBoard">
       <tbody>                  
       </tbody>
     </table>
     <button id="playAgain">Restart Game</button>
   </div>
 </div>

Samitha，我只想重新加载一个 div。这是游戏 - http://jsfiddle.net/Brannan2/VkKRa/1/ ，这是游戏，这里是游戏上方添加的计时器代码

(function($){

    var days    = 24*60*60,
        hours   = 60*60,
        minutes = 60;

    $.fn.countup = function(prop){

        var options = $.extend({
            callback    : function(){},
            start       : new Date()
        },prop);

        var passed = 0, d, h, m, s, 
            positions;

    init(this, options);

        positions = this.find('.position');

        (function tick(){

            passed = Math.floor((new Date() - options.start) / 1000);


            d = Math.floor(passed / days);
            updateDuo(0, 1, d);
            passed -= d*days;


            h = Math.floor(passed / hours);
            updateDuo(2, 3, h);
            passed -= h*hours;


            m = Math.floor(passed / minutes);
            updateDuo(4, 5, m);
            passed -= m*minutes;


            s = passed;
            updateDuo(6, 7, s);


            options.callback(d, h, m, s);


            setTimeout(tick, 1000);
        })();


        function updateDuo(minor,major,value){
            switchDigit(positions.eq(minor),Math.floor(value/10)%10);
            switchDigit(positions.eq(major),value%10);
        }

        return this;
    };


    function init(elem, options){
        elem.addClass('countDownHolder');


        $.each(['Days','Hours','Minutes','Seconds'],function(i){
            $('<span class="count'+this+'">').html(
                '<span class="position">\
                    <span class="digit static">0</span>\
                </span>\
                <span class="position">\
                    <span class="digit static">0</span>\
                </span>'
            ).appendTo(elem);

            if(this!="Seconds"){
                elem.append('<span class="countDiv countDiv'+i+'"></span>');
            }
        });

    }

    function switchDigit(position,number){

        var digit = position.find('.digit')

        if(digit.is(':animated')){
            return false;
        }

        if(position.data('digit') == number){
            return false;
        }

        position.data('digit', number);

        var replacement = $('<span>',{
            'class':'digit',
            css:{
                top:'-2.1em',
                opacity:0
            },
            html:number
        });


        digit
            .before(replacement)
            .removeClass('static')
            .animate({top:'2.5em',opacity:0},'fast',function(){
                digit.remove();
            })

        replacement
            .delay(100)
            .animate({top:0,opacity:1},'fast',function(){
                replacement.addClass('static');
            });
    }
})(jQuery);                       css - .countDownHolder{
    width:450px;
    margin:0 auto;
    font: 40px/1.5 'Open Sans Condensed',sans-serif;
    text-align:center;
    letter-spacing:-3px;
}

.position{
    display: inline-block;
    height: 1.6em;
    overflow: hidden;
    position: relative;
    width: 1.05em;
}

.digit{
    position:absolute;
    display:block;
    width:1em;
    background-color:#444;
    border-radius:0.2em;
    text-align:center;
    color:#fff;
    letter-spacing:-1px;
}

.digit.static{
    box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);

    background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
    background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
    background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
    background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
    background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.5, #3A3A3A),
        color-stop(0.5, #444444)
    );
}


.countDiv0{}
.countDiv1{}
.countMinutes{}
.countDiv2{}
.countSeconds{}


.countDiv{
    display:inline-block;
    width:16px;
    height:1.6em;
    position:relative;
}

.countDiv:before,
.countDiv:after{
    position:absolute;
    width:5px;
    height:5px;
    background-color:#444;
    border-radius:50%;
    left:50%;
    margin-left:-3px;
    top:0.5em;
    box-shadow:1px 1px 1px rgba(4, 4, 4, 0.5);
    content:'';
}

.countDiv:after{
    top:0.9em;
}

Answer 1

让我们看看，首先您需要一个计时器，对吗？然后你可以担心包装器，所以，让我们设置一个计时器:

JavaScript

// Refresh Timer
function refreshTimer() {
    // Set counter
    setTimeout(function() {
        // Get timer value and decrement in 1
        var myTime = parseInt( $('.timer').html() ) - 1;
        // If timer has not reached 0
        if( myTime > 0 ) {
            // Set timer
            $('.timer').html( myTime );
        } else {
            // Else do something
            $('.timer').html('Time up!');
        }
    }, 1);
}

然后让我们在有人开始游戏时执行定时器，并监听重置点击:

$(document).ready(function(){
    // Alloted time in seconds
    var timeVal = 100;
    // Set timer
    $('.timer').html( timeVal );
    // Load timer function
    refreshTimer();
    // Refresh button
    $('.btn').click(function(){
        // Reset timer
        $('.timer').html( timeVal );
        // Clear interval
        clearInterval( loadTimer );
        // Load interval again
        loadTimer = setInterval( refreshTimer, timerInterval );
        // Set timer
        refreshTimer();
    });
    // Interval
    var timerInterval = 1000;
    var loadTimer = setInterval(refreshTimer, timerInterval);
});

如您所见，.btn 是定时器被重置并再次执行的地方，因此这些函数应该放在您的 $("#playAgain ")函数。

jsFiddle 示例:http://jsfiddle.net/laelitenetwork/qKYHs/