javascript - 简直倒计时

标签 javascript web

这可能是一个简单的问题,但我正在尝试在 JS 中使用 SimplyCountdown 进行倒计时。现在,我更改了参数并且日期没有重置。我尝试了很多东西,但它仍然有同样的问题。谁能帮我解决这个问题?

那是我在 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>

我的 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));
    }

非常感谢您的帮助!

最佳答案

这是我做的

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

关于javascript - 简直倒计时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42217332/

相关文章:

javascript - 得到两个不同的日期月份

javascript - 如何使用 AngularJS 在我的 html 页面中的样式中添加一个值

Git忽略删除的文件

javascript运行时错误函数未定义

javascript - 垂直或水平页面滚动

javascript - 使用 JQuery 在 textarea 中获取光标位置和突出显示的文本

Firebase Firestore 分离监听器不起作用

javascript - img.click() 函数数组

javascript - 无法引用 d3js 中的数据对象

javascript - 用js获取mp3文件频率数据