1

重い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>

サミサ、単一の 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;
}
4

3 に答える 3

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/

于 2013-10-23T16:58:26.230 に答える
0

タイマーを無名関数に入れるのではなく、タイマーに名前を付ける必要があります。

var timer;

timer = function($){ 
  var days    = 24*60*60,
  // other codes
}

次に、ページの初期化でタイマーを呼び出します。ここに置いてください：

var shuffledCards = [];
var cardToMatchElement;

setupGame();
timer();

次に、リセット ボタンをクリックしたときにタイマーを再度呼び出します。

$("#playAgain").click(function() {
    setupGame();
    timer();
});
于 2013-10-23T16:08:15.830 に答える