What is the problem in this timer [JS]

Question

<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

Chandu · Accepted Answer · 2011-04-04 19:23:09Z

3

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>

answered Apr 4, 2011 at 19:23

Chandu

83.2k19 gold badges137 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cwallenpoole Over a year ago

Number() can avoid those issues.

lawnsea · Accepted Answer · 2011-04-04 19:22:39Z

2

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

answered Apr 4, 2011 at 19:22

lawnsea

6,5811 gold badge26 silver badges19 bronze badges

Comments

Kelly · Accepted Answer · 2011-04-04 19:23:02Z

2

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

answered Apr 4, 2011 at 19:23

Kelly

41.7k4 gold badges44 silver badges51 bronze badges

Comments

Chuck · Accepted Answer · 2011-04-04 19:55:02Z

1

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

answered Apr 4, 2011 at 19:55

Chuck

238k31 gold badges307 silver badges393 bronze badges

1 Comment

gilly3 Over a year ago

+1. Holy smokes, that is nearly exactly the answer I was just getting ready to post. Right down to adding a toString function that calls a pad function. It's erie.

Hacknightly · Accepted Answer · 2011-04-04 19:26:42Z

-1

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

answered Apr 4, 2011 at 19:26

Hacknightly

5,1743 gold badges28 silver badges27 bronze badges

1 Comment

RobG Over a year ago

It doesn't work as you say, parseInt('09') returns zero because the leading zero (in most browsers) makes it treat the number as octal. Since '09' doesn't exist in octal (there is no 9), parseInt returns zero. The more common ways to convert a string to a number are unary +, e.g. x = +t, or using Number as a function, e.g. x = Number(t)

Vishal Jain · Accepted Answer · 2014-10-14 13:03:00Z

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

Collectives™ on Stack Overflow

What is the problem in this timer [JS]

6 Answers 6

1 Comment

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related