Question

我正在设计一个具有倒数计时器的网站，但是每次刷新倒数时间都会重置。知道发生了什么事。

我希望将其设置为36天，但是在我们刷新网站之前可以正常使用，但是它会在刷新时重置倒计时时间。

在我的学习过程中，帮助会很棒

我的github存储库-https://www.github.com/vivanks/hackoffproject

我的网站- https://vivanks.github.io/hackoffproject

(function ($) {
    "use strict";

    $.fn.extend({ 

      countdown100: function(options) {
        var defaults = {
          timeZone: "",
          endtimeYear: 0,
          endtimeMonth: 0,
          endtimeDate: 0,
          endtimeHours: 0,
          endtimeMinutes: 0,
          endtimeSeconds: 0,
        }

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

        return this.each(function() {
          var obj = $(this);
          var timeNow = new Date();

          var tZ = options.timeZone; console.log(tZ);
          var endYear = options.endtimeYear;
          var endMonth = options.endtimeMonth;
          var endDate = options.endtimeDate;
          var endHours = options.endtimeHours;
          var endMinutes = options.endtimeMinutes;
          var endSeconds = options.endtimeSeconds;

          if(tZ == "") {
            var deadline = new Date(endYear, endMonth - 1, endDate, endHours, endMinutes, endSeconds);
          } 
          else {
            var deadline = moment.tz([endYear, endMonth - 1, endDate, endHours, endMinutes, endSeconds], tZ).format();
          }

          if(Date.parse(deadline) < Date.parse(timeNow)) {
            var deadline = new Date(Date.parse(new Date()) + endDate * 24 * 60 * 60 * 1000 + endHours * 60 * 60 * 1000); 
          }


          initializeClock(deadline);

          function getTimeRemaining(endtime) { 
            var t = Date.parse(endtime) - Date.parse(new Date());
            var seconds = Math.floor((t / 1000) % 60);
            var minutes = Math.floor((t / 1000 / 60) % 60);
            var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
            var days = Math.floor(t / (1000 * 60 * 60 * 24));
            return {
              'total': t,
              'days': days,
              'hours': hours,
              'minutes': minutes,
              'seconds': seconds
            };
          }

          function initializeClock(endtime) { 
            var daysSpan = $(obj).find('.days');
            var hoursSpan = $(obj).find('.hours');
            var minutesSpan = $(obj).find('.minutes');
            var secondsSpan = $(obj).find('.seconds');

            function updateClock() { 
              var t = getTimeRemaining(endtime);

              daysSpan.html(t.days);
              hoursSpan.html(('0' + t.hours).slice(-2));
              minutesSpan.html(('0' + t.minutes).slice(-2));
              secondsSpan.html(('0' + t.seconds).slice(-2))

              if (t.total <= 0) {
                clearInterval(timeinterval);
              }
            }

            updateClock();
            var timeinterval = setInterval(updateClock, 1000);
          }




        });
      }
    });



})(jQuery);

Answer 1

为此，您可以使用localStorage，在那里保存值并从那里获取值，即使用户刷新页面，您也可以获取该值并继续计数。

您应该节省时间：

function updateClock() { 
    var t = getTimeRemaining(endtime);

    daysSpan.html(t.days);
    hoursSpan.html(('0' + t.hours).slice(-2));
    minutesSpan.html(('0' + t.minutes).slice(-2));
    secondsSpan.html(('0' + t.seconds).slice(-2))

    if (t.total <= 0) {
         clearInterval(timeinterval);
    }

    let myTime = {
        daysSpan: savedTime.days,
        hoursSpan: savedTime.hours,
        minutesSpan: savedTime.minutes,
        secondsSpan: savedTime.seconds
    }

    localStorage.setItem('myTime', myTime)
}

并获取节省的时间：

function initializeClock(endtime) { 
    let localSave= localStorage.getItem('myTime')

    var daysSpan;
    var hoursSpan;
    var minutesSpan;
    var secondsSpan;

    if(localSave.myTime){
        daysSpan = savedTime.days;
        hoursSpan = savedTime.hours;
        minutesSpan = savedTime.minutes;
        secondsSpan = savedTime.seconds;
    }else{
        daysSpan = $(obj).find('.days');
        hoursSpan = $(obj).find('.hours');
        minutesSpan = $(obj).find('.minutes');
        secondsSpan = $(obj).find('.seconds');
    }

    function updateClock() { 
        var t = getTimeRemaining(endtime);

        daysSpan.html(t.days);
        hoursSpan.html(('0' + t.hours).slice(-2));
        minutesSpan.html(('0' + t.minutes).slice(-2));
          secondsSpan.html(('0' + t.seconds).slice(-2))

        if (t.total <= 0) {
            clearInterval(timeinterval);
        }
    }
    updateClock();
    var timeinterval = setInterval(updateClock, 1000);
}

您可以查看如何set localStorage和get localStorage。

HTML网站中的倒计时时间刷新

1 个答案: