timer using javascript

Question

I want implement timer using java script.I want to decrement timer with variation of interval.
Example.Suppose my timer starts at 500 .
I want decrement timer depending on the level such as
1. 1st level timer should decrement by 1 also decrement speed should be slow.
2.2nd level timer should decrement by 2 and decrement speed should be medium
3.3rd level timer should decrement by 3 and decrement speed should be fast

I can create timer using following code:

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

But i call this CreateTimer() function many times so its speed is not controlling because i call it many times.

There are no variants of time. Why are you doing this? You can just have one timer, set a beginning value and check how it's going. — ingyhere
– ingyhere, Commented Feb 23, 2012 at 6:30
Of course you can modify the speed while the timer is running, it just needs to be a avariable. — RobG
– RobG, Commented Feb 23, 2012 at 6:42
@ ingyhere I am doing a game(quiz) in which for each question I want decrement timer from 500 so for each question i called function CreateTimer() but as i call CreateTimer() function twice,thrise and so on speed is increasing .I am not understanding why this happens why timer speed is not same at all time. — Coder Guru
– Coder Guru, Commented Feb 23, 2012 at 6:42

RobG · Accepted Answer · 2012-02-23 07:08:55Z

Couple of points:

You've used all global variables, it's better to keep them private so other functions don't mess with them
Function names starting with a captial letter are, by convention, reserved for constructors
The function assigned to setTimeout doesn't have any public variables or functions to modify the speed while it's running so you can only use global variables to control the speed. That's OK if you don't care about others messing with them, but better to keep them private
The code for UpdateTimer hasn't been included
Instead of passing a string to setTimeout, pass a function reference: setTimeout(Tick, 1000);

Anyhow, if you want a simple timer that you can change the speed of:

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

It keeps all its variables in closures so only the function can modify them. You can pause it by setting a speed of zero.

ok Thank you problem solved I am not using clearInterval() function.

Virtual · Accepted Answer · 2012-02-23 06:53:03Z

3

Hope, this could be helpful:

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

answered Feb 23, 2012 at 6:53

Virtual

2,2015 gold badges20 silver badges27 bronze badges

Comments

Amar Palsapure · Accepted Answer · 2012-02-23 07:06:14Z

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();"/>

JavaScript

 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();
}

Hope this is what you are looking for.

Collectives™ on Stack Overflow

timer using javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related