同一页面上的多个倒计时

Question

我修改了帖子，所以可以看到我如何插入第二个计数器。 如您所见，可见但不起作用。 我试图更改变量名称，但也许我错过了一些东西。 请忘记 CSS 格式（只是一个草稿），对我来说真正的斗争是让两个计数器都运行，最终有可能在同一页面上有多个计数器。

 var target_date = new Date().getTime() + (5000 * 3600 * 48); // set the countdown date var days, hours, minutes, seconds; // variables for time units var countdown = document.getElementById("tiles"); // get tag element getCountdown(); setInterval(function() { getCountdown(); }, 1000); function getCountdown() { // find the amount of "seconds" between now and target var current_date = new Date().getTime(); var seconds_left = (target_date - current_date) / 1000; days = pad(parseInt(seconds_left / 86400)); seconds_left = seconds_left % 86400; hours = pad(parseInt(seconds_left / 3600)); seconds_left = seconds_left % 3600; minutes = pad(parseInt(seconds_left / 60)); seconds = pad(parseInt(seconds_left % 60)); // format countdown string + set tag value countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>"; } function pad(n) { return (n < 10? '0': '') + n; } var target_date = new Date().getTime() + (5000 * 3600 * 48); // set the countdown date var days, hours, minutes, seconds; // variables for time units var countdown = document.getElementById("tiles2"); // get tag element getCountdown(); setInterval(function() { getCountdown(); }, 1000); function getCountdown() { // find the amount of "seconds" between now and target var current_date = new Date().getTime(); var seconds_left = (target_date - current_date) / 1000; days = pad(parseInt(seconds_left / 86400)); seconds_left = seconds_left % 86400; hours = pad(parseInt(seconds_left / 3600)); seconds_left = seconds_left % 3600; minutes = pad(parseInt(seconds_left / 60)); seconds = pad(parseInt(seconds_left % 60)); // format countdown string + set tag value countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>"; } function pad(n) { return (n < 10? '0': '') + n; }

 body #countdown { font: normal 13px/20px Arial, Helvetica, sans-serif; word-wrap: break-word; color: black; background: #eb8334; } #countdown { width: 225px; height: 90px; text-align: center; background: #222; background-image: -webkit-linear-gradient(top, #222, #333, #333, #222); background-image: -moz-linear-gradient(top, #222, #333, #333, #222); background-image: -ms-linear-gradient(top, #222, #333, #333, #222); background-image: -o-linear-gradient(top, #222, #333, #333, #222); border: 2px solid #111; border-radius: 5px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6); margin: auto; padding: 0px 0px; position: relative; top: 0px; bottom: 0px; left: 0px; right: 0; } #countdown #tiles { position: relative; z-index: 1; left: -19px; } /* select a specific children of the id selector selected */ #countdown #tiles>span { width: 35px; height: 0px; max-width: 92px; font: bold 28px "Bangers"; text-align: center; color: green; background-color: #ddd; background-image: -webkit-linear-gradient(top, #bbb, #eee); background-image: -moz-linear-gradient(top, #bbb, #eee); background-image: -ms-linear-gradient(top, #bbb, #eee); background-image: -o-linear-gradient(top, #bbb, #eee); border-top: 1px solid #fff; border-radius: 3px; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7); margin: 4px 4px 0px 0px; padding: 23px 4px 40px 0px; display: inline-block; position: relative; top: 0px; } #countdown #tiles>span:before { content: ""; width: 100%; height: -20px; background: #111; display: block; padding: 0px 21px; position: relative; top: 43%; left: -5px; z-index: -1; } /* content of counter */ #countdown #tiles>span:after { content: ""; width: 100%; height: 0px; background: white; border-top: 2px solid #333; border-bottom: 1px solid white; display: block; position: absolute; top: 60%; } #countdown.labels { width: 100%; height: 0px; text-align: center; position: relative; bottom: 0px; left: -22px; } #countdown.labels li { padding: 0.6px; width: 43px; font: bold 11px "Droid Sans", Arial, sans-serif; color: black; text-shadow: 1px 1px 0px #000; /* word-spacing: -10px; */ text-align: center; text-transform: uppercase; display: inline-block; } body #countdown2 { font: normal 13px/20px Arial, Helvetica, sans-serif; word-wrap: break-word; color: black; background: #eb8334; } #countdown2 { width: 205px; height: 40px; text-align: center; background: #222; background-image: -webkit-linear-gradient(top, #222, #333, #333, #222); background-image: -moz-linear-gradient(top, #222, #333, #333, #222); background-image: -ms-linear-gradient(top, #222, #333, #333, #222); background-image: -o-linear-gradient(top, #222, #333, #333, #222); border: 2px solid #111; border-radius: 5px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6); margin: auto; padding: 0px 0px; position: relative; top: 0px; bottom: 0px; left: 0px; right: 0; } #countdown2 #tiles2 { position: relative; z-index: 1; left: -19px; } /* select a specific children of the id selector selected */ #countdown2 #tiles2>span { width: 35px; height: 0px; max-width: 92px; font: bold 28px "Bangers"; text-align: center; color: green; background-color: #ddd; background-image: -webkit-linear-gradient(top, #bbb, #eee); background-image: -moz-linear-gradient(top, #bbb, #eee); background-image: -ms-linear-gradient(top, #bbb, #eee); background-image: -o-linear-gradient(top, #bbb, #eee); border-top: 1px solid #fff; border-radius: 3px; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7); margin: 4px 4px 0px 0px; padding: 23px 4px 40px 0px; display: inline-block; position: relative; top: 0px; } #countdown2 #tiles2>span:before { content: ""; width: 100%; height: -20px; background: #111; display: block; padding: 0px 21px; position: relative; top: 43%; left: -5px; z-index: -1; } /* content of counter */ #countdown2 #tiles2>span:after { content: ""; width: 100%; height: 2px; background: white; border-top: 2px solid #333; border-bottom: 1px solid white; display: block; position: absolute; top: 55%; } #countdown2.labels2 { width: 100%; height: 0px; text-align: center; position: relative; bottom: 0px; left: -2px; } #countdown2.labels2 li { padding: 0.6px; width: 43px; font: bold 11px "Droid Sans", Arial, sans-serif; color: white; text-shadow: 1px 1px 0px #000; /* word-spacing: -10px; */ text-align: center; text-transform: uppercase; display: inline-block; }

 <div id="countdown"> <div id="tiles"></div> <div class="labels"> <li>Days</li> <li>Hours</li> <li>Mins</li> <li>Secs</li> </div> </div> </div> </div> <div id="countdown2"> <div id="tiles2"></div> <div class="labels2"> <li>Days</li> <li>Hours</li> <li>Mins</li> <li>Secs</li> </div> </div> </div> </div>

