JavaScript範圍？ - jquery插件倒數計時器

嗨我有一個問題，在範圍似乎丟失。我做錯了什麼？JavaScript範圍？ - jquery插件倒數計時器

假設邏輯是從每個計數器而不是從最後一個計數器減少1秒。我做錯了什麼？

<html> 
<head> 
    <link rel="stylesheet" href="http://static.jquery.com/files/rocker/css/reset.css" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     (function($){ 
      $.fn.extend({ 

       countdown: function(options) { 

       var defaults = { 
        daysSelector : 'span.days', 
        hoursSelector : 'span.hours', 
        minutesSelector : 'span.minutes', 
        secondsSelector : 'span.seconds' 
       } 

       var options = $.extend(defaults, options); 
       var _this = $(this); 

       tick = function() 
       { 
        var days = _this.find(options.daysSelector); 
        var hours = _this.find(options.hoursSelector); 
        var minutes = _this.find(options.minutesSelector); 
        var seconds = _this.find(options.secondsSelector); 
        console.log(_this); 
        var currentSeconds=seconds.text(); 
        currentSeconds--; 
        if(currentSeconds<0) 
        { 
         seconds.text("59"); 
         var currentMinutes=minutes.text(); 
         currentMinutes--; 
         if(currentMinutes<0) 
         { 
          (minutes).text("59"); 
          var currentHours=(hours).text(); 
          currentHours--; 
          if(currentHours<0) 
          { 
           (hours).text("23"); 
           var currentDays=(hours).text(); 
           currentDays--; 
          } 
          else 
          { 
           if(currentHours.toString().length==1) 
           { 
            (hours).text('0'+currentHours); 
           } 
           else 
           { 
            (hours).text(currentHours); 
           } 
          } 
         } 
         else 
         { 
          if(currentMinutes.toString().length==1) 
          { 
           (minutes).text('0'+currentMinutes); 
          } 
          else 
          { 
           (minutes).text(currentMinutes); 
          } 
         } 
        } 
        else 
        { 
         if(currentSeconds.toString().length==1) 
         { 
          seconds.text('0'+currentSeconds); 
         } 
         else 
         { 
          seconds.text(currentSeconds); 
         } 
        } 
       } 

       return this.each(function() 
       { 
        console.log(_this); 
        setInterval("this.tick()",1000); 
       }); 
      } 
     }); 

     })(jQuery); 

     $(document).ready(function() 
     { 
      $("#timer1").countdown(); 
      $("#timer2").countdown(); 
      $("#timer3").countdown(); 
     }); 

    </script> 


</head> 

<body> 

    <div id="timer1"> 
     <span class="days">1</span> 
     <span class="hours">18</span> 
     <span class="minutes">6</span> 
     <span class="seconds">45</span> 
    </div> 

    <div id="timer2"> 
     <span class="days">2</span> 
     <span class="hours">28</span> 
     <span class="minutes">1</span> 
     <span class="seconds">59</span> 
    </div> 

    <div id="timer3"> 
     <span class="days">10</span> 
     <span class="hours">0</span> 
     <span class="minutes">59</span> 
     <span class="seconds">59</span> 
    </div> 


</body>

來源

2011-07-10 David Bonnici

請問你可以在這裏發佈代碼嗎？Stackoverflow不依賴於外部服務來回答他的問題。 –

在這裏發佈代碼的相關部分 – Ibu

請同時看看m y回答一些改進插件的建議。 –

我編輯你的代碼

(function($){ 
      $.fn.extend({ 

       countdown: function(options) { 

       var defaults = { 
        daysSelector : 'span.days', 
        hoursSelector : 'span.hours', 
        minutesSelector : 'span.minutes', 
        secondsSelector : 'span.seconds' 
       } 

       var options = $.extend(defaults, options); 
       var _this = $(this); 

       var tick = function() 
       { 
        var days = _this.find(options.daysSelector); 
        var hours = _this.find(options.hoursSelector); 
        var minutes = _this.find(options.minutesSelector); 
        var seconds = _this.find(options.secondsSelector); 
        console.log(_this); 
        var currentSeconds=seconds.text(); 
        currentSeconds--; 
        if(currentSeconds<0) 
        { 
         seconds.text("59"); 
         var currentMinutes=minutes.text(); 
         currentMinutes--; 
         if(currentMinutes<0) 
         { 
          (minutes).text("59"); 
          var currentHours=(hours).text(); 
          currentHours--; 
          if(currentHours<0) 
          { 
           (hours).text("23");  
           var currentDays=(hours).text(); 
           currentDays--; 
          } 
          else 
          { 
           if(currentHours.toString().length==1) 
           { 
            (hours).text('0'+currentHours); 
           } 
           else 
           { 
            (hours).text(currentHours); 
           } 
          } 
         } 
         else 
         { 
          if(currentMinutes.toString().length==1) 
          { 
           (minutes).text('0'+currentMinutes); 
          } 
          else 
          { 
           (minutes).text(currentMinutes); 
          } 
         } 
        } 
        else 
        { 
         if(currentSeconds.toString().length==1) 
         { 
          seconds.text('0'+currentSeconds); 
         } 
         else 
         { 
          seconds.text(currentSeconds); 
         } 
        }  
       } 

       return _this.each(function() 
       { 
        console.log(_this); 
        setInterval(tick,1000); 
       }); 
      } 
     }); 

     })(jQuery); 

     $(document).ready(function() 
     { 
      $("#timer1").countdown(); 
      $("#timer2").countdown(); 
      $("#timer3").countdown(); 
     });

蜱是全球性的，這是問題（也從來沒有通過代碼進行evalued給setInterval

小提琴這裏：http://jsfiddle.net/kvqWR/1/

來源

2011-07-10 09:32:51

如果我猜是什麼問題...只有1定時器的實際倒計時，其他兩個不？

這是因爲擴展倒計時定時器功能從來沒有將倒數計時器的名稱（id）傳遞給函數。所以它總是隻執行最後一個是所謂的......最後一個。

您需要通過div的名稱（id）發送它，以便同時倒數所有3個。

來源

2011-07-10 09:27:16 user85569

您在全球範圍內聲明tick。立足本地：

var tick = function()...

，不字符串傳遞給setInterval：

setInterval(tick,1000);

插件的一個更好的結構將是聲明tick功能只有一次，過電流元素（或時間字段）作爲參數：

(function($){ 
    var tick = function(days, hours, minutes, seconds) { 
     //... 
    }; 

    $.fn.countdown = function(options) { 

      var defaults = { 
       daysSelector : 'span.days', 
       hoursSelector : 'span.hours', 
       minutesSelector : 'span.minutes', 
       secondsSelector : 'span.seconds' 
      } 

      var options = $.extend(defaults, options); 

      return this.each(function(){ 
       var days = $(this).find(options.daysSelector); 
       var hours = $(this).find(options.hoursSelector); 
       var minutes = $(this).find(options.minutesSelector); 
       var seconds = $(this).find(options.secondsSelector); 
       setInterval(function() { 
        tick(days, hours, minutes, seconds); 
       },1000); 
      }); 
     }; 
}(jQuery));

Then your plugin als如果你一次選擇多個元素，輸出工作：

$("#timer1, #timer2, #timer3").countdown();

這將不行否則（見這裏http://jsfiddle.net/fkling/kvqWR/5/）。

工作DEMO

它也可能會更好只setInterval上迭代將會在選定的元素，並執行操作。你擁有的計時器越少越好。看看這個例子：http://jsfiddle.net/fkling/kvqWR/4/

來源

2011-07-10 09:30:45

JavaScript範圍？ - jquery插件倒數計時器

回答

相關問題