2012-03-30 15 views
0

Bevor ich beginne kann es für einige Leute schwer zu verstehen sein. Es tut uns leid.jQuery entfernen div mit Countdown

Ich möchte ein Online-Spiel mit jQuery und PHP zu entwerfen. Das Spiel heißt sinnlos, einige Leute haben davon gehört, es ist eine UK-Game-Show.

In Pointless ist das Ziel des Spiels, so wenige Punkte wie möglich zu erzielen. Und die Punktzahl wird aus 100 bestimmt. Sie benutzen ein graphisches System auf der Show, das eine Spalte von Linien einbaut, die verschwinden, wenn die Punkte niedriger sind.

Also zum Beispiel das ist das Spielbrett (nicht mein Design).

Pointless Board

Ich habe alle 100 divs mit der gleichen Klasse, aber mit "line1" von id "line2", etc. Gibt es irgendeinen Weg, wie ich sie rechtzeitig mit dem Countdown entfernen kann, und kann das überhaupt getan werden?

Hier ist mein Code für den Countdown:

$(document).ready(function() { 

      /* delay function */ 
      jQuery.fn.delay = function(time,func){ 
       return this.each(function(){ 
        setTimeout(func,time); 
       }); 

      }; 

      jQuery.fn.countDown = function(settings,to) { 
      settings = jQuery.extend({ 
        startFontSize: '36px', 
        endFontSize: '36px', 
        duration: 100, 
        startNumber: 10, 
        endNumber: 0, 
        callBack: function() { } 
       }, settings); 
       return this.each(function() { 
        if(!to && to != settings.endNumber) { to = settings.startNumber; } 

        //set the countdown to the starting number 
        $(this).text(to).css('fontSize',settings.startFontSize); 

        //loopage 
        $(this).animate({ 
         'fontSize': settings.endFontSize 
        },settings.duration,'',function() { 
         if(to > settings.endNumber + 1) { 
          $(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1); 
         } 
         else 
         { 
          settings.callBack(this); 
         } 
        });  
       }); 
      }; 

      $('#countdown').countDown({ 
       startNumber: 100, 
       callBack: function(me) { 
        $(me).text('Pointless').css('color','#FFF').css('font-size','15px').css('text-transform','uppercase').css('padding-top','15px').css('font-weight','bolder'); 
       } 
      }); 
     }); 

Irgendwelche Ideen geschätzt würde. Alles was ich brauche, ist ein Schub in die richtige Richtung !!!

+0

Meinst du etwas wie 'window.setInterval' zu verwenden? –

Antwort

1

Anstatt 100 divs, die Sie 1 nach 1 entfernen, denke ich, es wäre sinnvoller, 1 div zu haben, mit einer Höhe 100 * größer als die anderen.

Dann anstatt 1 div auf einmal zu entfernen, würden Sie die height des Div je nach der Punktzahl reduzieren.