相对弧形画布到秒计时器

Question

如何在定时器和圆弧之间建立相对我需要从0度到360度的圆开始取决于几秒钟的时间：

<小时/> 所以任何人都可以帮我如何与帆布相对计时器？ 注意：我不喜欢使用Ready Plugins

＆＃13;

＆＃13;

(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");
    }
    );
    
})

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

请在整页中运行代码段

Answer 1

试试这个，这也可以帮到你

(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>

Answer 2

我希望这就是你需要的，试试这个

＆＃13;

＆＃13;

(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");
    }
  );

})

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个，它会帮助你达到度数增量，你可以通过将代码false中的true替换为context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + kk, false);

来改变旋转方向

＆＃13;

＆＃13;

(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");
    }
  );

})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

试试吧......

<强> 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>

我希望对你有所帮助。

Answer 5

＆＃13;

＆＃13;

(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");
    }
    );
    
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;