javascript - How can I make animation duration more accurate based on setInterval (js) -
i'm writing animation looks number rising in limited time. use setinternal , clearinterval implement it.(i don't want use jquery) interval time 1 millisecond. , limit time 1000 milli seconds. slower expected. went 10000 milliseconds.what doing wrong?
here's code.
<html> <head> <title>a numeric test</title> </head> <body> <div id="numberscroll"></div> <script type="text/javascript"> var limittime = 100; //milliseconds var goalnum = 123456; //the final num var increament = false; //whether animation increasing of not. var textsize = 30; //size of text var temnum = increament ? (goalnum * 0.8) : (goalnum * 1.2); //start number temnum = eval(temnum.tofixed(2)); var increamentnum = (goalnum - temnum) / limittime; var numberscroll = document.getelementbyid("numberscroll"); if(numberscroll === null) { console.log("no element found"); } numberscroll.style.fontsize = textsize; numberscroll.innerhtml = temnum; var intervalid = setinterval(function(){ numberscroll.innerhtml = temnum.tofixed(2); temnum += increamentnum; if(increament){ if(temnum >= goalnum) { clearinterval(intervalid); numberscroll.innerhtml = goalnum; } } else { if(temnum <= goalnum) { clearinterval(intervalid); numberscroll.innerhtml = goalnum; } }},1); </script> </body> </html>
Comments
Post a Comment