Question

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

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 1

您在脚本的开头调用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个变量。

Answer 2

我稍微调整了你的代码，以使其正常工作

我只在点击按钮

时调用setTimeInterval

＆＃13;

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
}
}

＆＃13;

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

＆＃13;

Answer 3

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
}

反击计时器onclick javascript

3 个答案: