javascript - The countdown timer is not working properly when I insert few numbers such as 31,41,51,61 -


i want show countdown timer using javascript. when insert current value 31,41,51,99,61,81 , few other numbers unable arc based on inserted current value. arc should display current value. number gets reducing, closer zero, arc should keep moving towards completing circle.

i tried using html5 canvas, close getting answer it's throwing error.

the fields should have maximum value input text field , current value text field , button on clicked should display current value arc inside canvas element. please help

         <!-- click event function, works when button clicked -->           function clickevent()           {           var max=document.getelementbyid("maxsec").value;           var curr=document.getelementbyid("currsec").value;             myfunction(max,curr);           }           //this           function myfunction(maxvalue,currentvalue) {              //alert(maxvalue + ' ' + currentvalue);              if (currentvalue<=maxvalue)              {               var x =   (2*3.14*currentvalue/maxvalue);              var c = document.getelementbyid("mycanvas");              var ctx = c.getcontext("2d");          ctx.clearrect(0, 0, c.width, c.height);          ctx.font="15px georgia";          ctx.textalign = "center";               ctx.filltext(currentvalue,c.width/2, c.height/2);           ctx.beginpath();          ctx.arc(75, 75, 50, x, 2 * math.pi);                // ctx.linewidth = 10;                // line color                ctx.strokestyle = 'black';                ctx.stroke();          }          if (maxvalue==currentvalue)          {          ctx.clearrect(0, 0, c.width, c.height);          ctx.font="15px georgia";          ctx.textalign = "center";               ctx.filltext("time up",c.width/2, c.height/2);          ctx.textalign="center";          }          }          
<!doctype html>          <html>          <body>          <div>          max second: <input type="text" id="maxsec" value="300"><br/>          current second: <input type="text" id="currsec" value="150">          <button onclick="clickevent()">click me</button>          <br/>         //this canvas section arc or curvature            displayed.          <canvas id="mycanvas" width="150" height="150" style="border:1px       solid #d3d3d3;">          browser not support html5 canvas tag.</canvas>          </div>          </body>          </html>

you passing values string function instead of number, if change below lines of code, works fine!

js:

var max=parseint(document.getelementbyid("maxsec").value); var curr=parseint(document.getelementbyid("currsec").value);   myfunction(max,curr); 

jsfiddle demo

please use attempt of making timer using settimeout() function reference , build code!

jsfiddle demo


Comments

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -