Question

9月21日，我与女友结婚。婚礼前，我为亲朋好友建立了一个网站。我买了一个模板，然后进行一些更改。

现在，在婚礼之后，我想将JS upcounter（更改为日期）更改为可以为我们计数天数的柜台。。 1个月3天的婚礼。我给JS作者发了一封电子邮件，但他帮不了我。.所以也许有人可以帮我，（帮我做），因为我对此事不屑一顾。

网站名称= www.lars-desiree.nl

Answer 1

如果其他人希望此时钟计数：

与secondsLeft =交换时间
我添加了单/复数单词，因为荷兰语将完整的单词更改为复数形式
我删除了多余的jquery示例
我将日期更改为中午的结婚日 var d = new Date(2018, 8, 21, 12, 0, 0, 0); // trouwdatum

/*!
 * Project : simply-countdown
 * File : simplyCountdown
 * Date : 27/06/2015
 * License : MIT
 * Version : 1.3.2
 * Author : Vincent Loy <vincent.loy1@gmail.com>
 * Contributors : 
 *  - Justin Beasley <JustinB@harvest.org>
 *  - Nathan Smith <NathanS@harvest.org>
 */
/*global window, document*/
(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: 9,
        day: 21,
        hours: 0,
        minutes: 0,
        seconds: 0,
        words: {
          day: 'dag',
          days: 'dagen',
          hour: 'uur',
          hours: 'uren',
          minute: 'minuut',
          minutes: 'minuten',
          second: 'second',
          seconds: 'seconden',
          pluralLetter: ''
        },
        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 = (nowUtc.getTime() - targetDate) / 1000;

        } else {
          secondsLeft = (now.getTime() - targetDate) / 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.day;

          hourWord = hours > 1 ?
            parameters.words.hours :
            parameters.words.hour;

          minuteWord = minutes > 1 ?
            parameters.words.minutes :
            parameters.words.minute;

          secondWord = seconds > 1 ?
            parameters.words.seconds :
            parameters.words.second;

        } 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));
}

var d = new Date(2018, 8, 21, 12, 0, 0, 0); // trouwdatum

// default example
simplyCountdown('.simply-countdown-one', {
  year: d.getFullYear(),
  month: d.getMonth() + 1,
  day: d.getDate()
});

.simply-countdown {
  /* The countdown */
  margin-bottom: 2em;
}

.simply-countdown>.simply-section {
  /* coutndown blocks */
  display: inline-block;
  width: 100px;
  height: 100px;
  background: rgba(241, 78, 149, 0.8);
  margin: 0 4px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  animation: pulse 1s ease infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.simply-countdown>.simply-section>div {
  /* countdown block inner div */
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
  height: 100px;
  width: 100px;
}

.simply-countdown>.simply-section .simply-amount,
.simply-countdown>.simply-section .simply-word {
  display: block;
  color: white;
  /* amounts and words */
}

.simply-countdown>.simply-section .simply-amount {
  font-size: 30px;
  /* amounts */
}

.simply-countdown>.simply-section .simply-word {
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  font-size: 12px;
  /* words */
}

<div class="simply-countdown simply-countdown-one"></div>
<h2>
  <p>Getrouwd&nbsp;</p>
</h2>
</div>

JS更改倒数计数器

1 个答案: