Zakonoposlushniy
@Zakonoposlushniy

Как сделать автообновление таймера при обновлении страницы?

Здравствуйте!
Нашел в интернете таймер. Но, он останавливается при завершении времени.
Как можно сделать, чтобы таймер автоматически обновлялся при обновлении страницы. Или было бы шикарно, если по истечении времени, он продлевался на сутки.

Благодарю!

Вот скрипт таймера
year = 2018; month = 1; day = 21; hour= 24; minute= 0; sec= 0;

function CountBox() {
	dateNow = new Date;
	amount = dateFuture.getTime() - dateNow.getTime() + 5;
	delete dateNow;
	if (amount < 0) {
		out = "<div class='countbox-num'><div class='countbox-days1'><span></span>0</div><div class='countbox-days2'><span></span>0</div><div class='countbox-days-text'></div></div>" +
		"<div class='countbox-space'></div>" +
		"<div class='countbox-num'><div class='countbox-hours1'><span></span>0</div><div class='countbox-hours2'><span></span>0</div><div class='countbox-hours-text'></div></div>" +
		"<div class='countbox-space'></div>" +
		"<div class='countbox-num'><div class='countbox-mins1'><span></span>0</div><div class='countbox-mins2'><span></span>0</div><div class='countbox-mins-text'></div></div>" +
		"<div class='countbox-space'></div>" +
		"<div class='countbox-num'><div class='countbox-secs1'><span></span>0</div><div class='countbox-secs2'><span></span>0</div><div class='countbox-secs-text'></div></div>";
		document.getElementById("countbox1").innerHTML = out
		document.getElementById("countbox2").innerHTML = out
		document.getElementById("countbox3").innerHTML = out
	} else {
		days = 0;
		days1 = 0;
		days2 = 0;
		hours = 0;
		hours1 = 0;
		hours2 = 0;
		mins = 0;
		mins1 = 0;
		mins2 = 0;
		secs = 0;
		secs1 = 0;
		secs2 = 0;
		out = "";
		amount = Math.floor(amount / 1e3);
		days = Math.floor(amount / 86400);
		days1 = (days >= 10) ? days.toString().charAt(0) : '0';
		days2 = (days >= 10) ? days.toString().charAt(1) : days.toString().charAt(0);
		amount = amount % 86400;
		hours = Math.floor(amount / 3600);
		hours1 = (hours >= 10) ? hours.toString().charAt(0) : '0';
		hours2 = (hours >= 10) ? hours.toString().charAt(1) : hours.toString().charAt(0);
		amount = amount % 3600;
		mins = Math.floor(amount / 60);
		mins1 = (mins >= 10) ? mins.toString().charAt(0) : '0';
		mins2 = (mins >= 10) ? mins.toString().charAt(1) : mins.toString().charAt(0);
		amount = amount % 60;
		secs = Math.floor(amount);
		secs1 = (secs >= 10) ? secs.toString().charAt(0) : '0';
		secs2 = (secs >= 10) ? secs.toString().charAt(1) : secs.toString().charAt(0);
		out = "<div class='countbox-num'><div class='countbox-days1'><span></span>" + days1 + "</div><div class='countbox-days2'><span></span>" + days2 + "</div><div class='countbox-days-text'></div></div>" +
		"<div class='countbox-space'></div>" +
		"<div class='countbox-num'><div class='countbox-hours1'><span></span>" + hours1 + "</div><div class='countbox-hours2'><span></span>" + hours2 + "</div><div class='countbox-hours-text'></div></div>" +
		"<div class='countbox-space'></div>" +
		"<div class='countbox-num'><div class='countbox-mins1'><span></span>" + mins1 + "</div><div class='countbox-mins2'><span></span>" + mins2 + "</div><div class='countbox-mins-text'></div></div>" +
		"<div class='countbox-space'></div>" +
		"<div class='countbox-num'><div class='countbox-secs1'><span></span>" + secs1 + "</div><div class='countbox-secs2'><span></span>" + secs2 + "</div><div class='countbox-secs-text'></div></div>";
		$(".countbox").html(out);
		setTimeout("CountBox()", 1e3)
	}
}
month = --month;
dateFuture = new Date(year, month, day, hour, minute, sec);
window.onload = function () {
	CountBox()
}
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
  • Zakonoposlushniy
    @Zakonoposlushniy
    Решил проблему добавлением такого скрипта
    (function($) {
      var units = {
          en: ['Days', 'Hours', 'Minutes', 'Seconds'],
          ru: ['дней', 'часов', 'минут', 'секунд'],
          ua: ['днів', 'годин', 'хвилин', 'секунд'],
          kz: ['күн', 'сағат', 'минут', 'секунд'],
          sec: [86400, 3600, 60, 1]
        },
        defaults = {
          etType: 1,
          etDate: '0',
          etTitleText: '',
          etTitleSize: 14,
          etShowSign: 1,
          etSep: ':',
          etFontFamily: 'Arial',
          etTextColor: 'black',
          etPaddingTB: 0,
          etPaddingLR: 0,
          etBackground: 'transparent',
          etBorderSize: 0,
          etBorderRadius: 0,
          etBorderColor: 'transparent',
          etShadow: '',
          etLastUnit: 4,
          etNumberFontFamily: 'Arial',
          etNumberSize: 32,
          etNumberColor: 'black',
          etNumberPaddingTB: 0,
          etNumberPaddingLR: 0,
          etNumberBackground: 'transparent',
          etNumberBorderSize: 0,
          etNumberBorderRadius: 0,
          etNumberBorderColor: 'transparent',
          etNumberShadow: ''
        };
    
      $.fn.eTimer = function(options) {
        var config = $.extend({}, defaults, options);
    
        return this.each(function() {
          var element = $(this),
            date = config.etDate,
            dayNum = 2;
    
          element.date = function() {
            var now = new Date();
            if (config.etType == 1) {
              date = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
            } else if (config.etType == 2) {
              var day = now.getDay();
              if (day == 0) day = 7;
              date = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 8 - day);
            } else if (config.etType == 3) {
              date = new Date(now.getFullYear(), now.getMonth() + 1, 1);
            } else {
              date = date.split('.');
              date = new Date(date[2], date[1] - 1, date[0], date[3], date[4]);
              if (Math.floor((date - now) / units.sec[0] / 1000) >= 100) dayNum = 3;
            }
          };
    
          element.layout = function() {
            var unit,
              elClass = element.attr('class').split(' ')[0];
            element.html('').addClass('eTimer').append('<div class="etTitle">' + config.etTitleText + '</div>');
            $.each(units.en, function(i) {
              if (i < config.etLastUnit) {
                unit = $('<div class="etUnit et' + this + '"></div>').appendTo(element).append('<div class="etNumber">0</div>').append('<div class="etNumber">0</div>').after('<div class="etSep">' + config.etSep + '</div>');
                if (i == 0 && dayNum == 3) unit.append('<div class="etNumber">0</div>');
                if (config.etShowSign == 1) unit.append('<div class="etSign">' + units.ru[i] + '</div>');
                if (config.etShowSign == 2) unit.append('<div class="etSign">' + units.en[i].toLowerCase() + '</div>');
                if (config.etShowSign == 3) unit.append('<div class="etSign">' + units.ua[i] + '</div>');
                if (config.etShowSign == 4) unit.append('<div class="etSign">' + units.kz[i] + '</div>');
              }
            });
            element.append('<style type="text/css">.' + elClass + ' {display: inline-block; line-height: normal; font-family: ' + config.etFontFamily + '; color: ' + config.etTextColor + '; padding: ' + config.etPaddingTB + 'px ' + config.etPaddingLR + 'px; background: ' + config.etBackground + '; border: ' + config.etBorderSize + 'px solid ' + config.etBorderColor + '; -webkit-border-radius: ' + config.etBorderRadius + 'px; -moz-border-radius: ' + config.etBorderRadius + 'px; border-radius: ' + config.etBorderRadius + 'px; -webkit-box-shadow: ' + config.etShadow + '; -moz-box-shadow: ' + config.etShadow + '; box-shadow: ' + config.etShadow + ';} .' + elClass + ' .etTitle {margin-bottom: 10px; font-size: ' + config.etTitleSize + 'px;} .' + elClass + ' .etUnit {display: inline-block;} .' + elClass + ' .etUnit .etNumber {display: inline-block; margin: 1px; text-align: center; font-family: ' + config.etNumberFontFamily + '; font-size: ' + config.etNumberSize + 'px; color: ' + config.etNumberColor + '; padding: ' + config.etNumberPaddingTB + 'px ' + config.etNumberPaddingLR + 'px; background: ' + config.etNumberBackground + '; border: ' + config.etNumberBorderSize + 'px solid ' + config.etNumberBorderColor + '; -webkit-border-radius: ' + config.etNumberBorderRadius + 'px; -moz-border-radius: ' + config.etNumberBorderRadius + 'px; border-radius: ' + config.etNumberBorderRadius + 'px; -webkit-box-shadow: ' + config.etNumberShadow + '; -moz-box-shadow: ' + config.etNumberShadow + '; box-shadow: ' + config.etNumberShadow + ';} .' + elClass + ' .etUnit .etSign {text-align: center; font-size: ' + (+config.etNumberSize / 2.5) + 'px;} .' + elClass + ' .etSep {display: inline-block; vertical-align: top; font-size: ' + config.etNumberSize + 'px; padding: ' + (+config.etNumberPaddingTB + +config.etNumberBorderSize) + 'px 5px;} .' + elClass + ' .etSep:last-of-type {display: none;}</style>').append('<style type="text/css">.' + elClass + ' .etUnit .etNumber {width: ' + $('.etNumber:visible').eq(0).css('width') + ';}</style>');
          };
    
          element.tick = function() {
            var timeLeft = Math.floor((date - new Date()) / 1000),
              unit;
            if (timeLeft < 0) clearInterval(element.data('interval'));
            else {
              $.each(units.en, function(i) {
                if (i < config.etLastUnit) {
                  unit = Math.floor(timeLeft / units.sec[i]);
                  timeLeft -= unit * units.sec[i];
                  if (i == 0 && dayNum == 3) {
                    element.find('.et' + this).find('.etNumber').eq(0).text(Math.floor(unit / 100) % 10);
                    element.find('.et' + this).find('.etNumber').eq(1).text(Math.floor(unit / 10) % 10);
                    element.find('.et' + this).find('.etNumber').eq(2).text(unit % 10);
                    if ((Math.floor(unit / 100) % 10) == 0) {
                      dayNum = 2;
                      element.find('.et' + this).find('.etNumber').eq(0).remove();
                    }
                  } else {
                    element.find('.et' + this).find('.etNumber').eq(0).text(Math.floor(unit / 10) % 10);
                    element.find('.et' + this).find('.etNumber').eq(1).text(unit % 10);
                  }
                }
              });
            }
          };
    
          clearInterval(element.data('interval'));
          element.date();
          element.layout();
          element.tick();
          element.data('interval', setInterval(function() {
            element.tick()
          }, 1000));
        });
      };
    })(jQuery);
    Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы