CODEWITHSUNDEEP
javascripttimetimersetinterval
faressoft
faressoft

Reputation: 19651

What is the problem in this timer [JS]

What is the problem in this timer [JS]

<script type="text/javascript">

    var remain = "14:14";
    setInterval ("timer()", 660);

    function timer(){

        var remainM = parseInt(remain.split(":")[0]);
        var remainS = parseInt(remain.split(":")[1]);

        //document.getElementById("hello").innerHTML = parseInt(remainS);

        if (remainS==0) {
            if (remainM==0) {

            } else {
                remainM = parseInt(remainM) - 1;
                remainS = 59;
            }
        } else {
            remainS = parseInt(remainS) - 1;
        }

        var remainSr = String(remainS);
        var remainMr = String(remainM);

        if (parseInt(remainS)<=9) {remainSr = "0" + String(remainS);}
        if (parseInt(remainM)<=9) {remainMr = "0" + String(remainM);}

        remain = String(remainMr) + ":" + String(remainSr);
        document.getElementById("hello").innerHTML = remain;

    }

</script>

It jumps from 14:09 to 13:59

Upvotes: 0

Views: 856

Answers (6)

Vishal Jain
Vishal Jain

Reputation: 1

<!DOCTYPE html>
<html>
<body>
<button onclick="Timer()">Try it</button>

<script>
function Timer() {
    var sec=0;
    var mm =0;
    setInterval(function(){
            if(sec<10){
               if(mm>=10) {
                  document.getElementById('p1').innerHTML= mm + ":"+ "0"+sec;
               }
               else {
                                  document.getElementById('p1').innerHTML= "0"+mm + ":"+ "0"+sec;
                               }
                               sec = sec+1;                             
            }
            else if(sec >=10 && sec <= 59) {
               if(mm>=10) {
                  document.getElementById('p1').innerHTML= mm + ":"+ sec;
               }
               else {
                                  document.getElementById('p1').innerHTML= "0"+mm + ":"+ sec;
                               } 
                               sec = sec+1;
                            }
                            else if(sec==60) {
                                     sec=0;
                                     mm = mm+1;
                                     if(mm>=10) {
                                        document.getElementById('p1').innerHTML= mm + ":"+ "0"+sec;
                                     }
                                     else {
                                        document.getElementById('p1').innerHTML= "0"+mm + ":"+ "0"+sec;
                                     }
                               sec = sec+1;            
                            }
                },1000);
}
</script>
<p id="p1"></p>
</body>
</html>

Upvotes: -1

Chuck
Chuck

Reputation: 237010

Others have covered the immediate problem — that you're accidentally treating a number as octal rather than decimal — but the deeper problem is that you're storing numbers as strings. Constantly converting to and from strings is convoluted and error-prone. A better design would be to store the time as two numbers and have a function that converts those numbers into a string on demand. Here's a version that keeps the numbers and their string representation separate:

var remain = {
    mins: 14, 
    secs: 14,
    toString: function () {
        var pad = function(num) { return (num < 10 ? "0" : "") + num; };
        return pad(this.mins) + ":" + pad(this.secs);
    }
};

setInterval (timer, 660);

function timer() {
    if (remain.secs === 0) {
        if (remain.mins > 0) {
            remain.mins -= 1;
            remain.secs = 59;
        }
    } else {
        remain.secs -= 1;
    }
    document.document.getElementById("hello").innerHTML = remain;
}

Upvotes: 1

Hacknightly
Hacknightly

Reputation: 5144

The parseInt() method actually returns the FIRST integer it finds, therefore you are getting back 0 from '09' when you're expecting 9. Try using the parseFloat() method there, and you should be golden. It will return '9' which is what you're expecting. I hope this helps!!

Upvotes: -1

Chandu
Chandu

Reputation: 82903

It is historical mistake made by ignoring the second parameter of parseInt.

Check this article: http://www.devguru.com/technologies/ecmascript/quickref/parseint.html

Try this version:

<script type="text/javascript">
var remain = "14:14";
setInterval("timer()", 660);

function timer() {
    var remainM = parseInt(remain.split(":")[0], 10);
    var remainS = parseInt(remain.split(":")[1], 10); 
    if (remainS == 0) {
        if (remainM == 0) {} else {
            remainM = parseInt(remainM) - 1;
            remainS = 59;
        }
    } else {
        remainS = parseInt(remainS) - 1;
    }
    var remainSr = String(remainS);
    var remainMr = String(remainM);
    if (parseInt(remainS) <= 9) {
        remainSr = "0" + String(remainS);
    }
    if (parseInt(remainM) <= 9) {
        remainMr = "0" + String(remainM);
    }
    remain = String(remainMr) + ":" + String(remainSr);
    document.getElementById("hello").innerHTML = remain;
}
</script>

Upvotes: 3

Kelly
Kelly

Reputation: 41511

parseInt("09") returns 0. if you change it to parseFloat or parseInt("09", 10) it will work.

Upvotes: 2

lawnsea
lawnsea

Reputation: 6581

You need to specify the radix in parseInt. If you do parseInt("09"), you are asking to parse the octal number 9, which is an error. See the parseInt documentation on MDC

Upvotes: 2

Related Questions