Question

嗨，我很难为这个倒计时器工作。我试图让它倒数到上午11点15分的每个星期天，因为那是我们的教会服务开始的时候。任何人都可以帮助我吗？我这里有代码。

function croAnim(){ 

    // IF THERE'S A COUNTDOWN
    if ($('ul.cro_timervalue').length !== 0) {


        // GET ALL THE INSTANCES OF THE TIMER
        $('ul.cro_timervalue').each(function() {

            var $this       = $(this),
                timesets    = $this.data('cro-countdownvalue'),               
                now         = new Date(),
                tset        = Math.floor(now / 1000),
                counter1    = timesets - tset;


            // CALCULATE SECONDS
            var seconds1    = Math.floor(counter1 % 60);  
                seconds1    = (seconds1 < 10 && seconds1 >= 0) ? '0'+ seconds1 : seconds1;


            // CALCULATE MINUTES                
            counter1        =counter1/60;
            var minutes1    =Math.floor(counter1 % 60);
            minutes1        = (minutes1 < 10 && minutes1 >= 0) ? '0'+ minutes1 : minutes1;


            // CALCULATE HOURS
            counter1=counter1/60;
            var hours1=Math.floor(counter1 % 24);
            hours1 = (hours1 < 10 && hours1 >= 0) ? '0'+ hours1 : hours1;


            // CALCULATE DAYS
            counter1    =counter1/24;
            var days1   =Math.floor(counter1);
            days1       = (days1 < 10 && days1 >= 0) ? '0'+ days1 : days1;



            // ADD THE VALUES TO THE CORRECT DIVS
            $this.find('span.secondnumber').html(seconds1);
            $this.find('span.minutenumber').html(minutes1);
            $this.find('span.hournumber').html(hours1);
            $this.find('span.daynumber').html(days1); 


        });
    }
}


// CREATE A INTERVAL FOR THE TIMER
croInit = setInterval(croAnim, 100);

Answer 1

大约一周前我回答了similar question。我已经编写了一个非常简单的倒计时功能。诀窍是修改它以获得下一个Sunday @ 11:15 am，我为其编写了一个函数。

var getNextSunday = function () {
    var today = new Date(),
        day = today.getDay(),	// 1 for Mon, 2 for Tue, 3 for Wed, etc.
        delta = 7 - day;

    var sunday = new Date(today.getTime() + (delta * 24 * 3600 * 1000));

    sunday.setHours(11);
    sunday.setMinutes(15);
    sunday.setSeconds(0);

    return sunday;
}

var t = getNextSunday(),
    p = document.getElementById("time"),
    timer;
var u = function () {
    var delta = t - new Date(),
        d = delta / (24 * 3600 * 1000) | 0,
        h = (delta %= 24 * 3600 * 1000) / (3600 * 1000) | 0,
        m = (delta %= 3600 * 1000) / (60 * 1000) | 0,
        s = (delta %= 60 * 1000) / 1000 | 0;
    
    if (delta < 0) {
        clearInterval(timer);
        p.innerHTML = "timer's finished!";
    } else {
        p.innerHTML = d + "d " + h + "h " + m + "m " + s + "s";
    }
}
timer = setInterval(u, 1000);

<h1 id="time"></h1>

这应该很容易适应您的网站需求。唯一棘手的部分可能是我使用

h = (delta %= 24 * 3600 * 1000) / (3600 * 1000) | 0

执行delta %= ...后，

delta会返回%=。这只是为了保存角色。如果你不喜欢这个，你可以将delta %= ...部分分开：

delta %= 24 * 3600 * 1000;
h = delta / (3600 * 1000) | 0;
// ... do the same for the rest

Answer 2

这个对象使用了一些半高级的javascript想法（ closures 和* IIFE *），所以希望它很容易理解。如果您有任何问题，请随时发表评论。

var churchtime = (function (){
    // Total seconds passed in the week by sunday 11:15am
            var magic_number = 558900;
    var now;
    var rawtime = function (){
          //updates now with the current date and time
          now = new Date()
          //Converts now into pure seconds  
          return (((((((now.getDay()-1)*24)+now.getHours())*60)+now.getMinutes())*60)+now.getSeconds());
    };

    //closure
    return {

        raw_countdown : function (){
            return Math.abs(rawtime()-magic_number);
        },

        countdown : function(){      
            var time = Math.abs(rawtime()-magic_number)  
            var seconds = time % 60, time = (time - seconds)/60; 
            var minutes = time % 60, time = (time - minutes)/60; 
            var hours = time % 24, time = (time - hours)/24;
            var days = time;
            return [days,hours,minutes,seconds];
        }
    }

})(558900); //<- Total seconds passed in the week by sunday 11:15am


churchtime.raw_countdown()// returns the raw number of seconds until church 

churchtime.countdown() // returns an array of time until church [days,hours,minutes,seconds]

一旦你有像教堂时间这样的对象，它应该非常容易实现。

例如：

var churchtime = (function(magic_number) {
  var now;
  var rawtime = function() {
    //updates now with the current date and time
    now = new Date()
      //Converts now into pure seconds  
    return (((((((now.getDay() - 1) * 24) + now.getHours()) * 60) + now.getMinutes()) * 60) + now.getSeconds());
  };

  //closure
  return {

    raw_countdown: function() {
      return Math.abs(rawtime() - magic_number);
    },

    countdown: function() {
      var time = Math.abs(rawtime() - magic_number)
      var seconds = time % 60,
        time = (time - seconds) / 60;
      var minutes = time % 60,
        time = (time - minutes) / 60;
      var hours = time % 24,
        time = (time - hours) / 24;
      var days = time;
      return [days, hours, minutes, seconds];
    }
  }

})(); //<- IIFE


AutoUpdate = function AutoUpdate() {
  var time = churchtime.countdown();
  document.getElementById("day").innerHTML = time[0];
  document.getElementById("hour").innerHTML = time[1];
  document.getElementById("min").innerHTML = time[2];
  document.getElementById("sec").innerHTML = time[3];
  setTimeout(AutoUpdate, 900); //Calls it's self again after .9 seconds
}(); //<- IIFE

<h1>Day:<span id="day"></span> Hour:<span id="hour"></span>
Minute:<span id="min"></span> second: <span id="sec"></span></h1>

网站倒计时js

2 个答案: