자바 스크립트를 사용하는 타이머

자바 스크립트를 사용하여 타이머를 구현하고 싶습니다. 간격을 변경하여 타이머를 줄이고 싶습니다.
예. 내 타이머가 500에서 시작됩니다.
레벨에 따라 감소 타이머가 필요합니다.
1. 1 단계 타이머는 1 씩 감소해야하며 감소 속도는 느려야합니다.
2.2nd 수준 타이머는 2로 감소해야하며, 감소 속도는
3.3rd 수준 타이머가 3으로 감소한다 매체해야하며, 감소 속도가해야 빠른
자바 스크립트를 사용하는 타이머

나는 다음과 같은 코드를 사용하여 타이머를 만들 수 있습니다

<script type="text/javascript"> 
var Timer; 
var TotalSeconds; 
function CreateTimer(TimerID, Time) 
{ 
    TotalSeconds=Time; 
    Timer = document.getElementById(TimerID); 
    TotalSeconds = Time; 
    UpdateTimer(); 
    setTimeout("Tick()", 1000); 
} 

function Tick() { 
    TotalSeconds -= 10; 
    if (TotalSeconds>=1) 
    { 
     UpdateTimer(); 
     setTimeout("Tick()", 1000); 
    } 
    else 
    { 
     alert(" Time out "); 
     TotalSeconds=1; 
     Timer.innerHTML = 1; 
    } 
}

을

하지만 여러 번 호출하기 때문에 속도를 제어 할 수 있도록이 CreateTimer() 함수를 여러 번 호출합니다.

출처

2012-02-23 sardar Coder

시간의 변형은 없습니다. 왜 이런 짓을하는? 하나의 타이머를 가지고 시작 값을 설정하고 어떻게 진행되는지 확인할 수 있습니다. – ingyhere

물론 타이머가 작동하는 동안 속도를 수정할 수 있습니다. 단지 가변적 일 필요가 있습니다. – RobG

@ ingyhere 각각의 질문에 대해 각 질문마다 함수의 CreateTimer()를 호출했지만, CreateTimer() 함수를 두 번 호출하면 속도가 빨라지고 게임마다 (퀴즈)를 수행하고 있습니다. 타이머 속도가 항상 같은 이유가 왜 발생하는지 이해하지 못합니다. –

커플 :

당신은 그것으로, 그래서 다른 기능은 그들과 캐피탈 문자로 시작
함수 이름을 엉망으로하지 않는 개인을 유지할 수 있습니다하는 것이 좋습니다, 모든 글로벌 변수를 사용했습니다 컨벤션, 컨스트럭터를 위해 예약 됨
setTimeout에 지정된 함수에는 실행 중 속도를 수정하는 공용 변수 나 함수가 없으므로 전역 변수를 사용하여 속도를 제어 할 수만 있습니다. setTimeout(Tick, 1000);

UpdateTimer

대신의 setTimeout에 문자열을 전달하는 포함되지 않은
, 함수 참조를 전달 괜찮아요 당신은 당신의 속도를 변경할 수있는 간단한 타이머를 원하는 경우

어쨌든 : 기능 만이 수정할 수 있도록

<script> 

var timer = (function() { 
    var basePeriod = 1000; 
    var currentSpeed = 1; 
    var timerElement; 
    var timeoutRef; 
    var count = 0; 

    return { 
     start : function(speed, id) { 
     if (speed >= 0) { 
      currentSpeed = speed; 
     } 
     if (id) { 
      timerElement = document.getElementById(id); 
     } 
     timer.run(); 
     }, 

     run: function() { 
     if (timeoutRef) clearInterval(timeoutRef); 
     if (timerElement) { 
      timerElement.innerHTML = count; 
     } 
     if (currentSpeed) { 
      timeoutRef = setTimeout(timer.run, basePeriod/currentSpeed); 
     } 
     ++count; 
     }, 

     setSpeed: function(speed) { 
     currentSpeed = +speed; 
     timer.run(); 
     } 
    } 

}()); 

window.onload = function(){timer.start(10, 'timer');}; 

</script> 

<div id="timer"></div> 
<input id="i0"> 
<button onclick=" 
    timer.setSpeed(document.getElementById('i0').value); 
">Set new speed</button>

그것은 폐쇄에 모든 변수를 유지합니다. 속도를 0으로 설정하여 일시 중지 할 수 있습니다.

출처

2012-02-23 07:08:55 RobG

ok 고맙습니다. 고맙습니다. clearInterval() 함수를 사용하고 있지 않습니다. –

희망이 도움이 될 수 있습니다 :

<html> 
<head> 
<script type="text/javascript"> 
function showAlert() 
{ 
var t=setTimeout("alertMsg()",5000); 
} 
function alertMsg() 
{ 
alert("Time up!!!"); 
} 
</script> 
</head> 

<body> 
<form> 
<input type="button" value="Start" onClick="timeMsg()" /> 
</form> 
</body> 

</html>

출처

2012-02-23 06:53:03 Virtual

Check this demo on jsFiddle.net.

HTML

<div id="divTimer">100</div> 
<div id="divDec">1</div> 
<div id="divSpeed">100</div> 

<input id="start" value=" Start " onclick="javaScript:start();" type="button" /> 
<input id="stop" value=" Stop " onclick="javaScript:stop();" type="button" /><br/> 

<input id="inc" value=" Increase " onclick="javaScript:increase();" type="button" /> 
<input id="dec" value=" Decrease " type="button" onclick="javaScript:decrease();"/>

자바 스크립트

var handler; 

function start() { 
    handler = setInterval("decrementValue()", parseInt(document.getElementById('divSpeed').innerHTML, 10)); 
} 

function stop() { 
    clearInterval(handler); 
} 

function decrementValue() { 
    document.getElementById('divTimer').innerHTML = parseInt(document.getElementById('divTimer').innerHTML, 10) - parseInt(document.getElementById('divDec').innerHTML, 10); 
} 

function increase() { 
    document.getElementById('divDec').innerHTML = parseInt(document.getElementById('divDec').innerHTML, 10) + 1; 
    document.getElementById('divSpeed').innerHTML = parseInt(document.getElementById('divSpeed').innerHTML, 10) + 200; 
    stop(); 
    decrementValue(); 
    start(); 
} 

function decrease() { 
    document.getElementById('divDec').innerHTML = parseInt(document.getElementById('divDec').innerHTML, 10) - 1; 
    document.getElementById('divSpeed').innerHTML = parseInt(document.getElementById('divSpeed').innerHTML, 10) - 200; 
    stop(); 
    decrementValue(); 
    start(); 
}

희망이 당신을 위해 무엇을 찾고 있습니다. 포인트

출처

2012-02-23 07:01:11

자바 스크립트를 사용하는 타이머

답변

관련 문제