카운터 업 타이머 onclick javascript

Question

카운트 업 스크립트가 있는데, 모달에 넣었습니다. 트리거에 onclick 이벤트를 추가했지만 문제는 페이지가로드 될 때 카운터가 작동한다는 것입니다. 내가 30 초 후 모달 팝업을 열었을 때, 카운터는 ... 내가 모달 팝업이 나는 트리거

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>

다음과 같이이 를 개설되는 때 0에서 시작하려는 30 초를 보였다

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 
} 

플러스 Wa tch O ut에 : 나는 원래 코드에 오타를 수정했습니다 clearInterval(counter)는 clearInterval(counter1)된다 : 정의 된 counter 변수가 없습니다.

Answer 2

이 라인이 정의되어 있지 않기 때문에 나는

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>

Answer 3

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

를 클릭하여이 난 단지 버튼을 setTimeInterval를 호출하고

을 작동하려면 코드가 조금 쥐게했다 어떤 함수 내부에서도 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 
}