javascript - 带弧形 Canvas 的倒数计时器

我用canvas创建了一个倒数计时器。它运行良好，但是存在一些问题：

我需要像this demo这样用圆圈分钟，小时和天来相对圆圈秒。

请在整页中运行代码段。

请不要建议使用插件，因为我想编写简短的代码，而且我想越来越了解jQuery和JavaScript。

(function ($) {
    jQuery.fn.countdown = function (options, callback) {
        var settings = {
            'date': null
        };
        if (options) {
            $.extend(settings, options);
        }
        this_sel = $(this);

        /*Canvas Variables*/
        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;
        /*End Canvas Variables*/

        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').text(seconds);
            }
        }
        // #region Execute Interval
         count_exec();
        interval = setInterval(count_exec, 1000);
        // #endregion

    };
})(jQuery);
$(document).ready(function () {
    $("#countdown").countdown({
        date: "6 january 2017 7:15:00"
    },
      function () {
          $("#countdown").text("merry christmas");
      }
    );

})

#countdown .countdown-container{
                width:25%;
                position:relative;
                float:left;
                border:1px solid #0fd562;
            }
            #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="myCanvas" width="250" height="250"></canvas>
    </div>
    <div class="countdown-container">
        <div class="contents">
            <div class="days">
                00
            </div>
            <span>Days</span>
        </div>
        <canvas id="myCanvas" width="250" height="250"></canvas>
    </div>
</div>

最佳答案

您需要为每个画布添加不同的ID，以小时和天为单位，以秒为单位。

之后，您需要使用绘制每个画布所需的不同参数执行该函数，而不仅仅是画布（
如果创建一个可以接收画布并运行其绘画功能的函数，那就更好了。我用相同的时间做了所有事情）

(function ($) {
    jQuery.fn.countdown = function (options, callback) {
        var settings = {
            'date': null
        };
        if (options) {
            $.extend(settings, options);
        }
        this_sel = $(this);
        /*Canvas Variables*/

        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;
        var canvas2 = document.getElementById('myCanvas2');
        var context2 = canvas2.getContext('2d');
        var centerX2 = canvas2.width / 2;
        var centerY2 = canvas2.height / 2;
        var radius2 = 70;
        var kk2 = 0;
        var canvas3 = document.getElementById('myCanvas3');
        var context3 = canvas3.getContext('2d');
        var centerX3 = canvas3.width / 2;
        var centerY3 = canvas3.height / 2;
        var radius3 = 70;
        var kk3 = 0;
        var canvas4 = document.getElementById('myCanvas4');
        var context4 = canvas4.getContext('2d');
        var centerX4 = canvas4.width / 2;
        var centerY4 = canvas4.height / 2;
        var radius4 = 70;
        var kk4 = 0;
        /*End Canvas Variables*/
        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.1046));
            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();

            context2.clearRect(50, 50, canvas2.width, canvas2.height);
            kk2 = ((60 - minutes) * parseFloat(0.1046));
            context2.beginPath();
            context2.arc(centerX2, centerY2, radius2, 1.5 * Math.PI, 1.5 * Math.PI + kk2, false);
            context2.lineWidth = 8;
            context2.strokeStyle = '#14E170';
            context2.stroke();

            context3.clearRect(50, 50, canvas3.width, canvas3.height);
            kk3 = ((24 - hours) * parseFloat(0.261));
            context3.beginPath();
            context3.arc(centerX3, centerY3, radius3, 1.5 * Math.PI, 1.5 * Math.PI + kk3, false);
            context3.lineWidth = 8;
            context3.strokeStyle = '#14E170';
            context3.stroke();

            context4.clearRect(50, 50, canvas4.width, canvas4.height);
            kk4 = ((365 - days) * parseFloat(0.0172));
            context4.beginPath();
            context4.arc(centerX4, centerY4, radius4, 1.5 * Math.PI, 1.5 * Math.PI + kk4, false);
            context4.lineWidth = 8;
            context4.strokeStyle = '#14E170';
            context4.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);
            }
        }
        // #region Execute Interval
         count_exec();
        interval = setInterval(count_exec, 1000);
        // #endregion

    };
})(jQuery);
$(document).ready(function () {
    $("#countdown").countdown({
        date: "6 january 2017 7:15:00"
    },
      function () {
          $("#countdown").text("merry christmas");
      }
    );

})

#countdown .countdown-container{
                width:25%;
                position:relative;
                float:left;
                border:1px solid #0fd562;
            }
            #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>

我将天数设为365格式2PI / 365 = 0,0172，也许您想更改为星期或一个月。

希望对您有帮助。