Question

我道歉，因为我确实看到了这篇文章（Simply countdown）但是对于我的生活，我无法让它发挥作用。我试图为我的未婚夫为我们的婚礼网站设置这个（我知道，我知道），这让我很高兴，任何帮助都非常感谢。 JS不是我的强项，所以如果你能愚蠢地回答任何答案，我会很感激！（注意，在代码块中获取整个JS脚本时遇到问题，如果需要更多脚本，请告诉我）

HTML（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: 2018,
            month: 10,
            day: 27,
            hours: 0,
            minutes: 0,
            seconds: 0,
    year: d.getFullYear(),
    month: d.getMonth() + 1,
    day: d.getDate(),
    enableUtc: true
});

JS（simplyCountdown.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: 2018,
            month: 10,
            day: 27,
            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;

Answer 1

我知道这不是我的代码，但我对此解决方案印象非常深刻。此外，它对于JavaScript新手来说也很容易使用。

＆＃13;

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(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

＆＃13;

body{
  text-align: center;
  background: #00ECB9;
  font-family: sans-serif;
  font-weight: 100;
}

h1{
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

#clockdiv{
  font-family: sans-serif;
  color: #fff;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
}

#clockdiv > div{
  padding: 10px;
  border-radius: 3px;
  background: #00BF96;
  display: inline-block;
}

#clockdiv div > span{
  padding: 15px;
  border-radius: 3px;
  background: #00816A;
  display: inline-block;
}

.smalltext{
	padding-top: 5px;
	font-size: 16px;
}

＆＃13;

<h1>Countdown Clock</h1>
<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

＆＃13;

Answer 2

有点晚了，但是看起来日期已经传递到了simpleCountdown参数中。只需将值硬编码为html中所需的内容即可。

simplyCountdown('.simply-countdown-one', {
    year: 2025,
    month: 10,
    day: 23
});

simplyCountdown.js无法更改默认倒计时

2 个答案: