带弧形画布的倒数计时器

Question

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

我需要像 this demo 这样将圈秒与圈分钟、小时和天相对。

请在整页中运行代码sn-p。

请不要建议使用插件，因为我想写短代码，而且我想更多地了解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>

Answer 1

您需要为每个画布设置不同的 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，也许您想更改为周或月。

希望对你有帮助。

Answer 2

请试试这个，

(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;
        
        /*Min Canvas*/
        var canvasMin = document.getElementById('canvasMin');
        var contextMin = canvasMin.getContext('2d');
        var centerMinX = canvasMin.width / 2;
        var centerMinY = canvasMin.height / 2;
        
        /*Hour Canvas*/
        var canvasHour = document.getElementById('canvasHours');
        var contextHour = canvasHour.getContext('2d');
        var centerHourX = canvasHour.width / 2;
        var centerHourY = canvasHour.height / 2;
        
        /*Day Canvas*/
        var canvasDays = document.getElementById('canvasDays');
        var contextDays = canvasDays.getContext('2d');
        var centerDaysX = canvasDays.width / 2;
        var centerDaysY = canvasDays.height / 2;
        
        var radius = 70;
        var kk = 0;
        var min = 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();
            
            // MInutes arc
            contextMin.clearRect(50, 50, canvas.width, canvas.height);
            min = ((60 - minutes) * parseFloat(0.10471));

            contextMin.beginPath();
            contextMin.arc(centerMinX, centerMinY, radius, 1.5 * Math.PI, 1.5 * Math.PI + min, false);
            contextMin.lineWidth = 8;
            contextMin.strokeStyle = '#14E170';
            contextMin.stroke();
            
            // Hours arc
            contextHour.clearRect(50, 50, canvas.width, canvas.height);
            hour = ((60 - hours) * parseFloat(0.10471));

            contextHour.beginPath();
            contextHour.arc(centerMinX, centerMinY, radius, 1.5 * Math.PI, 1.5 * Math.PI + hour, false);
            contextHour.lineWidth = 8;
            contextHour.strokeStyle = '#14E170';
            contextHour.stroke();
            
            // Days arc
            contextDays.clearRect(50, 50, canvas.width, canvas.height);
            day = ((60 - days) * parseFloat(0.10471));

            contextDays.beginPath();
            contextDays.arc(centerMinX, centerMinY, radius, 1.5 * Math.PI, 1.5 * Math.PI + day, false);
            contextDays.lineWidth = 8;
            contextDays.strokeStyle = '#14E170';
            contextDays.stroke();
            
            // add 0 value to left of value
            if (!isNaN(eventDate)) {
            //console.log(days+' : '+hours+' : '+minutes+' : '+seconds);
                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: "8 january 2017 00:00: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="canvasMin" width="250" height="250"></canvas>
        </div>
        <div class="countdown-container">
            <div class="contents">
                <div class="hours">
                    00
                </div>
                <span>Hours</span>
            </div>
            <canvas id="canvasHours" width="250" height="250"></canvas>
        </div>
        <div class="countdown-container">
            <div class="contents">
                <div class="days">
                    00
                </div>
                <span>Days</span>
            </div>
            <canvas id="canvasDays" width="250" height="250"></canvas>
        </div>
    </div>