DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.3.2/css/colReorder.dataTables.min.css">
<script src="https://cdn.datatables.net/colreorder/1.3.2/js/dataTables.colReorder.min.js"></script>
<!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 is the canvas section where the Arc or the curvature will            be displayed.
        <canvas id="myCanvas" width="150" height="150" style="border:1px       solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.</canvas>
        </div>

        <script>
         <!-- Click event function, works when button is clicked -->
         function clickevent()
         {
         var max=parseInt(document.getElementById("maxsec").value);
         var curr=parseInt(document.getElementById("currsec").value);  
         var timer = setInterval(function(){
            if(curr <= 0) {
              clearInterval(timer);
            }
            myFunction(max,curr);
            curr = curr - 1;
          }, 1000);

          
         }
         //This is the 
        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 *...