2017-02-14 7 views
0

Так может быть и простой вопрос, но я пытаюсь сделать обратный отсчет с помощью SimplyCountdown в JS. Теперь я изменяю параметр, и дата не сбрасывается. Я пробовал несколько вещей, но у него все еще есть одна и та же проблема. Может ли кто-нибудь помочь мне с этим?Просто обратный отсчет

Это мой код в пределах index.html.

<script> 
var d = new Date(new Date().getTime() + 200 * 120 * 120 * 2000); 

// default example 
simplyCountdown('.simply-countdown-one', { 
    year: d.getFullYear(), 
    month: d.getMonth() + 1, 
    day: d.getDate() 
}); 

//jQuery example 
$('#simply-countdown-losange').simplyCountdown({ 
    year: d.getFullYear(), 
    month: d.getMonth() + 1, 
    day: d.getDate(), 
    enableUtc: false 
}); 
</script> 

My JS выглядит следующим образом.

(function (exports) { 
    'use strict'; 

    var // functions 
    extend, 
    createElements, 
    createCountdownElt, 
    simplyCountdown; 

/** 
* Function that merge user parameters with defaults one. 
* @param out 
* @returns {*|{}} 
*/ 
extend = function (out) { 
    var i, 
     obj, 
     key; 
    out = out || {}; 

    for (i = 1; i < arguments.length; i += 1) { 
     obj = arguments[i]; 

     if (obj) { 
      for (key in obj) { 
       if (obj.hasOwnProperty(key)) { 
        if (typeof obj[key] === 'object') { 
         extend(out[key], obj[key]); 
        } else { 
         out[key] = obj[key]; 
        } 
       } 
      } 
     } 
    } 

    return out; 
}; 

/** 
* Function that create a countdown section 
* @param countdown 
* @param parameters 
* @param typeClass 
* @returns {{full: (*|Element), amount: (*|Element), word: (*|Element)}} 
*/ 
createCountdownElt = function (countdown, parameters, typeClass) { 
    var innerSectionTag, 
     sectionTag, 
     amountTag, 
     wordTag; 

    sectionTag = document.createElement('div'); 
    amountTag = document.createElement('span'); 
    wordTag = document.createElement('span'); 
    innerSectionTag = document.createElement('div'); 

    innerSectionTag.appendChild(amountTag); 
    innerSectionTag.appendChild(wordTag); 
    sectionTag.appendChild(innerSectionTag); 

    sectionTag.classList.add(parameters.sectionClass); 
    sectionTag.classList.add(typeClass); 
    amountTag.classList.add(parameters.amountClass); 
    wordTag.classList.add(parameters.wordClass); 

    countdown.appendChild(sectionTag); 

    return { 
     full: sectionTag, 
     amount: amountTag, 
     word: wordTag 
    }; 
}; 

/** 
* Function that create full countdown DOM elements calling createCountdownElt 
* @param parameters 
* @param countdown 
* @returns {{days: (*|Element), hours: (*|Element), minutes: (*|Element), seconds: (*|Element)}} 
*/ 
createElements = function (parameters, countdown) { 
    var spanTag; 

    if (!parameters.inline) { 
     return { 
      days: createCountdownElt(countdown, parameters, 'simply-days-section'), 
      hours: createCountdownElt(countdown, parameters, 'simply-hours-section'), 
      minutes: createCountdownElt(countdown, parameters, 'simply-minutes-section'), 
      seconds: createCountdownElt(countdown, parameters, 'simply-seconds-section') 
     }; 
    } 

    spanTag = document.createElement('span'); 
    spanTag.classList.add(parameters.inlineClass); 
    return spanTag; 
}; 

    /** 
    * simplyCountdown, create and display the coundtown. 
     * @param elt 
     * @param args (parameters) 
     */ 
    simplyCountdown = function (elt, args) { 
    var parameters = extend({ 
      year: 2017, 
      month: 10, 
      day: 29, 
      hours: 0, 
      minutes: 0, 
      seconds: 0, 
      words: { 
       days: 'day', 
       hours: 'hour', 
       minutes: 'minute', 
       seconds: 'second', 
       pluralLetter: 's' 
      }, 
      plural: true, 
      inline: false, 
      enableUtc: true, 
      onEnd: function() { 
       return; 
      }, 
      refresh: 1000, 
      inlineClass: 'simply-countdown-inline', 
      sectionClass: 'simply-section', 
      amountClass: 'simply-amount', 
      wordClass: 'simply-word', 
      zeroPad: false 
     }, args), 
     interval, 
     targetDate, 
     targetTmpDate, 
     now, 
     nowUtc, 
     secondsLeft, 
     days, 
     hours, 
     minutes, 
     seconds, 
     cd = document.querySelectorAll(elt); 

    targetTmpDate = new Date(
     parameters.year, 
     parameters.month - 1, 
     parameters.day, 
     parameters.hours, 
     parameters.minutes, 
     parameters.seconds 
    ); 

    if (parameters.enableUtc) { 
     targetDate = new Date(
      targetTmpDate.getUTCFullYear(), 
      targetTmpDate.getUTCMonth(), 
      targetTmpDate.getUTCDate(), 
      targetTmpDate.getUTCHours(), 
      targetTmpDate.getUTCMinutes(), 
      targetTmpDate.getUTCSeconds() 
     ); 
    } else { 
     targetDate = targetTmpDate; 
    } 

    Array.prototype.forEach.call(cd, function (countdown) { 
     var fullCountDown = createElements(parameters, countdown), 
      refresh; 

     refresh = function() { 
      var dayWord, 
       hourWord, 
       minuteWord, 
       secondWord; 

      now = new Date(); 
      if (parameters.enableUtc) { 
       nowUtc = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 
        now.getHours(), now.getMinutes(), now.getSeconds()); 
       secondsLeft = (targetDate - nowUtc.getTime())/1000; 

      } else { 
       secondsLeft = (targetDate - now.getTime())/1000; 
      } 

      if (secondsLeft > 0) { 
       days = parseInt(secondsLeft/86400, 10); 
       secondsLeft = secondsLeft % 86400; 

       hours = parseInt(secondsLeft/3600, 10); 
       secondsLeft = secondsLeft % 3600; 

       minutes = parseInt(secondsLeft/60, 10); 
       seconds = parseInt(secondsLeft % 60, 10); 
      } else { 
       days = 0; 
       hours = 0; 
       minutes = 0; 
       seconds = 0; 
       window.clearInterval(interval); 
       parameters.onEnd(); 
      } 

      if (parameters.plural) { 
       dayWord = days > 1 
        ? parameters.words.days + parameters.words.pluralLetter 
        : parameters.words.days; 

       hourWord = hours > 1 
        ? parameters.words.hours + parameters.words.pluralLetter 
        : parameters.words.hours; 

       minuteWord = minutes > 1 
        ? parameters.words.minutes + parameters.words.pluralLetter 
        : parameters.words.minutes; 

       secondWord = seconds > 1 
        ? parameters.words.seconds + parameters.words.pluralLetter 
        : parameters.words.seconds; 

      } else { 
       dayWord = parameters.words.days; 
       hourWord = parameters.words.hours; 
       minuteWord = parameters.words.minutes; 
       secondWord = parameters.words.seconds; 
      } 

      /* display an inline countdown into a span tag */ 
      if (parameters.inline) { 
       countdown.innerHTML = 
        days + ' ' + dayWord + ', ' + 
        hours + ' ' + hourWord + ', ' + 
        minutes + ' ' + minuteWord + ', ' + 
        seconds + ' ' + secondWord + '.'; 

      } else { 
       fullCountDown.days.amount.textContent = (parameters.zeroPad && days.toString().length < 2 ? '0' : '') + days; 
       fullCountDown.days.word.textContent = dayWord; 

       fullCountDown.hours.amount.textContent = (parameters.zeroPad && hours.toString().length < 2 ? '0' : '') + hours; 
       fullCountDown.hours.word.textContent = hourWord; 

       fullCountDown.minutes.amount.textContent = (parameters.zeroPad && minutes.toString().length < 2 ? '0' : '') + minutes; 
       fullCountDown.minutes.word.textContent = minuteWord; 

       fullCountDown.seconds.amount.textContent = (parameters.zeroPad && seconds.toString().length < 2 ? '0' : '') + seconds; 
       fullCountDown.seconds.word.textContent = secondWord; 
      } 
     }; 

     // Refresh immediately to prevent a Flash of Unstyled Content 
     refresh(); 
     interval = window.setInterval(refresh, parameters.refresh); 
    }); 
}; 

exports.simplyCountdown = simplyCountdown; 
    }(window)); 

    /*global $, jQuery, simplyCountdown*/ 
    if (window.jQuery) { 
    (function ($, simplyCountdown) { 
    'use strict'; 

    function simplyCountdownify(el, options) { 
     simplyCountdown(el, options); 
    } 

    $.fn.simplyCountdown = function (options) { 
     return simplyCountdownify(this.selector, options); 
    }; 
}(jQuery, simplyCountdown)); 
    } 

Большое спасибо за вашу помощь!

ответ

0

Это то, что я сделал

$('#simply-countdown-losange').simplyCountdown({ 
    year: 2017, 
    month: 12, 
    day: 25, 
    enableUtc: true 
}); 
+0

ничего себе, не могу поверить я пропустил, что это сработало! Большое спасибо! – Suligane

Смежные вопросы