Relative Arc Canvas to Seconds Timer

Question

How to Make Relative Between timers and Circle Arc i need Circle start from 0 Deg to 360 Deg Depend on seconds of time:


so could anyone help me how to relative timer with canvas? Note: I don't prefer using Ready Plugins

(function ($) {
    jQuery.fn.countdown = function (options, callback) {
        var settings = { 'date': null };
        if (options) {
            $.extend(settings, options);
        }
        this_sel = $(this);
        function count_exec() {
            eventDate = Date.parse(settings['date']) / 1000;
            currentDate = Math.floor($.now() / 1000);
            if (eventDate <= currentDate) {
                callback.call(this);
				clearInterval(interval);
			}
            seconds = eventDate - currentDate;
            days = Math.floor(seconds / (60 * 60 * 24));
            seconds -= days * 60 * 60 * 24;
            hours = Math.floor(seconds / (60 * 60));
            seconds -= hours * 60 * 60 ;
			minutes = Math.floor(seconds / 60);
			seconds -= minutes * 60;

            // add 0 value to left of value
			if (!isNaN(eventDate)) {
                this_sel.find('.days').text(days);
			    this_sel.find('.hours').text(hours);
			    this_sel.find('.mins').text(minutes);
			    this_sel.find('.secs').text(seconds);
			}
        }
        count_exec();
        interval = setInterval(count_exec, 1000);

        /*Canvas JavaScript*/
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 70;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.lineWidth = 8;
        context.strokeStyle = '#14E170';
        context.stroke();
    };
})(jQuery);
$(document).ready(function () {
    $("#countdown").countdown({
        date: "6 january 2017 7:15:00"
    },
    function () {
        $("#countdown").text("merry christmas");
    }
    );
    
})
#countdown .countdown-container{
    width:20%;
    position:relative;
    float:left;
    border:1px solid #0fd562;
    margin-right:50px;
}
#countdown .countdown-container >div{
    position:absolute;
    top:100px;
    left:95px;
    text-align:center;
}
.secs, span{
    font-size:16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div id="countdown">
        <div class="countdown-container">
            <div class="contents">
                <div class="secs">
                    00
                </div>
                <span>Seconds</span>
            </div>
            <canvas id="myCanvas" width="250" height="250"></canvas>
        </div>
        <div class="countdown-container">
            <div class="contents">
                <div class="mins">
                    00
                </div>
                <span>Minutes</span>
            </div>
            <canvas id="myCanvas2" width="250" height="250"></canvas>
        </div>
        <div class="countdown-container">
            <div class="contents">
                <div class="hours">
                    00
                </div>
                <span>Hours</span>
            </div>
            <canvas id="myCanvas3" width="250" height="250"></canvas>
        </div>
        <div class="countdown-container">
            <div class="contents">
                <div class="days">
                    00
                </div>
                <span>Days</span>
            </div>
            <canvas id="myCanvas4" width="250" height="250"></canvas>
        </div>
    </div>

Please Run Code snippet in full page


Show source
| javascript   | jquery   | html   | css   | canvas   2017-01-04 09:01 5 Answers

Answers ( 5 )

  1. 2017-01-04 09:01

    Just try it...

    CSS

    <style>
        .countdown-container{   
            width: 250px;
            position: absolute;
            height: 250px;
            top: 0;
            left: 0;
            text-align: center;
            padding-top: 50px;
        }
        #countdown{    
            position: relative;
        }
    
    </style>
    

    HTML

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div id="countdown">
        <div class="countdown-container">
            <div class="secs">
                00
            </div>
            <span>Seconds</span>
        </div>
        <canvas id="myCanvas" width="250" height="250"></canvas>
    </div>
    

    JS

    <script>
        (function ($) {
            jQuery.fn.countdown = function (options, callback) {
                var settings = {'date': null};
                if (options) {
                    $.extend(settings, options);
                }
                this_sel = $(this);
                function count_exec() {
                    eventDate = Date.parse(settings['date']) / 1000;
                    currentDate = Math.floor($.now() / 1000);
                    if (eventDate <= currentDate) {
                        callback.call(this);
                        clearInterval(interval);
                    }
                    seconds = eventDate - currentDate;
                    days = Math.floor(seconds / (60 * 60 * 24));
                    seconds -= days * 60 * 60 * 24;
                    hours = Math.floor(seconds / (60 * 60));
                    seconds -= hours * 60 * 60;
                    minutes = Math.floor(seconds / 60);
                    seconds -= minutes * 60;
    
                    // add 0 value to left of value
                    if (!isNaN(eventDate)) {
                        this_sel.find('.days').text(days);
                        this_sel.find('.hours').text(hours);
                        this_sel.find('.mins').text(minutes);
                        this_sel.find('.secs').animate({'font-size': '100px'}, 1000).text(seconds);
                    }
                }
                count_exec();
                interval = setInterval(count_exec, 1000);
    
                /*Canvas JavaScript*/
                var canvas = document.getElementById('myCanvas');
                var context = canvas.getContext('2d');
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                var radius = 70;
    
                context.beginPath();
                context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
                context.lineWidth = 8;
                context.strokeStyle = '#14E170';
                context.stroke();
            };
        })(jQuery);
        $(document).ready(function () {
            $("#countdown").countdown({
                date: "6 january 2017 7:15:00"
            },
                    function () {
                        $("#countdown").text("merry christmas");
                    }
            );
    
        })
    </script>
    

    I hope its helful for you.

  2. 2017-01-04 09:01

    (function ($) {
        jQuery.fn.countdown = function (options, callback) {
            var settings = { 'date': null };
            if (options) {
                $.extend(settings, options);
            }
            this_sel = $(this);
            function count_exec() {
                eventDate = Date.parse(settings['date']) / 1000;
                currentDate = Math.floor($.now() / 1000);
                if (eventDate <= currentDate) {
                    callback.call(this);
    				clearInterval(interval);
    			}
                seconds = eventDate - currentDate;
                days = Math.floor(seconds / (60 * 60 * 24));
                seconds -= days * 60 * 60 * 24;
                hours = Math.floor(seconds / (60 * 60));
                seconds -= hours * 60 * 60 ;
    			minutes = Math.floor(seconds / 60);
    			seconds -= minutes * 60;
    
                // add 0 value to left of value
    			if (!isNaN(eventDate)) {
                    this_sel.find('.days').text(days);
    			    this_sel.find('.hours').text(hours);
    			    this_sel.find('.mins').text(minutes);
    			    this_sel.find('.secs').animate({ 'font-size': '100px' },1000).text(seconds);
    			}
            }
            count_exec();
            interval = setInterval(count_exec, 1000);
    
            /*Canvas JavaScript*/
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;
            var radius = 70;
    
            context.beginPath();
            context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
            context.lineWidth = 8;
            context.strokeStyle = '#14E170';
            context.stroke();
        };
    })(jQuery);
    $(document).ready(function () {
        $("#countdown").countdown({
            date: "6 january 2017 7:15:00"
        },
        function () {
            $("#countdown").text("merry christmas");
        }
        );
        
    })
    .countdown-container{   
        width: 250px;
        position: absolute;
        height: 250px;
        top: 0;
        left: 0;
        text-align: center;
        padding-top: 50px;
    }
    #countdown{    
        position: relative;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div id="countdown">
        <div class="countdown-container">
            <div class="secs">
                00
            </div>
            <span>Seconds</span>
        </div>
        <canvas id="myCanvas" width="250" height="250"></canvas>
    </div>

  3. 2017-01-04 11:01

    Try this , It will help you to achieve the degree increment, you can changet the rotation direction by replacing the falseto true in the code context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + kk, false);

    (function($) {
      jQuery.fn.countdown = function(options, callback) {
        var settings = {
          'date': null
        };
        if (options) {
          $.extend(settings, options);
        }
        this_sel = $(this);
        /*Canvas JavaScript*/
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 70;
        var kk = 0;
        function count_exec() {
          eventDate = Date.parse(settings['date']) / 1000;
          currentDate = Math.floor($.now() / 1000);
          if (eventDate <= currentDate) {
            callback.call(this);
            clearInterval(interval);
          }
          seconds = eventDate - currentDate;
          days = Math.floor(seconds / (60 * 60 * 24));
          seconds -= days * 60 * 60 * 24;
          hours = Math.floor(seconds / (60 * 60));
          seconds -= hours * 60 * 60;
          minutes = Math.floor(seconds / 60);
          seconds -= minutes * 60;
    
    
          context.clearRect(50, 50, canvas.width, canvas.height);
          kk = ((seconds) * parseFloat(0.10471));
    
          context.beginPath();
          context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + kk, false);
          context.lineWidth = 8;
          context.strokeStyle = '#14E170';
          context.stroke();
          // add 0 value to left of value
          if (!isNaN(eventDate)) {
            this_sel.find('.days').text(days);
            this_sel.find('.hours').text(hours);
            this_sel.find('.mins').text(minutes);
            this_sel.find('.secs').animate({
              'font-size': '100px'
            }, 1000).text(seconds);
          }
        }
        count_exec();
        interval = setInterval(count_exec, 1000);
    
    
      };
    })(jQuery);
    $(document).ready(function() {
      $("#countdown").countdown({
          date: "6 january 2017 7:15:00"
        },
        function() {
          $("#countdown").text("merry christmas");
        }
      );
    
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <div id="countdown">
      <div class="countdown-container">
        <div class="secs">
          00
        </div>
        <span>Seconds</span>
      </div>
      <canvas id="myCanvas" width="250" height="250"></canvas>
    </div>

  4. 2017-01-04 11:01

    Try this, this will also help you

    (function($) {
      jQuery.fn.countdown = function(options, callback) {
        var settings = {
          'date': null
        };
        if (options) {
          $.extend(settings, options);
        }
        this_sel = $(this);
        /*Canvas JavaScript*/
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 70;
        var kk = 0;
    
        function count_exec() {
          eventDate = Date.parse(settings['date']) / 1000;
          currentDate = Math.floor($.now() / 1000);
          if (eventDate <= currentDate) {
            callback.call(this);
            clearInterval(interval);
          }
          seconds = eventDate - currentDate;
          days = Math.floor(seconds / (60 * 60 * 24));
          seconds -= days * 60 * 60 * 24;
          hours = Math.floor(seconds / (60 * 60));
          seconds -= hours * 60 * 60;
          minutes = Math.floor(seconds / 60);
          seconds -= minutes * 60;
    
    
          context.clearRect(50, 50, canvas.width, canvas.height);
          kk = ((60 - seconds) * parseFloat(0.10471));
    
          context.beginPath();
          context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + kk, false);
          context.lineWidth = 8;
          context.strokeStyle = '#14E170';
          context.stroke();
          // add 0 value to left of value
          if (!isNaN(eventDate)) {
            this_sel.find('.days').text(days);
            this_sel.find('.hours').text(hours);
            this_sel.find('.mins').text(minutes);
            this_sel.find('.secs').animate({
              'font-size': '100px'
            }, 1000).text(seconds);
          }
        }
        count_exec();
        interval = setInterval(count_exec, 1000);
    
    
      };
    })(jQuery);
    $(document).ready(function() {
      $("#countdown").countdown({
          date: "6 january 2017 7:15:00"
        },
        function() {
          $("#countdown").text("merry christmas");
        }
      );
    
    })
    .countdown-container {
      width: 250px;
      position: absolute;
      height: 250px;
      top: 0;
      left: 0;
      text-align: center;
      padding-top: 50px;
    }
    #countdown {
      position: relative;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <div id="countdown">
      <div class="countdown-container">
        <div class="secs">
          00
        </div>
        <span>Seconds</span>
      </div>
      <canvas id="myCanvas" width="250" height="250"></canvas>
    </div>

  5. 2017-01-05 18:01

    I hope this is what you need, try this

    (function($) {
      var date = new Date("2017-01-30");
      jQuery.fn.countdown = function(options, callback) {
        var settings = {
          'date': null
        };
        if (options) {
          $.extend(settings, options);
        }
        this_sel = $(this);
        /*Canvas JavaScript*/
        var canvas = document.getElementById('myCanvas');
        var canvas1 = document.getElementById('myCanvas1');
        var canvas2 = document.getElementById('myCanvas2');
        var canvas3 = document.getElementById('myCanvas3');
        var context = canvas.getContext('2d');
        var context1 = canvas1.getContext('2d');
        var context2 = canvas2.getContext('2d');
        var context3 = canvas3.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 70;
    
    
        var sec_arc_end = 0,
          min_arc_end = 0,
          hour_arc_end = 0,
          day_arc_end = 0;
    
        function count_exec() {
          eventDate = Date.parse(date) / 1000;
          currentDate = Math.floor($.now() / 1000);
          if (eventDate <= currentDate) {
            callback.call(this);
            clearInterval(interval);
          }
          seconds = eventDate - currentDate;
    
          days = Math.floor(seconds / (60 * 60 * 24));
    
          seconds -= days * 60 * 60 * 24;
          hours = Math.floor(seconds / (60 * 60));
          seconds -= hours * 60 * 60;
          minutes = Math.floor(seconds / 60);
          seconds -= minutes * 60;
    
          // seconds arc canvas...................
          context.clearRect(50, 50, canvas.width, canvas.height);
          sec_arc_end = ((60 - seconds) * parseFloat(0.10472));
          context.beginPath();
          context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + sec_arc_end, false);
          context.lineWidth = 8;
          context.strokeStyle = '#14E170';
          context.stroke();
          // minutes arc canvas...................
          context1.clearRect(50, 50, canvas.width, canvas.height);
          min_arc_end = ((60 - minutes) * parseFloat(0.10471));
          context1.beginPath();
          context1.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + min_arc_end, false);
          context1.lineWidth = 8;
          context1.strokeStyle = '#14E170';
          context1.stroke();
          // hours arc canvas...................
          context2.clearRect(50, 50, canvas.width, canvas.height);
          hour_arc_end = ((24 - hours) * parseFloat((0.10471 * 5) / 2));
          context2.beginPath();
          context2.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + hour_arc_end, false);
          context2.lineWidth = 8;
          context2.strokeStyle = '#14E170';
          context2.stroke();
          // days arc canvas...................
          context3.clearRect(50, 50, canvas.width, canvas.height);
          hour_arc_end = ((days) * parseFloat((0.10471) * 2));
          context3.beginPath();
          context3.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + hour_arc_end, false);
          context3.lineWidth = 8;
          context3.strokeStyle = '#14E170';
          context3.stroke();
          // add 0 value to left of value
          if (!isNaN(eventDate)) {
            this_sel.find('.days').text(days);
            this_sel.find('.hours').text(hours);
            this_sel.find('.mins').text(minutes);
            this_sel.find('.secs').text(seconds);
          }
        }
        count_exec();
        interval = setInterval(count_exec, 1000);
    
    
      };
    })(jQuery);
    $(document).ready(function() {
      $("#countdown").countdown({
          date: "6 january 2017 7:15:00"
        },
        function() {
          $("#countdown").text("merry christmas");
        }
      );
    
    })
    #countdown {
      width: 100%;
      height: 150px;
      background-color: grey;
      padding: 5px;
    }
    .countdown-container {
      width: 24%;
      height: 97%;
      text-align: center;
      background-color: #0099FF;
      border-radius: 20px;
      position: absolute;
    }
    #countdown .countdown-container {
      text-align: center;
      float: left;
      position: relative;
      margin: 0.30% 0.5% 0.30% 0.5%;
    }
    #countdown .countdown-container .contents {
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);
      font-size-adjust: 0.58;
    }
    .contents div {
      font-size: 28px;
    }
    .contents span {
      font-size: 16px;
    }
    canvas {
      width: 100%;
      height: 100%;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <div id="countdown">
      <div class="countdown-container">
    
        <div class="contents">
          <div class="secs">
            00
          </div>
          <span>Seconds</span>
        </div>
        <canvas id="myCanvas" width="250" height="250"></canvas>
    
      </div>
      <div class="countdown-container">
        <div class="contents">
          <div class="mins">
            00
          </div>
          <span>Minutes</span>
        </div>
        <canvas id="myCanvas1" width="250" height="250"></canvas>
      </div>
      <div class="countdown-container">
        <div class="contents">
          <div class="hours">
            00
          </div>
          <span>Hours</span>
        </div>
        <canvas id="myCanvas2" width="250" height="250"></canvas>
      </div>
      <div class="countdown-container">
        <div class="contents">
          <div class="days">
            00
          </div>
          <span>Days</span>
        </div>
        <canvas id="myCanvas3" width="250" height="250"></canvas>
      </div>
    </div>

◀ Go back