我用(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");
}
);
})创建了一个倒数计时器。它运作良好，但存在一些问题：
我需要相对圈数秒，圈数分钟，小时和天数，如this demo。
请在整页中运行代码段。
请不要建议使用插件，因为我想编写简短的代码，而且我想了解越来越多关于jQuery＆amp;的JavaScript。
#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>{{1}}
答案 0 :(得分：0)
您需要为每个画布添加不同的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，也许你想要改成星期或月份。
我希望它可以帮到你。
答案 1 :(得分：0)
请试试这个，
(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>