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); please use attempt of making timer using settimeout() function reference , build code!
Comments
Post a Comment