我需要这方面的帮助。 真的让我很难受。 我来自 Python，对 JavaScript 了解不多。 我想知道如何在同一页面上有多个计数器。 我成功地拥有了一个，但是当我插入第二个计数器时，实际倒计时并没有发生。

我添加了我的 html css 和 Javascript。

谢谢！

 var target_date = new Date().getTime() + (5000*3600*48); // set the countdown date var days, hours, minutes, seconds; // variables for time units var countdown = document.getElementById("tiles"); // get tag element getCountdown(); setInterval(function () { getCountdown(); }, 1000); function getCountdown(){ // find the amount of "seconds" between now and target var current_date = new Date().getTime(); var seconds_left = (target_date - current_date) / 1000; days = pad( parseInt(seconds_left / 86400) ); seconds_left = seconds_left % 86400; hours = pad( parseInt(seconds_left / 3600) ); seconds_left = seconds_left % 3600; minutes = pad( parseInt(seconds_left / 60) ); seconds = pad( parseInt( seconds_left % 60 ) ); // format countdown string + set tag value countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>"; } function pad(n) { return (n < 10? '0': '') + n; }

 body #countdown { font: normal 13px/20px Arial, Helvetica, sans-serif; word-wrap: break-word; color: black; background: #eb8334; } #countdown { width: 225px; height: 90px; text-align: center; background: #222; background-image: -webkit-linear-gradient(top, #222, #333, #333, #222); background-image: -moz-linear-gradient(top, #222, #333, #333, #222); background-image: -ms-linear-gradient(top, #222, #333, #333, #222); background-image: -o-linear-gradient(top, #222, #333, #333, #222); border: 2px solid #111; border-radius: 5px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6); margin: auto; padding: 0px 0px; position: relative; top: 0px; bottom: 0px; left: 0px; right: 0; } #countdown #tiles { position: relative; z-index: 1; left: -19px; } /* select a specific children of the id selector selected */ #countdown #tiles > span { width: 35px; height: 0px; max-width: 92px; font: bold 28px "Bangers"; text-align: center; color: green; background-color: #ddd; background-image: -webkit-linear-gradient(top, #bbb, #eee); background-image: -moz-linear-gradient(top, #bbb, #eee); background-image: -ms-linear-gradient(top, #bbb, #eee); background-image: -o-linear-gradient(top, #bbb, #eee); border-top: 1px solid #fff; border-radius: 3px; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7); margin: 4px 4px 0px 0px; padding: 23px 4px 40px 0px; display: inline-block; position: relative; top:0px; } #countdown #tiles > span:before { content: ""; width: 100%; height: -20px; background: #111; display: block; padding: 0px 21px; position: relative; top: 43%; left: -5px; z-index: -1; } /* content of counter */ #countdown #tiles > span:after { content: ""; width: 100%; height: 0px; background: white; border-top: 2px solid #333; border-bottom: 1px solid white; display: block; position: absolute; top: 60%; } #countdown.labels { width: 100%; height: 0px; text-align: center; position: relative; bottom: 0px; left: -22px; } #countdown.labels li { padding: 0.6px; width: 43px; font: bold 11px "Droid Sans", Arial, sans-serif; color: black; text-shadow: 1px 1px 0px #000; /* word-spacing: -10px; */ text-align: center; text-transform: uppercase; display: inline-block; }

 <div id="countdown"> <div id="tiles"></div> <div class="labels"> <li>Days</li> <li>Hours</li> <li>Mins</li> <li>Secs</li> </div> </div> </div> </div>

