同一页面上的多个倒计时

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

你可以声明一次函数，然后通过参数调用它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>