计数器计时器 onclick javascript答案

【问题标题】：counterup timer onclick javascript计数器计时器 onclick javascript
【发布时间】：2017-11-22 08:36:19
【问题描述】：

我有一个计数脚本，我把它放在一个模式中，我在触发器中添加了 onclick 事件，但我的问题是当页面加载时计数器开始工作。当我在 30 秒后打开模式弹出窗口时，计数器显示 30 秒......我希望它在打开模式弹出窗口时从 0 开始我有如下触发

var count1=0; 
var counter1=setInterval(myTimerUp, 1000); //1000 will  run it every 1 second
function myTimerUp()
{
  count1=count1+1;
  if (count1 == 100)
  {
    clearInterval(counter);
    return;
  }

  document.getElementById("timerUp").innerHTML="This pop-up is running from "+ count1 + " secs"; // watch for spelling
}

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exModal1button" onclick="myTimerUp()">Pop-up manual trigger </button>
<span id="timerUp"></span>

【问题讨论】：

请养成添加sn-p的习惯。
@RajkumarSomasundaram 添加了 sn-p

标签： javascript timer onclick counter

【解决方案1】：

我已经稍微调整了你的代码，让它工作

我只在按钮点击时调用 setTimeInterval

window.onload = loadScript();
function loadScript() {
document.getElementById("popUpButton").onclick = function() {
setInterval(myTimerUp, 1000);
}
var count1=0; 
var counter1;
function myTimerUp() {  
count1=count1+1;
  if (count1 == 100) {
     clearInterval(counter);
     return;
  }
 document.getElementById("timerUp").innerHTML="This pop-up is running from "+ count1 + " secs"; // watch for spelling
}
}

<button type="button" id="popUpButton" class="btn btn-primary" data-toggle="modal" data-target="#exModal1button">Pop-up manual trigger </button>
<span id="timerUp"></span>

【讨论】：

【解决方案2】：

var count1=0; 
var counter1=setInterval(myTimerUp, 1000)

由于这些行没有在任何函数内部定义，它们将在 js 文件加载时执行。

你可以修改代码如下：-

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exModal1button" onclick="startTimer()">Pop-up manual trigger </button>

JS 代码：-

var count1=0; 
var counter1;

function startTimer(){
  if(counter1) clearInterval(counter1) // to clear interval if in case you closed modal before count1 reaches 100 and reopen model again (clearInterval should have been called when modal closes)
  count1 = 0;
  counter1=setInterval(myTimerUp, 1000);
}

function myTimerUp(){
  count1=count1+1;
  if (count1 == 100)
    clearInterval(counter1);
  else
    document.getElementById("timerUp").innerHTML="This pop-up is running from "+ count1 + " secs"; // watch for spelling
}

【讨论】：

乐于助人:)

【解决方案3】：

您在脚本开头调用setInterval，因此计数器从头开始递增。

您必须在第一次调用函数时设置它。

var count1=0; 
var counter1;
function myTimerUp()
{
  //Start the setInterval only on the first time myTimerUp is run.
  if(!counter1) {
     counter1 = setInterval(myTimerUp, 1000); //1000 will run it every 1 second
  }
  count1=count1+1;
  if (count1 == 100)
  {
     clearInterval(counter1);
     return;
  }

 document.getElementById("timerUp").innerHTML="This pop-up is running from "+ count1 + " secs"; // watch for spelling
}

另外，请注意：我已经修正了您原始代码的错字：clearInterval(counter) 变为 clearInterval(counter1)：没有定义 counter 变量。

【讨论】：