运行相同的javascript for multiply onclicks

时间:2016-07-03 08:14:10

标签: javascript html

基本上我想创建一个链接目录,每次点击链接时都会重新启动链接计时器。

<Script> function countdown(elementName, minutes, seconds) {
  var element, endTime, hours, mins, msLeft, time;

  function twoDigits(n) {
    return (n <= 9 ? "0" + n : n);
  }

  function updateTimer() {
    msLeft = endTime - (+new Date);
    if (msLeft < 1000) {
      element.innerHTML = "countdown's over!";
    } else {
      time = new Date(msLeft);
      hours = time.getUTCHours();
      mins = time.getUTCMinutes();
      element.innerHTML = (hours ? hours + ':' + twoDigits(mins) : mins) + ':' + twoDigits(time.getUTCSeconds());
      setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
    }
  }


  element = document.getElementById(elementName);
  endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
  updateTimer();
}
</script>

<p>
<a onclick='countdown("countdown",
120,0);' href="https://www.bing.com/" target="_blank">Bing</a>
<div id="countdown"></div>
</p>

<p>
<a onclick='countdown("countdown2",
120,0);' href="https://www.google.com.au/" target="_blank">Google</a>
<div id="countdown"></div>
</p>

我遇到的问题是这只会运行一次倒计时。

是否有一种简单的方法,每个链接都有自己的计时器而没有每个链接的脚本?

1 个答案:

答案 0 :(得分:0)

使用不同的div id进行倒计时。

<a onclick='countdown("countdown1",
120,0);' href="https://www.bing.com/" target="_blank">Bing</a>
<div id="countdown1"></div>
</p>

<p>
<a onclick='countdown("countdown2",
120,0);' href="https://www.google.com.au/" target="_blank">Google</a>
<div id="countdown2"></div>
</p>