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

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

转载作者：行者123 更新时间：2023-11-28 04:35:52

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

最佳答案

您需要为每个 Canvas 放置不同的 id，以小时和天为单位与以秒为单位相同。

在此之后，您需要使用绘制每个 Canvas 所需的不同参数来执行函数，而不仅仅是 Canvas (如果您创建一个接收 Canvas 并运行其绘制的函数会更好。我在同一个函数中做了所有的时间)

(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，也许你想换成周或月。

希望对你有帮助。

关于javascript - 带有弧形 Canvas 的倒数计时器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41480823/

文章推荐： html - 如何对数据表中的特定列进行排序？

文章推荐： javascript - webworker 中的 clearInterval 不起作用

文章推荐： css - Angular 通用 CSS 导入不起作用

文章推荐： jquery - 如何使用inarray然后使用转换为数组的json数组

Javascript |倒数
如果我有一个变量 8589934592 示例: var a = (8589934592 | 0); //a is 0 var b = (8589934591223 | 0); //b
c - 倒数
随着我们提高音阶，音符频率增加； #define A4 440 // These are the frequencies of the notes in herts #define A
python - 倒数
我有一个这样组织的列表: [('down', 0.0098000000000000309), ('up', 0.0015000000000000568), ('down', 0.00890000000
python - 求一个多项式以另一个系数在有限域中的多项式为模的倒数(倒数)
如果我有一个多项式 P，有没有办法计算 P^-1 模 Q，即 Q 是另一个多项式？我知道这两个多项式的系数都属于以 z 为模的整数域，即 z 是一个整数。我不确定 SymPy 是否已经在其 galo
c - 一个文件的总行数(倒数)
对于给定的文件，我可以向后计算行数吗？即从 EOF 开始，计算行数直到开始？我可以 fseek 到文件末尾。从那里开始，继续寻找新行字符(新行的指示)并继续增加我的 line_number 计数。但
c - 避免快速除法(倒数)
有什么方法可以编写带除法的 C 代码来命令编译器在代码中需要常规除法精度的几个特定位置不使用快速除法(通过倒数数学)，即使在全局允许倒数数学的情况下也是如此？理想情况下，有一种方法不是特定于编译器的
javascript - 使用 JavaScript 倒数
我正在尝试将照片从我计算机上的本地文件导入到我的 HTML 文件中。我已经设法做到了，但它是按升序排列的。我尝试添加一个变量 JavaScript $(document).ready( functio
java - 计算 t 倒数
我正在尝试使用 commons-math 计算 2 尾学生分布的逆。我正在使用 Excel 来比较值并验证结果是否正确。所以使用excel计算TINV，自由度为5，我使用95.45% =TINV(0
javascript - 运行 jquery 之前从 5 倒数
我有一个 jQuery 相机插件，它使用以下命令来拍摄快照。这是它运行的代码。 function take_snapshot() { // take snapshot and get i
javascript - Brain.js 倒数/反转训练(根据输出预测输入)
我刚刚学会了训练 brain.js network 并且只是在玩它。然后我很好奇是否可以采取相反的方式 - 从输出预测输入？这是我的代码 const brain = require('brain.j
c++ - 快速 1/X 除法(倒数)
如果精度不重要，有什么方法可以提高速度的倒数(X 的除法 1)？所以，我需要计算 1/X。是否有一些解决方法让我失去精度但做得更快？最佳答案 𝗛𝗲𝗿𝗲𝗛𝗲𝗿𝗲𝗛𝗼𝘄𝗧𝗼?
algorithm - 找到整数 N，加上它的(十进制)倒数，等于 M
令 N 为整数。如果N = 2536，则反转N为6352。如果N = 1000000，则反转N为1。给定一个整数 M，其中 1 <= M <= 10^(100000)。我们需要找到一个整数 N 是

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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