Answer 1

这是基本结构。 根据需要修改

 function getCountdown() { var cnt = 0; var id = document.getElementById(event.target.id); setInterval(function() { cnt++; id.innerHTML = cnt; }, 1000); }

 <div id='counter1' onclick='getCountdown()'>click me</div> <div id='counter2' onclick='getCountdown()'>click me</div>

Answer 2

您可以将 function 声明一次，然后通过参数调用它 2 次：

 var target_date = new Date().getTime() + (5000 * 3600 * 48); // set the countdown date var days, hours, minutes, seconds; // variables for time units var countdown = document.getElementById("tiles"); // get tag element getCountdown(countdown); setInterval(function() { getCountdown(countdown); }, 1000); var countdown2 = document.getElementById("tiles2"); // get tag element getCountdown(countdown2); setInterval(function() { getCountdown(countdown2); }, 1000); function getCountdown(element) { // find the amount of "seconds" between now and target var current_date = new Date().getTime(); var seconds_left = (target_date - current_date) / 1000; days = pad(parseInt(seconds_left / 86400)); seconds_left = seconds_left % 86400; hours = pad(parseInt(seconds_left / 3600)); seconds_left = seconds_left % 3600; minutes = pad(parseInt(seconds_left / 60)); seconds = pad(parseInt(seconds_left % 60)); // format countdown string + set tag value element.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>"; } function pad(n) { return (n < 10? '0': '') + n; }

 <div id="countdown"> <div id="tiles"></div> <div class="labels"> <li>Days</li> <li>Hours</li> <li>Mins</li> <li>Secs</li> </div> </div> </div> </div> <div id="countdown2"> <div id="tiles2"></div> <div class="labels2"> <li>Days</li> <li>Hours</li> <li>Mins</li> <li>Secs</li> </div> </div> </div> </div>