Javascript 带弧形画布的倒计时计时器

我用

canvas

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

我需要用分钟、小时和天来相对循环秒

请整页运行代码段

请不要建议使用插件，因为我想写简短的代码，而且我想了解更多关于jQuery和JavaScript的信息

（函数（$）{
jQuery.fn.countdown=函数（选项，回调）{
变量设置={
“日期”：空
};
如果（选项）{
$.extend（设置、选项）；
}
本_sel=$（本）；
/*画布变量*/
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=70；
var-kk=0；
/*结束画布变量*/
函数计数_exec（）{
eventDate=Date.parse（设置['Date']）/1000；
currentDate=Math.floor（$.now（）/1000）；
if（eventDate div）{
位置：绝对位置；
顶部：100px；
左：95px；
文本对齐：居中；
}
.秒，span{
字体大小：16px；
}

00
秒
00
会议记录
00
小时
00
天

您需要在每个画布上放置不同的id，以小时和天为单位，以秒为单位

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

（函数（$）{
jQuery.fn.countdown=函数（选项，回调）{
变量设置={
“日期”：空
};
如果（选项）{
$.extend（设置、选项）；
}
本_sel=$（本）；
/*画布变量*/
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=70；
var-kk=0；
var canvas2=document.getElementById（'myCanvas2'）；
var context2=canvas2.getContext（'2d'）；
var centerX2=canvas2.width/2；
var centerY2=画布2.height/2；
var半径2=70；
var kk2=0；
var canvas3=document.getElementById（'myCanvas3'）；
var context3=canvas3.getContext（'2d'）；
var centerX3=canvas3.width/2；
var centerY3=画布3.height/2；
var半径3=70；
var kk3=0；
var canvas4=document.getElementById（'myCanvas4'）；
var context4=canvas4.getContext（'2d'）；
var centerX4=canvas4.width/2；
var centerY4=画布4.height/2；
var半径4=70；
var kk4=0；
/*结束画布变量*/
函数计数_exec（）{
eventDate=Date.parse（设置['Date']）/1000；
currentDate=Math.floor（$.now（）/1000）；
if（eventDate div）{
位置：绝对位置；
顶部：100px；
左：95px；
文本对齐：居中；
}
.秒，span{
字体大小：16px；
}

00
秒
00
会议记录
00
小时
00
天

请试试这个

（函数（$）{
jQuery.fn.countdown=函数（选项，回调）{
变量设置={
“日期”：空
};
如果（选项）{
$.extend（设置、选项）；
}
本_sel=$（本）；
/*画布变量*/
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
/*最小画布*/
var canvasMin=document.getElementById（'canvasMin'）；
var contextMin=canvasMin.getContext（'2d'）；
var centerMinX=canvasMin.width/2；
var centerMinY=画布最小高度/2；
/*小时画布*/
var canvashhour=document.getElementById（'canvashhours'）；
var contextHour=canvasHour.getContext（'2d'）；
var centerHourX=canvasHour.width/2；
var centerHourY=canvasHour.height/2；
/*日画布*/
var canvasDays=document.getElementById（'canvasDays'）；
var contextDays=canvasDays.getContext（'2d'）；
var centerDaysX=canvasDays.width/2；
var centerDaysY=canvasDays.height/2；
var半径=70；
var-kk=0；
var min=0；
/*结束画布变量*/
函数计数_exec（）{
eventDate=Date.parse（设置['Date']）/1000；
currentDate=Math.floor（$.now（）/1000）；
if（eventDate div）{
位置：绝对位置；
顶部：100px；
左：95px；
文本对齐：居中；