Question

大家好我需要帮助css 这里是我的事件的js倒计时器，但我需要让它响应，我怎么能使计时器响应。适用于所有浏览器，移动设备和平板电脑设备

JS

function startCountdown(dates, elem, format) {
var now = new Date(),
    index = 0,
    targetDate;
// Returns the next date a specific month/day combination occurs.
function nextDateOccurs(arr) {
    var monthNotYet = now.getMonth() < arr[0] - 1,
        dayNotYet = now.getMonth() == arr[0] - 1 && now.getDate() < arr[1];

    if (monthNotYet || dayNotYet) {
        // Date will pass within this calendar year
        return new Date(now.getFullYear(), arr[0] - 1, arr[1]);
    } else {
        // Date has already passed within this calendar year
        return new Date(now.getFullYear() + 1, arr[0] - 1, arr[1]);
    }
}

// Returns the numeric argument followed by the singular
// or plural name of the item as is correct (and then
// a space character).
function formatQuantity(num, singular, plural) {
    return num + " " + (num == 1 ? singular : plural) + " ";
}

// Pick the target date that is closest.
for (var j = 0; j < dates.length; ++j) {
    if (nextDateOccurs(dates[j]) < nextDateOccurs(dates[index])) {
        index = j;
    }
}

// Make a Date object for the target date.
targetDate = nextDateOccurs(dates[index]);

// Update the countdown every second.
function updateCountdown() {
    var months = 0,
        millis, advNow, advNow1, words = "";

    // Update now with the current date and time.
    advNow1 = now = new Date();

    // Has the target date already passed?
    if (now >= targetDate) {
        millis = 0;
    } else {
        // Find the last time that is a whole number of months past now
        // but less than one month before the target date.
        while (advNow1 < targetDate) {
            ++months;
            advNow = advNow1;
            advNow1 = new Date(now);
            advNow1.setMonth(now.getMonth() + months);
        }--months;

        // Find the time difference in milliseconds within the month.
        millis = targetDate - advNow;
    }

    // Turn that into months, days, hours, minutes, and seconds.
    words += formatQuantity(months, "month", "months");
    words += formatQuantity(Math.floor(millis / 864e5), "day", "days");
    words += formatQuantity(Math.floor(millis % 864e5 / 36e5), "hour", "hours");

    // Update the element.
    elem.innerHTML = format.replace(/%NAME%/g, dates[index][2])
        .replace(/%WORDS%/g, words);
}
updateCountdown();
setInterval(updateCountdown, 1000);
}

function countdownSettings() {
startCountdown([
// Change the dates here to customize the script.
[12, 30, "Awesome Event here"],
    [2, 28, "countdown2"],
   [7, 29, "countdown3"],

    ],
/* Element to update */
document.getElementById("countdown"),
/* Format of HTML inserted */
    "%NAME% <br> <br> <br> %WORDS%");
}

// Run the script only after the page has fully loaded
// to ensure that elements are accessible from the DOM.
if (window.addEventListener) {
window.addEventListener("load", countdownSettings, false);
} else {
window.attachEvent("onload", countdownSettings);
}

countdownSettings()


WebFontConfig = {
google: {
    families: ['Open+Sans:600,800,400:latin']
}
};
(function () {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();

CSS

#mc_embed_signup {
background:#888;
clear:left;
font:14px Helvetica, Arial, sans-serif;
}
body {
 text-align: center;
}
p {
color: #F8F8F8;
font-weight:bold;
font-family: Open Sans, sans-serif;
font-size: 48px;
}
h1 {
color: #F8F8F8;
font-weight: semibold;
font-family: Open Sans, sans-serif;
font-size: 28px;
}
h2 {
color: #000;
font-family: Open Sans, sans-serif;
font-size: 15px;
}

HTML

<body bgcolor="#888">
 <h2>nextcountdown</h2>

 <h1>next countdown</h1>

<p id="countdown"http://jsfiddle.net/> </p>
 <h1>Don't miss out! Get  Reminder for our awesome event</h1>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
    <form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
            <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
            <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
            <div>
                <input type="text" name=" tabindex="-1" value="">
            </div>
            <div class="clear">
                <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
            </div>
        </div>
    </form>
</div>
</body>
<!--End mc_embed_signup-->

Answer 1

你能看看吗？我只添加了一些div和风格。这里有 jsfiddle个链接。我认为它有效。

Js倒计时器css格式化/自定义

1 个答案: