大家好，我需要 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-->
你能看看这个吗？我只添加了一些div和样式。这里 jsfiddle 链接。我认为它有效。