相对于秒计时器的弧形画布

【问题标题】：Relative Arc Canvas to Seconds Timer相对于秒计时器的弧形画布
【发布时间】：2017-01-04 08:13:38
【问题描述】：

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

那么任何人都可以帮助我如何与画布相对计时器吗？ 注意：我不喜欢使用 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>

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

【问题讨论】：

    标签： javascript jquery html css canvas


    【解决方案1】：

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

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

    【讨论】：

    • 哦，它工作得很好，你能帮我如何为计时器数字设置动画吗？例如：video youtube link非常感谢你帮助我:)
    • 你通过每天添加要求来让我完成你的全部工作。因此，请就您的需求提出一个新问题，并通过接受正确答案来结束此问题
    • 感谢您的努力，如果您有时间，可以吗
    • 我一定会这样做的，请提出一个新问题
    • add Animation to text
    【解决方案2】：

    试试这个，这对你也有帮助

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

    【讨论】：

    【解决方案3】：

    试试这个，它将帮助您实现度数增量，您可以通过将代码context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + kk, false);中的false替换为true来改变旋转方向

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

      试试吧……

      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>

      希望对你有帮助。

      【讨论】：

        【解决方案5】： 

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

        【讨论】：

          猜你喜欢
          • 1970-01-01
          • 2014-02-16
          • 1970-01-01
          • 2015-01-23
          • 2013-11-25
          • 2012-08-28
          • 1970-01-01
          • 1970-01-01
          • 2018-11-10
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode